Question

我创建了一个简单的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更改为class =“postalCode”并将$（'＃postalCode'）更改为$（'。postalCode'），但仍无法正常工作。我还在邮政编码文本字段上添加了一个onClick触发器，其中单击警报将出现（其代码来自util.js）以测试是否正在读取util.js，它是否有效，但它仍然无法解决问题。我很困惑。我可以简单地将它重写为onKeyUp并添加一个旧的javascript时尚功能，但我可能会在这里遗漏一些东西，所以我想先听听你们的意见。：'（

Answer 1

我建议在整个主JavaScript函数的位置添加console.log（“Descriptive text”）以进行调试。这样您就可以在退出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。

如何重用Grails中的外部JavaScript文件？

1 个答案: