Solved

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

Posted on 2015-01-09
6
109 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:jatkin
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 250 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 250 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 4

Accepted Solution

by:
jatkin 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:jatkin
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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…

808 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