javascript - 让微调器在 Grails 中正常工作

Question

我试图让 spinner 在我的 grails 应用程序中正常工作。我理解它的方式是，它应该在等待 Action 完成时开箱即用。它没有这样做。

我能够根据我从谷歌找到的一些建议让微调器工作，并修改了这个解决方案:http://grails.1312388.n4.nabble.com/spinner-or-progress-indicator-td1363802.html ，但是这对我来说似乎很老套，而不是最佳解决方案。

这表明我需要以下脚本:

<script type="text/javascript">
      function showSpinner() {
          document.getElementById('spinner').style.display = 'inline';
          document.getElementById('error').style.display = 'none';
      }

      function hideSpinner() {
          document.getElementById('spinner').style.display = 'none';
          document.getElementById('error').style.display = 'none';
      }

      function showError(e) {
          var errorDiv = document.getElementById('error')
          errorDiv.innerHTML = '<ul><li>'
                   + e.responseText + '</li></ul>';
          errorDiv.style.display = 'block';
      }
    </script>

我使用了一个 grails 按钮:

<g:submitToRemote value="Validate Address"
url="[action: 'standardizedList', controller: 'address']"
update="addressList" after="showSpinner();" onSuccess="hideSpinner()"
class="btn btn-primary"/><br>

<img id="spinner" style="display:none;"
 src="${createLinkTo(dir: 'images', file: 'spinner.gif')}"
 alt="Spinner"/>

现在我将 javascript 片段放入 /layouts/main.gsp，但看起来我必须将旋转器图像添加到我想要的每个页面中，如果我将它放在 div 我想要它显示的地方，当操作完成并更新 div 时它将被覆盖，所以我必须在页面中添加 spinner即响应以及响应主体内部。

当我查看给定的 main.gsp 时，它包含以下代码:

<div id="spinner" class="spinner" style="display:none;">
<g:message code="spinner.alt" default="Loading&hellip;"/>
</div>

此外，在 web-app/js/ 目录中有一个文件 application.js ，其中包含我经常看到的代码，应该添加微调器。

if (typeof jQuery !== 'undefined') {
(function($) {
    $('#spinner').ajaxStart(function() {
        $(this).fadeIn();
    }).ajaxStop(function() {
        $(this).fadeOut();
    });
})(jQuery);

现在我有几个地方我认为操作可能会导致延迟，我希望微调器告诉用户它正在工作。所以我的问题有两个:1)我是否理解它应该如何工作？如果是这样，2) 我怎样才能使开箱即用的代码正常工作？

Answer 1

我是这样做的:确保每个页面中都包含以下 JavaScript，例如通过将其放入布局中包含的 .js 文件中:

$(document).ready(function () {

    var showSpinner = function() {
        $("#spinner").fadeIn('fast');
    };

    // Global handlers for AJAX events
    $(document)
        .on("ajaxSend", showSpinner)
        .on("ajaxStop", function() {
            $("#spinner").fadeOut('fast');
        })
        .on("ajaxError", function(event, jqxhr, settings, exception) {
            $("#spinner").hide();                
        });
});

每次 AJAX 请求停止、启动或返回错误时，都会调用上述函数。在布局中还包括以下内容:

<div id="spinner" style="display:none;">
    <g:img uri="/images/spinner.gif" alt="Loading..."/>
</div>

这是在 AJAX 请求开始/停止时显示/隐藏的内容。在我的例子中，我应用了以下样式，以便微调器显示在屏幕中央的任何其他内容之上:

#spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -50px; // half width of the spinner gif
  margin-top: -50px; // half height of the spinner gif
  z-index: 5000;
  overflow: auto;
}