Question

I’m using jQuery with the BlockUI plugin to block a page after a link is clicked. I’m also using a DOM element to display a message when the page is blocked.

Here’s a simple example of the code used:

<a id="testme" href="#">Click Me</a>

<script type="text/javascript">
    $(document).ready(function() {
        $('#testme').click(function() {
            // Set our message in the message panel....
            $('#progressMessage').text('Please wait!');
            $.blockUI({
                message: $('#progressWidget')
            });
        });
    }
</script>

<div id="progressWidget" style="display:none" align="center">
    <div class="modalUpdateProgressMessage">
        <div id="progressMessage" />
        <img src="spinbar.gif" />
    </div>
</div>

The problem I’m encountering is that when I set the .text() of the <div id="progressMessage" /> element, the <img src="spinbar.gif" /> element seems to get removed. I’ve verified that this is actually happening using Firebug.

I’ve also tried using a <span> instead of a <div> for progressMessage but the result is the same.

Can anyone explain why this is happening?

Answer 1

Don’t do a self-closing DIV, it’s not valid.