Ajax call function after success

Question

I'm working on a site, where we get information from an XML-file. It work great, but now I need to make a slider of the content. To do this, I will use jCarousel that claims they can do it with Dynamicly loaded content, by calling a callback function.

I can't, however, make the initial ajax load, when I call a function on success. What am I doing wrong?

$(document).ready(function() {
    $.ajax({
        type: "GET",
        //Url to the XML-file
        url: "data_flash_0303.xml",
        dataType: "xml",
        success: hulabula()
    });

    function hulabula(xml) {
            $(xml).find('top').each(function() {
                var headline = $(this).find('headline1').text();
                var headlineTag = $(this).find('headline2').text();

                $(".wunMobile h2 strong").text(headline + " ");
                $(".wunMobile h2 span").text(headlineTag);
            });

            ..............

Am I doing anything wrong??? Or is it a totally diffenerent place I have to look? :-)

Answer 1

Use hulabula instead of hulabula() or pass the function directly to the ajax options:

1.

$.ajax({
    type: "GET",
    //Url to the XML-file
    url: "data_flash_0303.xml",
    dataType: "xml",
    success: hulabula
});

2.

$.ajax({
    type: "GET",
    //Url to the XML-file
    url: "data_flash_0303.xml",
    dataType: "xml",
    success: function(xml) { /* ... */ }
});

Answer 2

Use $.when

function hulabula(xml) {
            $(xml).find('top').each(function() {
                var headline = $(this).find('headline1').text();
                var headlineTag = $(this).find('headline2').text();

                $(".wunMobile h2 strong").text(headline + " ");
                $(".wunMobile h2 span").text(headlineTag);
            });
}


var ajaxCall  = $.ajax({
        type: "GET",
        //Url to the XML-file
        url: "data_flash_0303.xml",
        dataType: "xml"
    });

//Use deferred objects

$.when(ajaxCall)
 .then(function(xml) { hulabula(xml); });

Answer 3

You can do it like this:

   $.post( "user/get-ups-rates", { cart_id: cart_id, product_id: product_id, service_id:service_id })
    .done(function( data ) {
         el.parent().find('.upsResult').html('UPS Shipping Rate Is $'+data.rate);
    })
    .fail(function(data) {
          el.parent().find('.upsResult').html('<p style="color:red">UPS Service Error Occured. </p>');
     })
     .complete(function (data) {   
         setShippingOptions(cart_id,product_id,service_id,data.rate);
    });

Just call the function in 'complete' not in 'done' or 'success'