Help with Waiting Popup

[Chris]

Hi,

I made a report using your awesome XlsIO tools.  I am trying to display the waiting popup while it is running.  The problem is that the javascript is asyncronous  and that the waiting popup is hidden very quickly after the report starts running.  Below is how I set it up.

Near the top of my view I have the following:

<div id="customWaiting"></div>
<ej-waiting-popup id="customWaiting" show-on-init="false" />

My view has a "text/x-jsrender" script that looks something like this:

<script id="trackerDialog" type="text/x-jsrender">

        @{
            var attributesTracker = new Dictionary<string, object>();
            attributesTracker.Add("Id", "TrackerForm");
        }
        @{Html.BeginForm("MasterTracker", "Telecom", FormMethod.Post, attributesTracker);
            {

                // has controls that are used for report options

                // at the end there is a button that calls some javascript

               <input class="buttonStyle" type="button" value="Run" onclick="runTracker()" ; />

            }

</script>

The view has a grid.  There is a button on the tool bar that opens the "trackerDialog".  It looks like this:

function OnToolbarClick(args) {

      if (args.itemName == "Tracker") {
                var temp = $.templates($("#trackerDialog").html());
                $(temp.render()).ejDialog({ title: "Master Tracker Filters", width: "450px" });
                $("#TrackerLocationId").ejDropDownList();
                $("#sTrackerSortBy").ejDropDownList({ selectedItemIndex: 3 });
                $("#sShowMasterAgreements").ejDropDownList({ selectedItemIndex: 0, change : "OnTrackerMasterChanged" });
                $("#TrackerColourId").ejDropDownList({ selectedItemIndex: 0 });
                $("#TrackerClientVersion").ejDropDownList({ selectedItemIndex: 0, change: "OnTrackerClientVersionChanged" });
       }

}

The runTracker javascript looks something like this:

function runTracker() {

  var objForm = document.getElementById("TrackerForm");

  if (objForm) {

    // does a little validating and if everything is good it calls submit() which causes the  method in the controller to run and produce the report

    var popupobj = $("#customWaiting").data("ejWaitingPopup");
     popupobj.show();

     objForm.submit();

     popupobj.hide();

  }

}

I know the Waiting Popup "show" is working because if I comment out popupobj.hide() it displays (and obviously doesn't disappear when the report is completed).

How can I call objForm.submit() and know when it is actually completed so I can call popupobj.hide()?

Thanks,

Chris

[Prince Oliver]

Hi Chris, 

Thank you for contacting Syncfusion support. 

We have checked the provided code. We suggest you to hide the WaitingPopup inside submit function, so that WaitingPopup will be hidden only after the form submission is completed. Kindly refer to the following code snippet. 

 

<div id="customWaiting"></div> 

<ej-waiting-popup id="customWaiting" show-on-init="false" /> 

 

    @{ 

        var attributesTracker = new Dictionary<string, object>(); 

        attributesTracker.Add("Id", "TrackerForm"); 

    } 

    @{Html.BeginForm("MasterTracker", "Dialog", FormMethod.Post, new { id = "TrackerForm" }); 

        { 

            // has controls that are used for report options 

            // at the end there is a button that calls some javascript 

            <input class="buttonStyle" type="button" value="Run" onclick="runTracker()" ; /> 

            } 

        } 

 

        <script> 

            function runTracker() { 

                var objForm = document.getElementById("TrackerForm"); 

                if (objForm) { 

                    // does a little validating and if everything is good it calls submit() which causes the  method in the controller to run and produce the report 

                    var popupobj = $("#customWaiting").data("ejWaitingPopup"); 

                    popupobj.show(); 

 

                    objForm.submit(function () { 

                        popupobj.hide(); 

 

                    });             

                } 

            } 

           

        </script> 

 

 

 

We have attached a sample for your reference, please find the sample at the following location: http://www.syncfusion.com/downloads/support/forum/140226/ze/WaitingPopup1657370203  

 

If this does not solve your requirement, please provide us details information on the issue along with code snippets or sample to replicate your scenario. It will help us provide solution. 

 

Regards, 

Prince 

[Chris]

Hi,

Thanks for your help so far.  I am finding that popupobj.hide() never gets called.  I think it is because the controller returns "File(stream, ContentType, fileName)".

I updated and attached the sample that you sent me so that it reproduces the problem I am facing.

Thanks,

Chris

Attachment: WaitingPopupUpdated_72e15a84.zip

[Keerthana Rajendran]

Hi Chris , 

Submit event will not be triggered while returning files directly. Also hiding waiting popup through success event after AJAX call will interrupt the downloading action. So we suggest you to use Ajax call to invoke controller method for download and save file to local path and then download from the corresponding path. Now you can hide waiting popup through Ajax success event. Please refer to the below forum for clear details. 

https://www.syncfusion.com/forums/130436/hide-loading-after-action-result  

Regards, 

Keerthana. 

[Chris]

Hi,

Thank you.  I got it working.  I attached the updated sample project in case someone else is looking at this in the future.  (The code to save the file to the server has to be a little different in ASP.Net Core then what you do in MVC)

Chris

Attachment: WaitingPopupFinal_e3c85335.zip

[Prince Oliver]

Hi Chris , 

Thank you for sharing your code. We are glad that your issue is resolved.  

Regards, 

Prince