如何在Grails中重用外部javascript文件

How to reuse external javascript files in Grails?

本文关键字：外部 javascript 文件 Grails      更新时间：2023-09-26

我创建了一个简单的javascript文件，并将其放在web-app/js中，并将其命名为util.js

它包含以下代码： 

$(document).ready(function() {
    // adds a space after 3rd digit/letter of postal code
    $('#postalCode').keyup(function() {
        var postalCodeValue = this.value;
        var postalCodeLength = postalCodeValue.length;
        if(postalCodeLength == 3){
            this.value = postalCodeValue + " ";
        }
    });
});

这是非常简单的代码，我将其附加到main.gsp上，这样我就不必每次都继续导入它。

...
<div class="footer" role="contentinfo"></div>
<div id="spinner" class="spinner" style="display:none;">
    <g:message code="spinner.alt" default="Loading&hellip;" /></div>
    <g:javascript library="application" />
    <g:javascript library="util" />
    <r:layoutResources />
...

现在，有两种形式使用它（Form1 和 Form2）。它们属于不同的 gsp 文件。Form1 和 Form2 都有一个具有相同 ID "#postalCode" 的文本字段。

<g:textField name="postalCode" maxlength="7" id="postalCode" pattern="([A-Z]|[a-z])[0-9]([A-Z]|[a-z]) [0-9]([A-Z]|[a-z])[0-9]" required="" value="${fosterHomeInstance?.postalCode}"/>

问题是，util.js 适用于 Form1，但奇怪的是，它不适用于 Form2。鉴于它们具有相同的 id，并将代码<g:javascript library="util" />放在 main.gsp 中，那么理论上，它们应该可以正常工作吗？嗯。。这很奇怪。我右键单击 Form2 以查看源代码，util.js 当然在那里。我真的想不出它不应该工作的原因。我希望它适用于两种形式，因为我不想重新编写相同的代码。

PS：我尝试将 id 更改为类 = "邮政编码"并更改了 $（'#postalCode'）...到 $（'.postalCode'），但仍然不起作用。我还在邮政编码文本字段上添加了一个 onClick 触发器，单击时会出现警报（其代码来自 util.js）以测试是否正在读取 util.js，它有效，但它仍然没有解决问题。我很困惑。我可以简单地将其重写为 onKeyUp 并添加一个旧的 javascript 风格的函数，但我可能在这里遗漏了一些东西，所以我想先听听你们的意见。:'(

我建议在整个主要JavaScript函数中的位置添加console.log（"描述性文本"）以进行调试。这将允许你在JavaScript停止工作之前看到你在JavaScript上走了多远。很可能某些 JavaScript 正在按您的预期执行，但其他部分却没有。例如

$(document).ready(function() {
console.log("Document is ready");
  $('#postalCode').keyup(function(){
    console.log("Keyup function started.");
    var postalCodeValue = this.value;
    var postalCodeLength = postalCodeValue.length;
    console.log("Postal Code Value is: " + postalCodeValue);
    console.log("Postal Code Length is: " + postalCodeLength);
    if(postalCodeLength == 3){
        console.log("The postal code length is exactly 3.");
        this.value = postalCodeValue + " "
    }
}); });

值得注意的是，Internet Explorer 默认情况下没有打开控制台，因此您需要在发布网站以供公众使用之前删除这些行，或者检查浏览器并将控制台定义为其他浏览器（如果浏览器是 IE）。

您可以使用 CTRL+SHIFT+J 在 Chrome 中打开 JS 控制台。有关打开它的其他方法，请参阅 https://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers。

相关文章：