jquery : constructed data is undefined

Question

I spent lot of time to figure this out but did not find anything,

    function constructAgenciesData() {       
        $.ajax({
           url: "getAgenciesAndGlobalJson.do",
               dataType: "json",
           success: function(data){
            $.each(data, function (index, row) { 
                  // console.log("data : "+ JSON.stringify(data));
                   $("#"+row.id).data("assignedAgencies", row.assignedAgencies).data("restOfAgencies", row.restOfAgencies).data("global", row.global).data("globalID", row.globalID);      
                  });    
                }        
         });  

   } 
   constructAgenciesData();
   $(function($){ 

      $(".globalswitch").each(function () {
         var idRow = $(this).parents('tr')[0].id;
         alert(idRow);
         console.log($('#'+idRow).data("global"));// <-- UNDEFINED
        $(this).switchButton({
            checked: row.data("global") 
        });
    });

     $(document).on('click','button.btn', function () {     
        var idRow = $(this).parents('tr')[0].id;  
        var title = $(this).parents('td:first').siblings(':eq(1)').text();
        title = "Rule Name :  " + title;
        $("#divPopUp").data('param_1', idRow);
        $("#divPopUp").data('opener', this).dialog("option", "title", title).dialog("open");
        console.log($('#'+idRow).data("global"));// <-- WORKING
        var old_array = $('#'+idRow).data("restOfAgencies"); 
        var new_array = $('#'+idRow).data("assignedAgencies"); 
        addCheckbox(diff(old_array,new_array));

    });


    });

I don't know why the same line :

console.log($('#'+idRow).data("global"));

is undefined in the .each function.

BUT it is working in the click function .

score 0 · Accepted Answer · answered Feb 18 '15 at 18:33

0

Your $.ajax call is asynchronous. This means that it is firing request while the rest of the Javascript is being run.

The success function within constructAgenciesData() might not have been completed prior to the IIFE $(function($){.

Therefore, there is no guarantee that the .data('global') will be set by the time you're trying to access it within the $(".globalswitch").each loop.

A solution to this issue would be to wrap the $(".globalswitch").each loop within a function globalSwitchLoop() and fire that on the success of the $.ajax call.

Also, take a look at jQuery's promises.

answered Feb 18 '15 at 18:33

Phil

10,948
17
69
101

But why we can read .data('global') in the second function click ? – user3101157 Feb 18 '15 at 18:36
Because the `success` function finished. That just applies a listener, but does not actually execute the click callback. I am pretty sure that if you were able to click the `button.btn` soon enough, you would get the same `undefined` error. – Phil Feb 18 '15 at 18:38
I just created this jsfiddle http://jsfiddle.net/mlotfi/Lok56Lxa/ , don't know why it's wrking in jsfiddle but not in my code . – user3101157 Feb 18 '15 at 18:48
did you apply my suggestion? – Phil Feb 18 '15 at 18:53
Phil, you are the best, I did the globalSwitchLoop(), it's working fine now. – user3101157 Feb 18 '15 at 19:05
Everything is working fine now in Chrome, but was surprised that when I try to read any .data() in internet explorer 11 for example : var old_array = $('#'+idRow).data("restOfAgencies"); it's always undefined. – user3101157 Feb 19 '15 at 16:04

jquery : constructed data is undefined

1 Answers1