How to display a progress view in plugin

Hello,

I'm using nopCommerce 3.90 with source.

I developed a plugin that takes time to execute.

Is there a way to display a progress screen while my program is importing into nopCommerce?

I could not find anything like that in these forums and can't think of any function in nopCommerce that shows a progress screen.  I did find this which is related to Asp.net, MVC.

Any help would be gratefully appreciated.

Thanks,
Tony

SignalR is certainly the tool you'd want to use for this, but it's fairly technical.  It may be simpler in your case to create interval-based ajax requests and update progress based on the responses.

something similiar to:

<script>

var myInterval = null;
function beginReportingProgress(){
     myInterval = setInterval(updateProgressBar, 3000); //check every 3 seconds

}

function updateProgressBar(){

     $.ajax({
        url: '/myreporting/myprogressreporting',
        dataType: 'json'
     }).done(function(response){
        $("#myProgressBar").val(response.completionPercent);

        if(response.completionPercent == 100){
             clearInterval(myInterval);
        }
     });
}

</script>

Mind you, this is a vast oversimplification, but hopefully something that can get you started!

Adam,

Thanks for your help with this.

AdamK wrote:

I am looking more for a display of each record being processed view, but I think if I can get your example to work, I will be able to change it for my needs.

Hopefully I did this correctly.  I put in an onclick="beginReportingProgress()" on the button that starts my import program and I added a new div that has an id="myProgressBar".

Does the 'url: '../../ExportImport/LakesideImportManager/MyProgressReporting'' in the $.ajax call have to point to a controller method?  

Does the url method have to be an ActionResult?

Is the url relative to the folder that contains the view where the $.ajax call is located?

When I use the F12 debugger and stop it after it executes the $.ajax call, it shows the ajax url as "'url' is undefined".

Any help that you can provide to help me figure this out would be gratefully appreciated.

Thanks,
Tony

Carneno wrote:

You'd want the "url" in the .ajax method to point to a controller action.  It should appear similar to:

        [HttpPost]
        public ActionResult MyProgressReporting()
        {
            
            var updatedCompletionPercent = MyFunctionThatProvidesCompletionPercent();
            return Json(new{
                completionPercent = updatedCompletionPercent 
            });
        }

This link contains information about the jQuery .ajax function
http://api.jquery.com/jquery.ajax/


This link contains information about MVC routes (your RouteProvider) - the default route is /{controllername}/{actionname}
https://msdn.microsoft.com/en-us/library/cc668201.aspx

Adam,

Thanks for your help with this and for the informative links that you provided.  I have been referring to the jquery link often.

I did get this to work, but I don't think I will be able to use it.  I have one major issue and two other problems.

1. If the Ajax method has to call a controller ActionResult, then this is not good for me, because the class that contains the coding that runs when I click the Import button, is not in my controller.  The controller calls a method in another class.  So, the method that is called does all the processing and I want a screen to report the progress of that processing.

I did create a test using the controller and it did execute the controller code and passed it back to the Ajax method.

2. I did this to just pass a text field back to the Ajax method to see if it would work.  The Ajax method did get the data, but the returned Json field does not appear on the screen.  I took it through the debugger and could see that the text that I passed back from the controller is there, it just does not appear on the screen.

3. When I run my plugin and click the Import button, it stops and I have to click the import button again.  I think it has something to do with the interval timer, because it doesn't start the timer until the import button is clicked, but I have no idea of what to do about it.

Thanks to you and everyone else in these forums that provide help to the less than knowledgeable.

Tony

Based on this setup, the "interval" code would run separately from your import, beginning somewhere immediately after you've verified your long-running process has initiated.

Details about how to access the information regarding your long-running process are specific to your implementation.  If the process can only run once at a time, you could use some static variable.  Otherwise you'd want to track by assigning and maintaining some identifier for the currently running process.

Best of luck!

Adam,

I finally got this to work with SignalR and it works exactly as I planned.

Thanks for your help and guidance.

Tony