jQuery Loading message pageLoad BlockUI

Question

Using Block UI --> Block UI

I'm trying to make the "Loading" message appear before the page starts to load and while the page is loading.

See this jsFiddle --> http://jsfiddle.net/wx9F3/22/

Narrow the search down to a couple of part numbers using the textboxes at the top and then click "reset". The page will start to load and THEN the "Loading" message appears. I need this to happen before the page starts to load and while the page is loading.

$('#clearBtn').on('click', function() {
    $.blockUI({message: '<h3>Loading</h3>',timeout: 2000}); 
    $('.modx').val('').trigger('keyup');
});

Does anyone know how to fix this?

Answer 1

It is because your function on triggered with keyup event it making the browser gag, I do not have the time to check the whole function, but you should look into it.

As a quick fix, do not set timeout for blockui, and add a delay in calling keyup, like this:

  $.blockUI({message: '<h3>Loading</h3>'}); 
  setTimeout(function(){$('.modx').val('').trigger('keyup');},500); 

Than at the end of keyup function just add a call to release the blocked ui, like this:

 $.unblockUI(); 

See the full fiddle here, but please I will like to STRETCH out this is just a patch, to get it working you should really sort out your function which causes the halt.

Emil