在Grails GSP中使用Spin.js

Question

我正在尝试在grails中使用spin.js。我不确定spin.js是否会为input type= submit工作。下面是我的密码。我尝试了太多的东西，但没有让旋转器工作。我必须将它放在下面代码中指定的页面上的位置。我将spin.js放在下面的代码中：webapp/js/spin.js，请建议我如何在下面的代码中使用spin.js。谢谢。

        <g:javascript src="spin.js" />
        <g:form name="selectionForm" url="[controller:'Resource',action:'crawl']">
                    ***put spinner here on submit***
                <g:select name="websiteSelection"
                            from="${websitesList.website}" id="mySelect"
                            class="styled-select" value="select" /><
                <input type = "submit" name="selection" value="CRAWL" >                                  </table>
        </g:form>
        <script type="text/javascript">
            $('#selectionForm').submit(
                    function() {
                        $('input[type=submit]', this).attr(
                                'disabled', 'disabled');
                    });
        </script>

Answer 1

不知怎么的，在通过chrome调试之后，我发现js文件没有被加载。在重新整理我的代码之后，它成功了。我必须将javascript文件的链接语句放在脚本标记的上方。

<g:javascript src="generateSpinner.js" />
<script type="text/javascript">
    $('#selectionForm').submit(function() {
        $('input[type=submit]', this).attr('disabled', 'disabled');
    });

    $('#btnPerformSave').click(function() {
        spinnerInit();
    });
</script>

谢谢大家的帮助。

Answer 2

spinner.js？

只是想知道你是不是有点想太多了..。

我有大量的纺纱机工作--通常当网站忙着做一些事情时，纺纱机就来了。要使默认的jquery旋转器正常工作，请尝试以下操作。

在您的BuildConfig.groovy下，确保您有插件依赖性：

runtime ":jquery:1.11.1"

在您的布局/main.gsp中

<g:javascript library="jquery"/>    

然后，在任何时候您希望旋转器出现的地方(如顶部的菜单栏)添加以下内容：

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

默认情况下，它将从grails提供的默认css加载spinner类，并在站点繁忙时启动.

希望它能回答你的问题，也能找到这个可能有用的指南：http://blog.oio.de/2010/11/08/how-to-create-a-loading-animation-spinner-using-jquery/

我应该指出，实际上我的站点经常使用ajax，因此旋转器会从默认的application.js (无论是在web/js还是grails/assets/javascripts 2.4+中)启动。

因此，要使按钮按照上面的指南工作，您可以在表单页面上尝试以下操作：

...
  <input type = "submit" id="submitButton" name="selection" value="CRAWL" >      
...
</form>
<g:javascript>
$(document).ready(function(){
    $('#submitButton').click(function() {
        $('#spinner').show();
    });
});
</g:javascript> 

注意添加到suubmitbutton中的id，然后在表单结束标记下添加另一个java脚本.

也是http://grails.org/doc/latest/ref/Tags/submitButton.html

<g:submitButton name="update" value="Update" />

如果你想要的话，你可以一路使用grails表格标签.