javascript - how to execute sets of ajax calls parallel in jquery -


i want make parallel ajax calls in click event, each ajax call distinct operation , returns data needed display tasks status or response message. working 1 after another, need execute parallel.

please give me idea that?

here example: js fiddle

i have loaded large csv data json object split multiple smaller json objects. let 1000 records divided 10 sets, each set contains 10 records. want process 10 sets parallel , execute ajax calls on each record parallel.

        var examplejsondata='[{"firstname":"cairistiona","lastname":"piaggia"},{"firstname":"wilson","lastname":"dega"},{"firstname":"rawsil","lastname":"agg"},{"firstname":"stiona","lastname":"piggia"}]';          $(".btntasks").click(function () {              var totalrecordscount = 1000;              var tasks = 10;              var temp = 1;              var oldtime = new date();              (var = 1; < tasks; i++) {                  var taskcontainerid = "task-container-" + i;                  var htmlcontent = $("#sessionstatus").html();                  htmlcontent = htmlcontent.replace(/{index}/g, i);                  $(".taskresp").append('<div id="' + taskcontainerid + '" class="col col-sm-4">' + htmlcontent + '</div>');                  var recstart = (i == 1 ? 0 : (temp + 1)), recend = (tasks * i);                  temp = recend;                  $("#totalrecords-" + i).text(recend)                    processtask(i, taskcontainerid, recstart, recend);                                }                function processtask(index, taskcontainerid, recstart, recend) {                  var takenjson = examplejsondata;                  //json.parse($("#csvdata").val()).slice(recstart, recend);                  $("#totalrecords-" + index).text(takenjson.length);                    var objjson = $.extend(json.parse(json.stringify(userloginfields)), json.parse(json.stringify(recipientorlenderfields)), json.parse(json.stringify(payerorborrowerfields)), json.parse(json.stringify(mortgageloaninfofields)));                  $.each(objjson, function (key, value) { objjson[key] = ""; });                    $.each($(".ddl-mapcolumns option:selected"), function () {                      var mapindex = $(this).attr("data-csv-header-index");                      if ($(this).val() == -1) { mapindex = -1; }                      objjson[$(this).val()] = mapindex;                  });                    mapfieldsindex=json.stringify(objjson);                    function sendmessage(position) {                      var data = { "csvdata": "[" + json.stringify(takenjson[position]) + "]", "mapfieldsindex": mapfieldsindex, "scan": position };                      $.ajax({                          url: '/import/index/',                          data: data,                          method: 'post',                          async: true,                          success: function (result) {                              if (result.position <= takenjson.length) {                                  var oldpercentage = math.ceil((position / takenjson.length) * 100);                                  var newpercentage = math.ceil((result.position / takenjson.length) * 100);                                  var elapsedtime = getelapsedtime(oldtime);                                  $("#circle-div-" + index).attr("class", "c100 p" + newpercentage + " big");                                  var percentagetext = ((result.position == takenjson.length) ? "<i class='fa fa-check fa-1x text-success'></i>" : newpercentage + "%");                                  $("#circle-percentage-" + index).html(percentagetext);                                  $("#elapsedtime-" + index).html(elapsedtime);                                  var trtextcolor = result.recstatus.indexof("successfully") > 0 ? "color:green;" : "color:red;";                                  $("#msgid-" + index).prepend("<tr style='" + trtextcolor + "'><td>" + (result.position + 1) + "> </td><td>" + result.recstatus + "<br/>" + result.error + "</td></tr>");                                  $("#currentimport-" + index).text(result.position);                                  sendmessage(result.position);                              }                              else {                                  $("#msgid-" + index).prepend("<tr style='color:red'><td>" + (result.position + 1) + "> </td><td>" + result.error + "</td></tr>");                              }                          }                        });                  }                  //$("#" + taskcontainerid).html(json.stringify(takenjson));                  sendmessage(recstart)              }            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>          <button type="button" class="btntasks">run tasks</button>    <div class="taskresp"></div>  <div id="sessionstatus" style="display:none;">          <div class="=col col-sm-6 col-md-6 col-lg-6">              <div class="page">                  <div class="clearfix">                      <div class="c100 p0 big" id="circle-div-{index}">                          <span id="circle-percentage-{index}">0%</span>                          <div class="slice">                              <div class="bar"></div>                              <div class="fill"></div>                          </div>                      </div>                  </div>              </div>              <div class="col col-sm-12 count-section">                  <label>total records: <span id="totalrecords-{index}">--</span></label>                  <label>importing: <span id="currentimport-{index}">--</span><span id="elapsedtime">0 s</span></label>              </div>          </div>          <div class="=col col-sm-6 col-md-6 col-lg-6 import-list-status" style="font-size:10px;">              <table class="table table-bordered table-hover">                  <thead>                      <tr>                          <th>row</th>                          <th>status/ description</th>                      </tr>                  </thead>                  <tbody id="msgid-{index}"></tbody>              </table>          </div>      </div>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more