jQuery .html() not working in if statements

Question

I am making a manage screen for a website were you post articles. I have made it so a table holds all the values of the posts.

<table>
    <tr>
        <th>Post Title</th>
        <th>Post Content</th>
        <th>Tag</th>
    </tr>
    <tr>
        <td id="examplePostTitle">Post Title</td>
        <td id="examplePostContent">First 35 charecters of post........</td>
        <td id="examplePostTag">Post Tag</td>
        <td class="postEditButton" id="examplePostButton">edit</td>
    </tr>
</table>

I have coded some javascript with jquery so that when the user clicks edit the rows are populated by input boxes.

var click = 1;

if (click == 1) {
    $('#examplePostButton').click(function() {
        $('#examplePostTitle').html('<input type="text" value="Post Title" size="10"/>');
        $('#examplePostContent').html('<input type="text" value="First 35 characters of     post........" size="20"/>');
        $('#examplePostTag').html('<select><option>Animation</option><option>Programing</option>        <option>Robotics</option><option>Other</option></select>');
        click = 2;
    });
}

if (click == 2) {
    $('#examplePostButton').click(function() {
        $('#examplePostTitle').html('Post Title');
        $('#examplePostContent').html('First 35 characters of post........');
        $('#examplePostTag').html('Post Tag');
        click = 1;
    });
}

For some reason you can click the edit button once and it changes into input boxes. Then when you click it a second time it will not change the variable and will not revert back to non input boxes. I have checked my code with multiple js and jquery validators so I am no quite sure why the second click function isn't working.

tl:dr:
I have some javascript and jquery code, isnt working, help.
Jsfiddle

Denys Séguret · Accepted Answer · 2013-07-27 15:25:27Z

5

You seem to have a logic problem. You must test the value of click inside the event handler. You probably wanted this :

var click = 1;
$('#examplePostButton').click(function() {
    if (click == 1) {
        $('#examplePostTitle').html('<input type="text" value="Post Title" size="10"/>');
        $('#examplePostContent').html('<input type="text" value="First 35 characters of     post........" size="20"/>');
        $('#examplePostTag').html('<select><option>Animation</option><option>Programing</option>        <option>Robotics</option><option>Other</option></select>');
        click = 2;
    } else if (click == 2) {
        $('#examplePostTitle').html('Post Title');
        $('#examplePostContent').html('First 35 characters of post........');
        $('#examplePostTag').html('Post Tag');
        click = 1;
    }
});

Note that you may avoid the use of a global click variable by using a closure :

(function(){
    var click = 1;
    $('#examplePostButton').click(function() {
         ... rest of the code is identical
    });
)();

edited Jul 27, 2013 at 15:25

answered Jul 27, 2013 at 15:07

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Denys Séguret Over a year ago

Note that a boolean seems more indicated than an integer, here.

Benjamin Gruenbaum Over a year ago

Here is a working fiddle of this solution - you might want to consider not placing HTML inside strings - it gets really cluttered really fast.

iConnor · Accepted Answer · 2013-07-27 15:13:21Z

Your script code just binded at the first time page loaded and then one "click" function was binded, you should edit follow:

var click = 1;


$('#examplePostButton').click(function () {
    if (click == 1) {
       $('#examplePostTitle').html('<input type="text" value="Post Title" size="10"/>');
       $('#examplePostContent').html('<input type="text" value="First 35 charecters of post........" size="20" />');
       $('#examplePostTag').html('<select><option>Animation</option><option>Programing</option><option>Robotics</option><option>Other</option></select>');
       click = 2;
    } else if (click == 2) {
       $('#examplePostTitle').html('Post Title');
       $('#examplePostContent').html('First 35 charecters of post........');
       $('#examplePostTag').html('Post Tag');
       click = 1;
    }    

});

UweB · Accepted Answer · 2013-07-27 15:14:51Z

It's working just fine! The code you posted will run when the page is loaded. But the way it is coded, it attached two event handlers to the edit-cell.

The first event handler will change the cell contents, the second one will run as well and change it right back. And it's all happening so fast you can't see it.

Check out my modifications on http://jsfiddle.net/NkeAx/3/:

$('#examplePostButton').click(function () {
    if (click == 1) {
        $('#examplePostTitle').html('<input type="text" value="Post Title" size="10"/>');
        $('#examplePostContent').html('<input type="text" value="First 35 charecters of post........" size="20" />');
        $('#examplePostTag').html('<select><option>Animation</option><option>Programing</option><option>Robotics</option><option>Other</option></select>');
        click = 2;
    } else if (click == 2) {
        $('#examplePostTitle').html('Post Title');
        $('#examplePostContent').html('First 35 charecters of post........');
        $('#examplePostTag').html('Post Tag');
        click = 1;
    }
});

You're left with one event handler which will do the toggling.

Anand Jha · Accepted Answer · 2013-07-27 15:18:06Z

Here is the solution...

var click = 1;
$('#examplePostButton').click(function(){
if (click == 1) {


        $('#examplePostTitle').html('<input type="text" value="Post Title" size="10"/>');
        $('#examplePostContent').html('<input type="text" value="First 35 charecters of post........" size="20" />');
        $('#examplePostTag').html('<select><option>Animation</option><option>Programing</option><option>Robotics</option><option>Other</option></select>');
        click = 2;
       return false;

}

if (click == 2) {
        $('#examplePostTitle').html('Post Title');
        $('#examplePostContent').html('First 35 charecters of post........');
        $('#examplePostTag').html('Post Tag');
        click = 1;  
}

});

see the link

http://jsfiddle.net/NkeAx/4/

Collectives™ on Stack Overflow

jQuery .html() not working in if statements

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related