[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register 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
?
117 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 19

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

656 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