Jquery process status box

Running into trouble making my page show a processing status on longer winded processes.  The processes dominate and the status cell never has a chance to display.

How can I make the status fade in  work before the show begins?


      $('#WfEmpId').blur(function()
      {
            $('#status').fadeIn();            
            //Populates Name, Pay Assgn List and Period List  GOTO:  TOWBFORM/js/fetch-handlers.js:10     fetch and display Name, Active Pay Assgs, and Active Pay Periods  
            $().fetch_hr_pemaster({      
            'empid' : $("#WfEmpId").val()
            
            });
            
            loadPreviousPer();   //GOTO: loadpreviousperiod.js
            loadCurrentPer();    //GOTO: loadcurrentperiod.js
            $('#status').fadeOut();
      });
KeithMcElroyAsked:
Who is Participating?
 
Steve KrileCommented:
$.fadeIn() has two optional parameters:  speed, and callback.  So you could do something like this - where your populate function is triggered *after* the fadeIn event:

    $("#status").fadeIn("fast", function(){  
            //Populates Name, Pay Assgn List and Period List  GOTO:  TOWBFORM/js/fetch-handlers.js:10     fetch and display Name, Active Pay Assgs, and Active Pay Periods   
            $().fetch_hr_pemaster({       
            'empid' : $("#WfEmpId").val()
    });

Open in new window

0
 
KeithMcElroyAuthor Commented:
this works really well.  I am fading out at the last line within the fadeIn and that seems to work.
However, new at this, is that the best place to put the fadeOut?
Will award points, just wanted to ask this follow up ?
Thanks a mil!
0
 
Steve KrileCommented:
Well, it depends - does loadCurrentPer(); or loadPreviousPer();  take a while?  If so, you may consider sticking the fadeOut() at the end of those processes.  Javascript has a preference to plow through every line of code and doesn't necessarily wait for the last line to execute before doing the next - especially if your load functions are doing ajax work.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.