• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 119
  • Last Modified:

How do I force a label to show and hide during a long javascript function

Hi all,
I have a jQuery web site that has a function that takes a few seconds to run.
During this time the page can become unresponsive.
I would like to indicate that it is doing something with a simple show/hide of a DIV
I have tried this:
$("#refreshing_label").show();
AppViewModel.page_model.mydata(newdata);
$("#refreshing_label").hide();

Open in new window

But it does not get to processing the show before the page becomes unresponsive.

Any thoughts on this would be appreciated.

Best regards,

James
0
James Atkin
Asked:
James Atkin
3 Solutions
 
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Hi,

You can include a timeout for some 1 or 2 seconds.. till the data is loaded.
or put the same in $(document).ready function.
0
 
Rainer JeschorCommented:
Hi,
question: is this run on page load? Or is it run after another event (button click ...)?
What does your DIV lookalike?
Normally your code should work.
Thanks,
Rainer
0
 
Tom BeckCommented:
This looks like a Knockout.js function call. If it is, surely Knockout.js has some built-in functionality for letting you know when a task is complete. Just a quick look at their documentation, I see this: this.isDone = ko.observable(data.isDone);

If I'm right, then show the "refreshing" label, call the Knockout task and wait for the "done" signal to turn off the label.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
James AtkinSenior Principle Software EngineerAuthor Commented:
Hi all,

okay, thanks for all the input..
Tom, you are correct, this is knockout.

The overall solution I have actually come up with is to carry out the action Asynchronously:

var theFunction = [];

function PeriodicallyCalledFunction()
{
        theFunction.cmd = 'GetSomething';
        theFunction.data = JSON.stringify({LoginName:AppViewModel.user_session.loginName,SessionID:AppViewModel.user_session.sessionID});
        theFunction.contentType = 'application/json; charset=utf-8';
        theFunction.type = 'POST';
        theFunction.onSuccess = function(o)
        {
            var arr1 = AppViewModel.page_model.mydata();
            var arr2 = o.ajaxdata.newdata;
            var s1 = JSON.stringify(arr1);
            var s2 = JSON.stringify(arr2);
            if (s1 != s2)
            {
                $("#refreshing_label").show();
                async(doUpdate, arr2, function () {
                    $("#refreshing_label").hide();
                });
            }
        };        
        AppViewModel.scheduler.add(theFunction);
    }

    function async(fn, param, callback) { 
        setTimeout(function() { 
            fn(param); 
            callback(); 
        }, 0); 
    }

    function doUpdate(obj) { 
        AppViewModel.page_model.mydata(obj); 
    }

Open in new window


This seems to work pretty well...

Any problems with this method?
0
 
Tom BeckCommented:
None that I can see.
0
 
James AtkinSenior Principle Software EngineerAuthor Commented:
Hi,
I have marked to solution as the answer and awarded the points between Tom & Rainer as these pointed me in the right direction. Hope this is okay.
James
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now