The 5th annual nopCommerce conference will take place in India on the 10th-11th of October. Please find more about this event here

How to display a progress view in plugin

Posted: October 11, 2017 at 1:35 PM Quote #194539
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
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: October 11, 2017 at 3:51 PM Quote #194546
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!
This post/answer is useful
1
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
- Adam K
www.aperturelabs.biz
Posted: October 13, 2017 at 2:06 PM Quote #194640
Adam,

Thanks for your help with this.

AdamK wrote:
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.


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
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: October 17, 2017 at 3:27 PM Quote #194807
Carneno wrote:
Adam,

Thanks for your help with this.

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.


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


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
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
- Adam K
www.aperturelabs.biz
Posted: October 17, 2017 at 4:29 PM Quote #194810
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
This post/answer is useful
1
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: October 18, 2017 at 12:36 PM Quote #194864
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!
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
- Adam K
www.aperturelabs.biz
Posted: October 23, 2017 at 1:46 PM Quote #195058
Adam,

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

Thanks for your help and guidance.

Tony
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Premium support services
  • Dedicated premium support services provided by core developers are intended for persons who run mission critical websites, work on projects with tight deadlines, or want to get dedicated support.
Professional services
  • Want to open a new store? Want to take your store to the next level? Need a custom extension? We can customize nopCommerce to fit your store perfectly. Request a quote to get started.
eCommerce CONFERENCE 2019
Learn more