Thursday, April 5, 2012

jQuery / Ajax - $.ajax() Passing Parameters to Callback - Good Pattern to Use?


JavaScript code I'm starting with:




function doSomething(url) {
$.ajax({ type: "GET",
url: url,
dataType: "xml",
success: rssToTarget
});
}



Pattern I would like to use:




//where elem is the target that should receive new items via DOM (appendChild)
function doSomething(url, elem) {
$.ajax({ type: "GET",
url: url,
dataType: "xml",
success: rssToTarget(elem)
});
}



I don't think I can get the callback to work this way, right? What is the proper pattern? I don't want to use global variables necessarily to temporarily hold the elem or elem name.


Source: Tips4all

2 comments:

  1. Like this...

    function doSomething(url, elem) {
    $.ajax({
    type: "GET",
    url: url,
    dataType: "xml",
    success: function(xml) {
    rssToTarget(xml, elem);
    }
    });
    }


    Answer to your comment: Does use of anonymous functions affect performance?

    ReplyDelete
  2. The pattern you'd like to use could work if you create a closure inside your rssToTarget function:

    function rssToTarget(element) {
    return function (xmlData) {
    // work with element and the data returned from the server
    }
    }

    function doSomething(url, elem) {
    $.ajax({ type: "GET",
    url: url,
    dataType: "xml",
    success: rssToTarget(elem)
    });
    }


    When rssToTarget(elem) is executed, the element parameter is stored in the closure, and the callback function is returned, waiting to be executed.

    ReplyDelete