multiple ajax calls jquery mvc

Question

I am developing a print page in which we have to show all the reports graphs.

The number of graphs for every customer are different. So, I am writing jquery script for each available graph as follows:

buildJQs: function () {

        $(".emailgraphs").each(function () {
            YAHOO.Report.Print("Email", $(this).attr("responsefield"), $(this).attr("id"), $(this).attr("metricid"))
        });
    },

Print: function (name, graphid, divid, metricid) {

        try {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: m_oReport.ds,
                async: false,
                timeout: 300,
                data: JSON.stringify(m_oReport.printp(name, graphid, metricid)),
                beforeSend: function () {
                    //Displays loading image before request send, till we get response.
                    //$("#" + divId).addClass("loading");
                },
                cache: false,
                success: function (data) {
                    // if they define a success function (s), call it and return data to it.
                    if (typeof m_oReport.prints === "function") {
                        //$("#" + divId).removeClass("loading");

                        m_oReport.prints(data, divid, name, metricid)
                    }
                },
                error: function (err) {
                    $("#" + divid).html(err);
                }
            });
        }
        catch (err) { alert("catch"); }
    }

The problem, data is returned without any issues from controller but while I am assigning it to jqplot the data is becoming empty. I think this is due to that asynchronous ajax calls. I tried with async: false and timeout but still facing the issue.

Is there any way to handle this??

Thanks in advance...

check this if it helps http://stackoverflow.com/questions/10877438/jqplot-chart-using-asp-net-mvc-json — ali, Sep 05 '13 at 13:36

andres descalzo · Answer 1 · 2013-09-10T12:02:34.460

1

try this with jquery deferred:

buildJQs: function () {

    var deferreds = [], deferred;
    $(".emailgraphs").each(function () {

        deferred = YAHOO.Report.Print("Email", $(this).attr("responsefield"), $(this).attr("id"), $(this).attr("metricid")); 
        deferreds.push(deferred);
     });

     $.when.apply(null, deferreds).done(function() {
         alert('all done');
     });
},

Print: function (name, graphid, divid, metricid) {

        try {
           return $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: m_oReport.ds,
                //async: false, <- remove, this is a problem
                timeout: 300,
                data: JSON.stringify(m_oReport.printp(name, graphid, metricid)),
                beforeSend: function () {
                    //Displays loading image before request send, till we get response.
                    //$("#" + divId).addClass("loading");
                },
                cache: false,
                success: function (data) {
                    // if they define a success function (s), call it and return data to it.
                    if (typeof m_oReport.prints === "function") {
                        //$("#" + divId).removeClass("loading");

                        m_oReport.prints(data, divid, name, metricid)
                    }
                },
                error: function (err) {
                    $("#" + divid).html(err);
                }
            });

        }
        catch (err) { alert("catch"); }
        return null; 
    }

edited Sep 10 '13 at 12:02

answered Sep 05 '13 at 13:58

andres descalzo

14,887
13
64
115

Thank u for the response.however always getting undefined into deferreds from the line -- deferred = YAHOO.Report.Print("Email", $(this).attr("responsefield"), $(this).attr("id"), $(this).attr("metricid")); deferreds.push(deferred); – mmssaann Sep 06 '13 at 04:31
What version of jQuery are you using? and Why do you use `try` ... `catch`? – andres descalzo Sep 06 '13 at 12:35
`YAHOO.Report.Print` is `Print: function (name, graphid, divid, metricid)`? – andres descalzo Sep 06 '13 at 12:37
This is resolved, please look at other post, http://stackoverflow.com/questions/18650453/synchronous-ajax-calls-from-jquery-to-mvc, not sure why async=false didnt work initially, but now its working. – mmssaann Sep 10 '13 at 04:36
ok, I did not see that option was set, that's a problem because you'll have to wait to finish each call to proceed to the next. it is best to be asynchronous and work with events or defferred, try change to try or remove this and try my example. – andres descalzo Sep 10 '13 at 12:01
I couldnt make ur example as working example. I always get undefined into deferred = YAHOO.Report.Print("Email", $(this).attr("responsefield"), $(this).attr("id"), $(this).attr("metricid")); – mmssaann Sep 10 '13 at 12:29

multiple ajax calls jquery mvc

1 Answers1