0

簡単な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 />
...

現在、それを使用する2つのフォーム（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の方法で関数を追加することもできますが、ここで何かが足りない可能性があるので、最初に皆さんからお話を伺いたいと思います。：'（

4

1 に答える 1

0

デバッグ目的で、メインの 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を参照してください。

于 2013-03-20T03:40:20.520 に答える