jQuery .append() doesn't work

Question

I'm trying to update active/suspend button using AJAX and jQuery, after user clicked on "suspend" -> I have to change the status to "Suspended" + active button.

After user clicked on "active" button -> I change the status to "Activated" + suspend button.

Here is the HTML/PHP code :

Status :

<?php
if($row['active']==2)   // 2 = Suspended
{
?>
    <span id="status<?php echo $row['id']; ?>">Suspended
        <button type="button" class="active-button" value="<?php echo $row['id']; ?>">active</button>
    </span>
<?php
}
else if($row['active']==1)  // 1 = Activated
{
?>
    <span id="status<?php echo $row['id']; ?>">Activated
        <button type="button" class="suspend-button" value="<?php echo $row['id']; ?>">suspend</button>
    </span>
<?php
}
?>

This is the jQuery/AJAX code :

$(function() {
    $('.active-button').click(function(){
        var add_active = 1;
        var add_id = $(this).val();
        var status = "#status"+add_id;
        $(status).text('Loading...');

        $.post('active.php',{id: add_id, active: add_active}, function(){
            $(status).html("").append("Suspended <button type='button' class='active-button' value="+add_id+">active</button>");
        });
    });

    $('.suspend-button').click(function(){
        var add_active = 2;
        var add_id = $(this).val();
        var status = "#status"+add_id;
        $(status).text('Loading...');

        $.post('active.php',{id: add_id, active: add_active}, function(){
            $(status).html("").append("Activated <button type='button' class='suspend-button' value="+add_id+">suspend</button>");
        });
    });
});

But The problem is that the span "status" doesn't change(in the DB it works well).

I'm almost sure that the problem is in this line:

$.post('active.php',{id: add_id, active: add_active}, function(){
    $(status).html("").append("Activated <button type='button' class='suspend-button' value="+add_id+">suspend</button>");
});

Not a solution, just FYI: `.html("").append(foo)` can be done as `.html(foo)`. — Barmar, Apr 19 '15 at 12:11
You're replacing the buttons dynamically, so your event bindings are lost. See the duplicate question for how to do this properly. Another solution would be to have both `active-button` and `suspend-button` in all the spans, and use `.toggle()` to hide and show them. — Barmar, Apr 19 '15 at 12:18

score 0 · Answer 1 · edited Apr 19 '15 at 11:59

0

Change this line

$(status).html("").append("Activated <button type='button' class='suspend-button' value="+add_id+">suspend</button>");

to

$(status).html("").append("Activated <button type='button' class='suspend-button' value='" + add_id + "'>suspend</button>");

edited Apr 19 '15 at 11:59

Barmar

741,623
53
500
612

answered Apr 19 '15 at 11:55

Vaibhav Mule

5,016
4
35
52

1

Although it's a good idea to put quotes around attributes, it won't make a difference unless `add_id` contains space or other special characters. – Barmar Apr 19 '15 at 12:01
Like Barmar said - It's the same effect. – David Alexandrovich Apr 19 '15 at 12:01

jQuery .append() doesn't work

1 Answers1