jQuery cant use variable in main scope

Question

i have user_permissions variable and i defined that for global use , after setting this on post method i dont have problem for print that, but after using this variable in many line below i get null result ???

jQuery(minimal code):

var user_permissions = null;
    $(document).ready(function(e) {
                $.post('model/controller.php' ,{ username:iId_username , postaction:'getUserPermission' }, 
                        function(data){
                            user_permissions=0;
                            user_permissions = data.user_permissions;
                            console.log(user_permissions); // RESULT is : {"user_permissions":"8"}
                },'json');
                $.each(listPermissions, function(i, item) {
                        if ( user_permissions == listPermissions[i].id ) selected = "selected='selected'"; else selected = '';
                        console.log(user_permissions); // RESULT is : null
                        selectElement += "<option value='" + listPermissions[i].id + "' "+ selected + ">" + listPermissions[i].permission_title + "</option>";
                });

});

whats my code problem?

You have not understood how _asynchronous_ script execution in JavaScript works. — CBroe, May 27 '13 at 15:13

score 2 · Answer 1 · answered May 27 '13 at 15:13

That is because .post() is asynchronous and your .each() is executed before your post is even completed,

You need to move .each() in post callback

$.post('model/controller.php', {
    username: iId_username,
    postaction: 'getUserPermission'
},

function (data) {
    user_permissions = 0;
    user_permissions = data.user_permissions;
    console.log(user_permissions); // RESULT is : {"user_permissions":"8"}
    $.each(listPermissions, function (i, item) {
        if (user_permissions == listPermissions[i].id) selected = "selected='selected'";
        else selected = '';
        console.log(user_permissions); // RESULT is : null
        selectElement += "<option value='" + listPermissions[i].id + "' " + selected + ">" + listPermissions[i].permission_title + "</option>";
    });
}, 'json');

score 1 · Answer 2 · answered May 27 '13 at 15:16

The code in the $.each part is executing before the $.post call has completed.

Javascript is asynchronous, so it continues executing code without waiting for the previous thing to complete.

You could try something like $.when to make sure that something has been completed before moving on, or put it in the callback function for whatever you are waiting for.

score 0 · Answer 3 · answered May 27 '13 at 15:27

after change to below code, my select element could not fill but i can print in console.

selectElement = "<select style='width:100%;'>";
$.post('model/controller.php', {
    username: iId_username,
    postaction: 'getUserPermission'
},
function (data) {
    user_permissions = 0;
    user_permissions = data.user_permissions;
    //    selectElement = "<select style='width:100%;'>";
    $.each(listPermissions, function (i, item) {
        if (user_permissions == listPermissions[i].id) selected = "selected='selected'"; else selected = '';
        selectElement += "<option value='" + listPermissions[i].id + "' " + selected + ">" + listPermissions[i].permission_title + "</option>";
    });
    //    selectElement += "</select>";
    //    $('td :eq(5)',this).html(selectElement);
}, 'json');
selectElement += "</select>";
$('td :eq(5)',this).html(selectElement);

jQuery cant use variable in main scope

3 Answers3