在Grails GSP中使用Spin.js

Question

我正在尝试在我的grails GSP中使用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

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-app/js或grails-app/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> 

将notice id添加到submitbutton中，然后在表单结束标记下添加进一步的Java脚本…

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

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

如果你愿意，你可以一直使用grails的表单标签…

Answer 2

不知何故，通过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>

谢谢大家的帮助。