javascript response van meerdere ajax calls

[marnix1977]

Ik heb een webpagina die via een knop een stukje javascript afvuurt. Bij het starten wijzigt de tekst van de button en als het request klaar is wordt de tekst weer gewijzigd. Nu heb ik 5 lossen knoppen en als ik nu per knop het script afvuur dan werkt het gewoon. Tevens heb ik een div die ik als statusbox fungeert en dat werkt ook.

Ik heb ook een knop die die dat voor alle 5 tegelijk doet, Echter dan wordt de eerste wijziging van de knop wel doorgevoerd, echter het stukje dat als de request klaar is wordt dan niet uitgevoerd. De knop wordt dat niet meer gewijzigd. Echter krijg ik die tekst wel gewoon netjes in het status div.

JavaScript:

for (groupnr = 1; groupnr <= groupCount; groupnr++) {
      alert(groupnr)
      $("#gr"+groupnr).text('Bezig met aanmaken...');
 
      jQuery.ajax({
         url: "/groups/addgroup",
         method: 'post',       
         data: {
            groupnr : groupnr,
            newadminpass : $("#newadminpass").val()
         },
         success: function(result){
           switch(result.mtype) {
            case 'error':
              // code 
              $("#gr"+groupnr).html('<span class="text-danger">'+result.message+'</span><br/>');
              $("#statusbar").append('<span class="text-danger">'+result.message+'</span><br/>');
              
            break;
            case 'success':
              // code block
              
              $("#gr"+groupnr).html('<span class="text-success">'+result.message+'</span><br/>');
              $("#statusbar").append('<span class="text-success">'+result.message+'</span><br/>');
            break;
            default:
              $("#gr"+groupnr).html('<span class="text-success">'+result.message+'</span><br/>');
              $("#statusbar").append('<span class="text-success">'+result.message+'</span><br/>');
              // code block
          }
         },
         fail: function(xhr, status, error) {
              var errorMessage = xhr.status + ': ' + xhr.statusText
              toastr.error(errorMessage);
              $( "#gr"+groupnr).html('<span class="text-danger">1. '+error+"</span><br/>");
         },
         error: function(xhr, status, error) {
          var errorMessage = xhr.status + ' ' + xhr.statusText
          toastr.error(errorMessage);
          $( "#gr"+groupnr).html('<span class="text-danger">Request '+errorMessage+"</span><br/>");
     },
  });        

      }

[Juup]

Kijk eens wat groupnr doet tussen de tijd dat alle 5 request zijn afgevuurd en de ajax responses nog niet binnen zijn (hint: die is 4)

[Castor385]

Het probleem hier is dat tijdens het uitvoeren van de loop je groupnr ophoogt, maar omdat al je requests async zijn is bij alle responses groupnr gelijk aan de laatste van de loop

Probeer eens zoiets:

code:

for (var i .....) {
  (function (i) {
    asynchronousFunction(function() {
      use(i);
    });
  })(i);
}

[ Voor 30% gewijzigd door Castor385 op 29-01-2021 21:47 ]

[DJMaze]

Wat gebeurt er als je gewoon window.fetch() gebruikt ipv de oude jQuery.ajax?

[marnix1977]

Bedankt voor alle info. Had verwacht dat de i value voor het request behouden bleef, maar dat is dus helaas niet zo.

fetch kan volgens mij niet. Als ik het goed lees neemt die de cookies niet mee en dan kom ik niet door de authenticatie heen.

Maar nu ik weet dat die i value al hoger is dan wanneer de request klaar is, heb ik het anders opgelost. Heb het nu opgelost door in de json return het groupnr mee te nemen, dan kan ik die daar uithalen en dat werkt het wel.

Bedankt voor de info.

[Mr. HTTP]

marnix1977 schreef op zaterdag 30 januari 2021 @ 10:18:
fetch kan volgens mij niet. Als ik het goed lees neemt die de cookies niet mee en dan kom ik niet door de authenticatie heen.

Spec

Update:
Fetch: Differences from jQuery

code:

fetch(url, {
  credentials: "same-origin"
}).then(...).catch(...);

Tutorial

Promise.all() and Promise.race()
Promise.all([promises]) method takes an array of promises and returns a new promise. This promise will be fulfilled when and if all promises are fulfilled. Promise.race([promises]) also takes an array of promises and returns a new promise which fulfils if any of the promises fulfils.

[ Voor 67% gewijzigd door Mr. HTTP op 30-01-2021 12:17 ]