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>

Answer 1

Gabriel在评论中回答了问题。我只需要将.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>

隐藏后，div不会显示

1 个答案: