Click here to Skip to main content
15,882,063 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello

I was hoping someone could help me as I have been stuck on this issue for a while. I have tried various ways of adding promises and waits but Im not having much luck.

Im trying to make a dynamic gird. If 5 elements passed to the view it would build one panel with 3 buttons and one panel with 2 buttons. If it was 2 elements passed it would be one panel with 2 buttons.

The javascript will split the list passed up into the appropriate sections and then pass this back to the controller to update a partial view.

It seems to be almost working apart from one issue. I was hoping that by comparing the number of reports to the processed reports it would be able to identify that all 3 (in the example) have been displayed and stop the foreach loop however the loop is continuing and repeating the loop 3 times. I believe this is where the promise and async would come into the solution.

The code below has started to get messy as I have tried every example I could find but I'm still having no luck.

What I have tried:

$(document).ready(function () {

       var numberOfReports = @Model.Select(x => x.ReportName).Count();
       var reports = JSON.parse('@Html.Raw(Json.Encode(Model.Select(x => x.ReportName)))');

       var divId = 1;
       var arrayId = 0;

       processedReports = 0;

       for (let i = 0; i < numberOfReports; i++) {


           if (numberOfReports === processedReports) return;

                  setTimeout(function () {

                      if (numberOfReports >= 3) {

                          const reportLinks = [reports[arrayId], reports[arrayId + 1], reports[arrayId + 2]]

                          var postData = { threeCells: reportLinks };

                          $.ajax({
                              type: "POST",
                              url: '@Url.Action("ThreeCells", "Home")',
                              data: postData,
                              dataType: "html",
                              success: function (result) {

                                  let threeDiv = document.createElement('div');

                                  threeDiv.setAttribute('id', divId);
                                  document.querySelector('#inner').appendChild(threeDiv);

                                  $('#' + divId).html(result);

                                  divId++;

                                  arrayId = arrayId + 3;
                                  processedReports = processedReports + 3;


                              }
                          })


                      }
                      else if (numberOfReports = 2) {

                          const reportLinks = [reports[arrayId], reports[arrayId + 1]]

                          var postData = { twoCells: reportLinks };

                          $.ajax({
                              type: "POST",
                              url: '@Url.Action("TwoCells", "Home")',
                              data: postData,
                              dataType: "html",
                              success: function (result) {

                                  let twoDiv = document.createElement('div');

                                  twoDiv.setAttribute('id', divId);
                                  document.querySelector('#inner').appendChild(twoDiv);

                                  $('#' + divId).html(result);

                                  divId++;
                                  arrayId = arrayId + 2;
                                  processedReports = processedReports + 2
                              }
                          })


                      }
                      else if (numberOfReports = 0) {
                          return;
                      }


                   }, 1000 * i);

               }




   })


ImageUpload.io — image — image.png[^]
Posted

In your
JavaScript
else if (numberOfReports = 0) {

should be
else if (numberOfReports == 0) {

in both of them
 
Share this answer
 
v2
I'm not entirely sure what you're doing, but rewriting this to an async function is fairly simple:
JavaScript
$(async function() {
    const numberOfReports = @Model.Count();
    const reports = @Html.Raw(Json.Encode(Model.Select(x => x.ReportName)));
    
    // See https://stackoverflow.com/a/39538518/124386
    const delay = (time, value) => new Promise(resolve => setTimeout(resolve, time, value));
    
    let divId = 1;
    let arrayId = 0;
    let processedReports = 0;
    
    for (let i = 0; i < numberOfReports; i++) {
        if (numberOfReports === processedReports) { break; }
        
        if (numberOfReports >= 3) {
            const reportLinks = reports.slice(arrayId, arrayId + 3);
            const postData = { threeCells: reportLinks };
            
            const result = await $.ajax({
                type: "POST",
                url: '@Url.Action("ThreeCells", "Home")',
                data: postData,
                dataType: "html"
            });
            
            const threeDiv = document.createElement('div');
            threeDiv.setAttribute('id', divId);
            document.querySelector('#inner').appendChild(threeDiv);
            $('#' + divId).html(result);
            divId++;
            
            arrayId = arrayId + 3;
            processedReports = processedReports + 3;
        }
        else if (numberOfReports === 2) {
            const reportLinks = reports.slice(arrayId, arrayId + 2;
            const postData = { twoCells: reportLinks };
            
            const result = await $.ajax({
                type: "POST",
                url: '@Url.Action("TwoCells", "Home")',
                data: postData,
                dataType: "html"
            });
            
            const twoDiv = document.createElement('div');
            twoDiv.setAttribute('id', divId);
            document.querySelector('#inner').appendChild(twoDiv);
            $('#' + divId).html(result);
            divId++;
            
            arrayId = arrayId + 2;
            processedReports = processedReports + 2;
        }
        else {
            break;
        }
        
        await delay(1000);
    }
});
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900