CODEWITHSUNDEEP
jquery
sdot257
sdot257

Reputation: 10366

How to reset div once content is loaded using jQuery?

This works fine except I want the loading-indicator div to show up when I select a new value from the dropdown. The first time it runs, the loading indicator appears then disappears once the remote content is loaded. I go change the dropdown menu to a different value, but the loading indicator doesn't re-appear. The "new" content eventually shows up once it finishes loading.

<select name="branch_name" id="branch_name">
    <option value="Branch1">Branch1</option>
    <option value="Branch2">Branch2</option>
    <option value="Branch3">Branch3</option>
</select>

<div id="mycontent">
    <div id="loading-indicator" style="display:none">
    Scanning subversion<img src="/images/ajax-loader.gif" /></div>
</div>

<script type="text/javascript">
    $(function(){
        $('#branch_name').bind("change", function() {
            $('#loading-indicator').show();
            $('#mycontent').load('/tags/runme',{branch_name: $(this).val()});
        });
    });
</script>

Upvotes: 1

Views: 510

Answers (4)

Surfine
Surfine

Reputation: 392

You can use .not() to exclude your loading indicator.

$("#mycontent > div").not('#loading-indicator').hide();

DEMO

Upvotes: 0

Matt Ball
Matt Ball

Reputation: 359836

.load() replaces the element's HTML, so move the loading indicator outside of #mycontent, and hide it manually.

<div id="loading-indicator" style="display:none">
    Scanning subversion<img src="/images/ajax-loader.gif" />
</div>
<div id="mycontent"></div>

<script type="text/javascript">
    $(function(){
        var $spinner = $('#loading-indicator');
        $('#branch_name').bind("change", function() {
            $spinner.show();
            $('#mycontent').load('/tags/runme',{branch_name: $(this).val()}, function () {
                $spinner.hide();
            });
        });
    });
</script>

Upvotes: 2

George Cummins
George Cummins

Reputation: 28906

The loading indicator is inside the div that you are loading with content. Your loaded content replaces everything in that div, including the indicator.

To fix, move the indicator outside the div:

<div id="loading-indicator" style="display:none">
<div id="mycontent">
    Scanning subversion<img src="/images/ajax-loader.gif" /></div>
</div>

or .prepend() it after loading the content.

$("#mycontent").prepend('<div id="loading-indicator">');

Upvotes: 1

Antoine
Antoine

Reputation: 2807

You can use the callback like this:

$('#mycontent').load('/tags/runme',{branch_name: $(this).val()}, function(data) {
   //Do your stuff here, this will be executed once the request is over.
   $('#loading-indicator').hide()
});

Ref: http://api.jquery.com/load/

Upvotes: 1

Related Questions