Question

I have a function that loops through a multidimensional array that consists of the id of an area on my webpage and then a parameter that I have to pass to a webservice. The return from the $.ajax() call will be HTML that I wish to populate (repaint) within the first part of the array:

function getViews(){

    // loop through, need view/jsp name and where we want to put the HTML... need a multidimarray...
    var viewArr = [["infoCol","info"], 
                   ["noteCol", "notes"],
                   ["buttonsDiv", "buttons"],
                   ["historyPanel","history"], 
                   ["servicesPanel","services"],
                   ["noFOUC","dialogs"]
                  ];

    // do the loop
    for(var i = 0;i<viewArr.length;i++){

        var thisArea = viewArr[i][0];

        $.ajax({
            url:"getView",
            type:"POST",
            data:{view:viewArr[i][1]},
            dataType:"html",
            success:function(data){
              console.log(thisArea); // this is always noFOUC
              // console.log(viewArr[i][0]); // this gives an undefined error...
                $("#" + thisArea).html(data);
            },
            error:function(xhr, ajaxOptions, thrownError){
                console.log(xhr.status);
                console.log(xhr.statusText);
                console.log(thrownError);
            }
        }); 

    }
}

Now all is well however trying to reference the first part of the loop viewArr[i][0] within the success: callback isn’t working! If I place it within the success: it is undefined. If I give it a var outside the $.ajax() like in the example above it is always the last item of the array! I’m sure I need to add a closure here but I’m not sure where or why, can someone please explain?

If I haven’t worded or explained this well please let me know and I will explain better.

Answer 1

dI think I have this… I placed a self execution function inside the loop… forgot about asynchronous! The loop continues… doh!

function getViews(){

    // loop through, need view/jsp name and where we want to put the HTML... need a multidimarray...
    var viewArr = [["infoCol","info"], 
                   ["noteCol", "notes"],
                   ["buttonsDiv", "buttons"],
                   ["historyPanel","history"], 
                   ["servicesPanel","services"],
                   ["noFOUC","dialogs"]
                  ];

    // do the loop
    for(var i = 0;i<viewArr.length;i++){

        (function(){

        var thisArea = viewArr[i][0];
        $.ajax({
            url:"getView",
            type:"POST",
            data:{view:viewArr[i][1]},
            dataType:"html",
            success:function(data){
                $("#" + thisArea).html(data);
            },
            error:function(xhr, ajaxOptions, thrownError){
                console.log(xhr.status);
                console.log(xhr.statusText);
                console.log(thrownError);
            }
        }); 

        })(viewArr[i][0]);

    }
}