Javascript simple function works, but not when running in a loop

Question

I have this simple javascript function that makes a POST request and grabs the reply, then sets the HTML of an element to the reply. Here is the function:

function updateStatus(vmid) {
    action = 'vmstatuslabel';
    label = $('#status-'+vmid);
    $.post(site + '/application/controllers/ajax.php', {action:action, vmid:vmid}, function(data) {
        console.log(data);
        label.html(data);
    });
}

This works fine when doing something like updateStatus(13), but running it multiple times will ONLY update the last element in the table. Here is the table in which the script tag is echoed:

        <?php
            if($uvms = $vmhandler->userVMs()) {
                # User has some VMs
                ?>
                    <table class="table table-condensed table-striped">
                        <?php
                            foreach($uvms as $vm) {
                                ?>
                                    <tr>
                                        <td><a href="<?=$site;?>/manage?vid=<?=$vm['id'];?>"><?=$vm['name'];?></a></td>
                                        <td><?=$vmhandler->renderControls($vm['id']);?></td>
                                        <td id="status-<?=$vm['id'];?>">Test</td>
                                        <td><?=$vm['ipaddr'];?></td>
                                    </tr>
                                <?php
                                $vmid = $vm['id'];
                                echo "<script>updateStatus($vmid)</script>";
                            }
                        ?>
                    </table>

The last element in the table has its status colum updated to whatever the updateStatus function returns, however the rest of the elements remain as "Test."

Even something like this does not work:

function updateStatus(vmid) {
    action = 'vmstatuslabel';
    label = $('#status-'+vmid);
    $.post(site + '/application/controllers/ajax.php', {action:action, vmid:vmid}, function(data) {
        console.log(data);
        label.html("ABCD");
    });
}

Only the last element in the table is set to ABCD.

This, however, does work, and updates every value to ABCD:

function updateStatus(vmid) {
        label = $('#status-'+vmid);
            label.html("ABCD");
    }

Arun P Johny · Accepted Answer · 2014-02-11 02:30:23Z

1

Problem is with the variable declarations(action/label) in the method, declare them as local variables to the method, else it will be considered as global once and the modifications in made by subsequent calls will affect previous calls also

function updateStatus(vmid) {
    var action = 'vmstatuslabel';
    var label = $('#status-' + vmid);
    $.post(site + '/application/controllers/ajax.php', {
        action: action,
        vmid: vmid
    }, function (data) {
        console.log(data);
        label.html("ABCD");
    });
}

Assume that you call the method will vmid=1 then label will be $('#status-' + 1) and ajax request is sent, but before the ajax request is sent you call the method again with vmid=2 now label = $('#status-' + 2); and since the variable label is a global one(declared without var) the value of the variable is modified in the global scope. Now the first ajax request completes and in the callback method you are using label but it is referring to $('#status-' + 2) instead of $('#status-' + 1).

answered Feb 11, 2014 at 2:30

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

4 Comments

user3180103 Over a year ago

I love you, can you tell my why I have to do this? So I don't make the mistake again?

Arun P Johny Over a year ago

@user3180103 I'll try to add some more explanation

user3180103 Over a year ago

I see, so should I do the same with the action variable? Make it local to each method? Because sometimes the "action request" can take 10-15 seconds to complete, and the user may run another one while the first one is still going.

Arun P Johny Over a year ago

@user3180103 since the action variable looks to be a constant value it may not matter

Collectives™ on Stack Overflow

Javascript simple function works, but not when running in a loop

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related