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中加载微调器类，并在您的站点忙碌时启动...

希望它能回答你的问题，也找到了可能有用的指南：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>

通知id添加到suubmitbutton然后在表单结束标记下添加了另一个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>

感谢大家的帮助。

在Grails GSP中使用Spin.js

2 个答案: