CODEWITHSUNDEEP
jquery
Frenchi In LA
Frenchi In LA

Reputation: 3169

showing Wait image

I have the following HTML code

<li><div><..><input type="submit" ...></div></li>

i added a click event to the button to remove the Whole <li>. the process takes a while 1/2 second sometime. I wanted to include a message with a wait icon while processing removing I code the following code:

   var $li = $(btnRemove).closest('li').empty();

    // Add Please wait
    var $logo = $('<img>').attr('src', 'logo.gif');
    var $tblWait = $('<table />').append(
            $('<tr />').stop()
            .append($('<td/>').append($logo))
            .append($('<td/>').html(' Pleasee wait while removing table'))
            );
    $li.append($('<div/>').append($tblWait));

..... Process and do other tack and finally
$li.remove();

if i put a breakpoint I will see the logo & and message but without the breakpoint the LI will be removed after 1/2 second but the message neither the logo won't show. I tried to load the image on page ready event, but the logo is really small and doesn't take any time to load. Any help would be greatly appreciated.

Upvotes: 1

Views: 138

Answers (1)

Andy E
Andy E

Reputation: 344507

This is due to the nature of JavaScript and the DOM sharing the same thread. Once you make any changes to the DOM, the UI will not repaint until the thread completes. The process might look something like this:

(idle) -> Event fires -> JavaScript code executes -> Repaint GUI -> (idle)

In order for the message to be displayed, you need to delay the long process using a timer:

$li.append($('<div/>').append($tblWait));

window.setTimeout(function () { 
    //... Process and do other tack and finally
    $li.remove();
}, 0);

Upvotes: 1

Related Questions