javascript - 隐藏后div不显示

Question

我在执行 AJAX 调用时显示的 div 中有一个加载微调器。在第一次 AJAX 调用中，它按预期显示和工作。在这种情况下，加载微调器正在替换占位符内容。

在 AJAX 调用完成并从 AJAX 调用填充 Html 内容后，如果再次运行相同的函数，则不会显示加载微调器 div。其他一切都按预期工作。

<div class="col-md-8>
    <div id="divForSectionPreview">
        <div class="loaderDiv">
            <center>
                <img src="~/Images/loadingSpinner.gif" alt="loading.." />
            </center>
        </div>
        <div align="center" class="placeholderDiv">
            <h5 style="padding-top:30px">Placeholder content used before AJAX call is made....</h5>
        </div>
    </div>
</div>

<!--Html stored in another file, loaded by AJAX call-->     
<div class="divContent" style="background-color:white;">
  Html content returned from AJAX call...
</div>

<script>
  $(document).ready(function () {
    $('.loaderDiv').hide();//Hide loaderDiv
  }

  function loadContent(reportSectionId) {
    $('.divContent').hide();//Hide the existing preview content if it's there
    $('.placeholderDiv').hide();//Hide placehoder content if it's there
    $('.loaderDiv').show();//Show loaderDiv ****THIS IS WHAT ONLY WORKS THE FIRST TIME THE FUNCTION IS CALLED****

  $.ajax({
      type: "GET",
      url: "@Url.Action("../Path/File")",
      data: { id: id },
      dataType: 'html', 
      success: function (data) {
        $('#divForSectionPreview').html(data);//Load PartialView for requested section. PartialView is selected in the method based on what type of section is requested
        $('.loaderDiv').hide();//Hide loaderDiv
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status + " " + thrownError);
      },
    });
  }
</script>

标签： javascriptjqueryhtmlajax

Answer 1

加布里埃尔在评论中回答了这个问题。我只需要将.loaderDiv元素移出，divForSectionPreview因为正如他所说，整个内容divForSectionPreview都被 AJAX 调用替换，并且divForSectionPreview在哪里.loaderDiv。

<div class="col-md-8>
    <div class="loaderDiv">
        <center>
            <img src="~/Images/loadingSpinner.gif" alt="loading.." />
        </center>
    </div>
    <div id="divForSectionPreview">
        <div align="center" class="placeholderDiv">
            <h5 style="padding-top:30px">Placeholder content used before AJAX call is made....</h5>
        </div>
    </div>
</div>

<!--Html stored in another file, loaded by AJAX call-->     
<div class="divContent" style="background-color:white;">
  Html content returned from AJAX call...
</div>

<script>
  $(document).ready(function () {
    $('.loaderDiv').hide();//Hide loaderDiv
  }

  function loadContent(reportSectionId) {
    $('.divContent').hide();//Hide the existing preview content if it's there
    $('.placeholderDiv').hide();//Hide placehoder content if it's there
    $('.loaderDiv').show();//Show loaderDiv ****THIS IS WHAT ONLY WORKS THE FIRST TIME THE FUNCTION IS CALLED****

  $.ajax({
      type: "GET",
      url: "@Url.Action("../Path/File")",
      data: { id: id },
      dataType: 'html', 
      success: function (data) {
        $('#divForSectionPreview').html(data);//Load PartialView for requested section. PartialView is selected in the method based on what type of section is requested
        $('.loaderDiv').hide();//Hide loaderDiv
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status + " " + thrownError);
      },
    });
  }
</script>