Jquery JSON and XML Simultaneous Load / Function Performance Improvement

Question

I have some jquery that is loading some information from an xml file to use as a Dictionary and then some json as well. I currently have the code working however It must currently wait for the xml load to be successful before loading the json. What I would like to do is load both the xml and json, store the data in variables and then when both have loaded fire off another function. Is this possible?

Here is my current code...

$(document).ready(function () {
    var dict = {};
    $.ajax({
        type: "GET",
        url: "/_layouts/SiteLocations.xml",
        dataType: "xml",
        success: function (xml) {
            $(xml).find('type').each(function () {
                var key = $(this).find('key').text().replace(/ /g, '_');
                var definition = $(this).find('definition').text();
                //assign key and definition to dictionary
                dict[key] = definition;
            });
            getsites(dict);
        }
    });
});

function getsites( dict) {
        $.getJSON('/_layouts/SiteLocations.ashx', function (json) {
            //handle data
            $.each(json, function (i, item) {             
                //create web friendly id
                var sitetype = item.Type.replace(/ /g, '_');
                //check if list exists, if not create
                if ($('ul[name=' + sitetype).length) {
                    //add list item
                    $('ul[name=' + sitetype).append('<li><a href="' + item.URL + '">' + item.Title + '</a></li>');
                }
                else {
                    //create list and add item   
                    $('#ListContainer').append('<div id="' + sitetype + '"></div>');
                    $('#' + sitetype).append(dict[sitetype] + '<br />');
                    $('#'+sitetype).append('<ul name="' + sitetype + '" />');
                    $('ul[name=' + sitetype).append('<li><a href="' + item.URL + '">' + item.Title + '</a></li>');
                }
            });

        });

}

What's the point of var dict = {} in your first function? it's never used outside of the success callback ( and if it is, it's probably logically wrong ) — user400654
– user400654, Commented Jan 31, 2013 at 15:10
The dict is passed into the get sites function, where it is used as a "lookup" to get the appropraite text — BlueBird
– BlueBird, Commented Jan 31, 2013 at 15:19
Right, but that's still inside the success callback. there's no reason not to move the var to where it is being used (inside the success callback). This would prevent you from using it outside of the success callback where it would more than likely not be populated yet. — user400654
– user400654, Commented Jan 31, 2013 at 15:21

moonwave99 · Accepted Answer · 2013-01-31 15:22:52Z

2

Yes you can, with jQuery deferred objects:

$.when( getJSONstuff, getXMLstuff ).then( function(jsonResp, xmlResp){

    // do stuff here

})

where getJSONstuff and getXMLstuffare your functions.

The [anonymous] callback will be fired when both responses are returned from server.

EDIT: order fixed.

edited Jan 31, 2013 at 15:22

answered Jan 31, 2013 at 15:04

moonwave99

22.9k3 gold badges48 silver badges71 bronze badges

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

1 Comment

gen_Eric Over a year ago

I think you have your parameters in the callback reversed.

Collectives™ on Stack Overflow

Jquery JSON and XML Simultaneous Load / Function Performance Improvement

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related