<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>

 

Pretty stock stuff except I’m using a DOM element to show the page block message.

 

However, for some reason my <img src=”spinbar.gif”/> tag was being overwritten when writing content inside of the ‘progressMessage’ <div> tag even though the <img> tag is a sibling element and not a child.

 

It turns out that using self closing tags, whilst being valid XHTML, causes jQuery to select all siblings of the self-closed tag. Because all the sibling tags of <div id=”progressMessage”/> were selected they were also being overwritten by the code at - $('#progressMessage').text('Please wait!');