[jQuery] Re: Block UI modal window message incremental update

[tatlar]

Hi Mike,

Thanks for the help, and for writing a great plugin (blockUI).

Unfortunately this didn't work.

I am using a modulus operator so the content does not update on every
row, but even so, I just get the browser loading icon while the AJAX
content is added. I get one change to the message window when 380 rows
have been added, and this is right before the table has finished
loading all its content.

The code I have is as follows:

function showLoading(){
    $("#status").show("fast");
    $.blockUI({ message:'<img src="/images/ajax-loader.gif"
alt="Loading..." /><h3>App is loading <span id="loaderCounter"></
span>.<br/>Please be patient...</h3>'});
}
function hideLoading(){
    $("#status").hide(1000);
    $.unblockUI();
}

These are called as the table loads and when it finishes loading:

var incr = 0;

showLoading();

$.ajax({
    type: "GET",
    url: "/path/to/jsonfile.js",
    datatype: "json",
    success:
        // lots of code to parse and display
        $.each(json.object, function(key,array){
            // lots of code to parse and display
            incr++;
            if( incr % 10 === 0 ) {
                $('#loaderCounter').text(' (loaded '+incr+' rows)');
            }
        });
        hideLoading();
});

Any ideas? I can give you a URL if that helps, although the relevant
(simplified) code is pasted above.

Thanks in advance
- Rob

On Mar 5, 6:39 pm, Mike Alsup <mal...@gmail.com> wrote:
> > What I really want is for the user to see how many rows have been
> > added out of the total number of rows in the BlockUI message. This
> > would look like:
>
> > Application has loaded 1 of 400 rows
> > Application has loaded 2 of 400 rows
> > .......
> > Application has loaded n of 400 rows
>
> > It might even be better as increments of ten so it is not constantly
> > updating.
>
> > Application has loaded 10 of 400 rows
> > Application has loaded 20 of 400 rows
> > .......
> > Application has loaded n of 400 rows
>
> > Right now I have a variable with the total number of rows and also a
> > variable that get incremented with the row number, but I can't see how
> > to bind the BlockUI message with these variables. The BlockUI API
> > documentation says that the message can be a jQuery object, but I
> > cannot see how to make the bind().
>
> > Any ideas? Thanks in advance.
>
> Sure.  Just do something like this:
>
> $.blockUI({
>     message: $('<div id="counter"></div>')
>
> });
>
> Then in your loop that increments the rows, do this:
>
> $('#counter').html('App has loaded '+rows+ ' rows');