How to call multiple ajax calls on a view?

Question

I have a requirement like, i have to make multiple jquery ajax calls and bind the data to multiple divs in my view.The below is the code in my main view

@foreach (var item in Model)
{
   <p>Chart name : @item.ChartName</p>
    <div>
        @{Html.RenderAction("GetChartData", "ChartsDashboard", new { Data = item });}
    </div>
    <br/>
}

RenderAction will call another view whose code is like this :

<script>
var chrtdivid = "chrt"+ '@Model[0].ChartId.ToString()'
$("#charts").append("<div id='" + chrtdivid + "'>hello world</div>")
//adding dynamic divs to the page
$(function () {
    $.ajax({
        type: "GET",
        url: "/api/ChartsAPI/" + '@Model[0].ChartId.ToString()',
        dataType: "json",
        success: function (seriesData) {
            //bind this series data to the dynamically created div
        }});});
</script>

So in this requirement based on the foreach list value, there can be n no.of loops, so n no.of calls will be made to the jquery ajax. But finally only the last div is bound with the data, but not all.

Is there any way to get the data to the divs on every web api call?

Thank you for the answer, it did help me. – goshan2011 Jul 22 '15 at 05:32 — goshan2011, Jul 22 '15 at 05:32

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

The following might help: Sequencing ajax requests

Ajax requests can be queued, and then fired away in a sequence. Search: "ajax manager github" via Google and it will land you something very useful.

edited May 23 '17 at 12:21

Community

1
1

answered Jul 21 '15 at 12:27

John Smith

465
4
15
38

How to call multiple ajax calls on a view?

1 Answers1