Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2015-01-09
6
Medium Priority
?
118 Views
Last Modified: 2015-01-16
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
Comment
Question by:James Atkin
6 Comments
 
LVL 20

Expert Comment

by:Rikin Shah
ID: 40539988
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
 
LVL 44

Assisted Solution

by:Rainer Jeschor
Rainer Jeschor earned 1000 total points
ID: 40540009
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
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 1000 total points
ID: 40540046
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 4

Accepted Solution

by:
James Atkin earned 0 total points
ID: 40540275
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40540599
None that I can see.
0
 
LVL 4

Author Closing Comment

by:James Atkin
ID: 40553077
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

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month20 days, 20 hours left to enroll

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question