Question

我正在尝试在我的grails应用中正常使用spinner。我理解它的方式是，它应该在等待动作完成时开箱即用。它没有这样做。

我能够根据我从谷歌找到的一些建议得到一个微调器工作，并修改了这个解决方案：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;
}

让一个微调器在Grails中正常工作

1 个答案: