Grails에서 외부 자바 스크립트 파일을 재사용하는 방법은 무엇입니까?

Question

나는 간단한 자바 스크립트 파일을 생성 및 웹 응용 프로그램 /의 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에 및 형식 2)를 사용하여 두 가지 형태가있다. 그들은 다른 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를 가지고 있으며, 이론적으로 main.gsp 안에 코드 <g:javascript library="util" />을 넣었습니다. 제대로 작동해야합니까? 음 .. 꽤 이상 하네. 소스 코드를 보려면 Form2를 마우스 오른쪽 버튼으로 클릭하십시오. util.js가 확실히 있습니다. 나는 그것이 효과가 없어야하는 이유를 정말로 생각할 수 없다. 같은 코드를 다시 쓰고 싶지 않기 때문에이 두 형식 모두에서 작업하기를 원했습니다.

추 신 : id를 class = "postalCode"로 변경하고 $ ('# postalCode')를 $ ('. postalCode')로 변경했지만 여전히 작동하지 않았습니다. 나는 또한 우편 번호 텍스트 필드에 onClick 트리거를 추가하여 util.js를 읽었는지 테스트 할 경고 (코드는 util.js에 있음)가 표시되고 작동하지만 여전히 문제를 해결하지 못합니다. 나는 당황 스럽다. 나는 그것을 onKeyUp에 간단하게 다시 쓸 수 있었고 이전 자바 스크립트 방식으로 함수를 추가 할 수 있었지만 여기서 뭔가를 놓칠 수있었습니다. 그래서 여러분들의 의견을 먼저 듣고 싶습니다. : '(

Answer 1

디버깅을 위해 기본 JavaScript 기능 전체에서 console.log ("설명 텍스트")를 추가하는 것이 좋습니다. 그러면 작업을 종료하기 전에 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 인 경우 브라우저를 확인하고 콘솔을 다른 것으로 정의해야합니다.

Chrome에서 Ctrl + Shift + J를 사용하여 JS 콘솔을 열 수 있습니다. 여는 다른 f}은 https://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers을 참조하십시오.