Why Jquery .hide() does not hide an element div?

Question

So. I have below Jquery/Ajax and .hide() method doesn't seems to hide the element loadingdiv.

<script type="text/javascript">
        $(document).ready(function ($) {
            //show a progress modal of your choosing
            $('#loadingdiv').show();

        $.ajax({
            url: "@Url.Action("ToDo","Test")",
            dataType: 'html',
            success: function(data) {
                $('#bookListDiv').html(data);
            }});
        });
        $('#loadingdiv').hide();
</script>

there are some good links in this question and he posted his code on how he got it working. hope it helps http://stackoverflow.com/questions/41988881/partial-views-on-mvc-create-view-that-use-a-dropdown-list-to-populate-the-partia?noredirect=1#comment71159630_41988881 — Matt Bodily, Feb 10 '17 at 20:11
Also, http://stackoverflow.com/questions/1570127/render-partial-view-using-jquery-in-asp-net-mvc — Abbas Amiri, Feb 10 '17 at 20:12

score 1 · Answer 1 · answered Feb 11 '17 at 16:08

Assuming you have some HTML like this:

<div id="StaticContent">
  ...
</div>
<div id="DynamicContent">
  <img src="~/Content/Images/ajax-loader.gif" alt="loading..." />
</div>

Then you can use a simple jquery load() call to achieve what you want.

$(function() {
  $('#DynamicContent').load("/path/to/api");
});

user3731395 · Answer 2 · 2017-02-12T13:40:51.630

I think the hide() function appears not to be working because it is not being called when you think it is. The way you have written the script tag, the hide() function is called before the page ready function. Change your markup to call the hide() function inside the ajax success callback.

$.ajax({
        url: "@Url.Action("ToDo","Test")",
        dataType: 'html',
        success: function(data) {
            $('#bookListDiv').html(data);
            $('#loadingdiv').hide();
        }});

However, if you follow the advice in the other answer, this step is unnecessary. The loading gif will be replaced by the contents returned to the ajax call.

Why Jquery .hide() does not hide an element div?

2 Answers2