CODEWITHSUNDEEP
javascriptjqueryhtml
recoup8063
recoup8063

Reputation: 4280

jQuery .html() not working in if statements

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

Upvotes: 1

Views: 1238

Answers (4)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

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
    });
)();

Upvotes: 5

Anand Jha
Anand Jha

Reputation: 10714

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/

Upvotes: 0

UweB
UweB

Reputation: 4110

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.

Upvotes: 0

Thanh Son Nguyen
Thanh Son Nguyen

Reputation: 184

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;
    }    

});

Upvotes: 1

Related Questions