2014-01-24 4 views
2

저는 struts2-jQuery-plugin과 함께 Struts 2.3을 사용하고 있습니다.struts2, ajax 및 주입 된 jquery 태그

액션에서 결과를 ajax로 동적으로로드해야합니다. 는 JSP에서
아약스와 함께 주입 몇 가지 일반적인 HTML과

<sj:datepicker cssClass="dataScadenzaDiv" id="dataScadenzaDiv" 
     name="dataScadenza" maxDate="-1d" label="data scadenza" theme="xhtml"/> 

모든 확인을 작동하는 jQuery를 태그와 코드가있다 :

<!-- lotto dpi --> 
<tr> 
<td class="tdLabel"><label for="lotto" class="label">Lotto:</label></td> 
<td><input type="text" name="txtLotto" size="15" value="" id="lotto"/></td> 
</tr> 

<!-- tGestDataScadenza --> 
<div id="dataScadenzaAjax"></div> 
<input type="text" name="dataScadenza" value="" id="dataScadenzaDiv"  class="dataScadenzaDiv" theme="xhtml"/><script type='text/javascript'> 
jQuery(document).ready(function() { 
jQuery.struts2_jquery_ui.initDatepicker(false); 
}); 
jQuery(document).ready(function() { 
var options_dataScadenzaDiv = {}; 
options_dataScadenzaDiv.showOn = "both"; 
options_dataScadenzaDiv.buttonImage = "/RadioFrequenza2/struts  /js/calendar.gif"; 
options_dataScadenzaDiv.maxDate = "-1d"; 
options_dataScadenzaDiv.jqueryaction = "datepicker"; 
options_dataScadenzaDiv.id = "dataScadenzaDiv"; 
options_dataScadenzaDiv.name = "dataScadenza"; jQuery.struts2_jquery_ui.bind(jQuery('#dataScadenzaDiv'),options_dataScadenzaDiv ); 

}); 
</script> 

하지만 지금 <input type="text" name="dataScadenza">가 일반 텍스트로 렌더링됩니다 및 datepicker로 점.
삽입 된 자바 스크립트가 실행되지 않는다고 생각합니다 ...

어떻게해야합니까? 페이지가 렌더링 jQuery(document).ready(function() { ...

후, 준비 이벤트가 해고 :

+0

머리 부분에 태그를 삽입 했습니까? 자바 스크립트 콘솔에 로그 메시지가 있습니까? – Johannes

답변

1

문제는 struts2-jQuery를-플러그인이 DOM이 준비 후에 실행하는 스크립트를 생성하는 것입니다. 그러나 AJAX 호출 이후에는 그렇지 않습니다.

는 그런 다음 두 가지 해결책이 있습니다

  1. 피하기 AJAX에 의해 반환되는 JSP 조각에 대한 struts2-JQuery와 - 플러그인을 사용하여; 대신 일반 jQuery를 사용하고 jQuery(document).ready(function() {
    을 사용하지 마십시오 (하지만 완전히 신뢰할 수는 없습니다).

  2. 기본 jQuery 준비 이벤트 인 as described in this great answer을 대체하여 준비 함수가 트리거 될 수 있도록하십시오.
    그런 다음 jQuery를 1.10.1에서 그것을 그것이 당신의 JSP의 같은 마지막 행은 내가 트릭을 보여주는 바이올린을했습니다

    <sj:datepicker cssClass="dataScadenzaDiv" id="dataScadenzaDiv" 
           name="dataScadenza"  maxDate="-1d" 
           label="data scadenza"  theme="xhtml"/> 
    <script> 
        $.triggerReady(); 
    </script> 
    

AJAX에 의해 반환 된 스 니펫을 트리거 및 테스트 :

Running demo

HTML

<input type = "button" 
     value = "trigger ready event" 
    onclick = "$.triggerReady();" /> 

자바 스크립트

// Overrides jQuery-ready and makes it triggerable with $.triggerReady 
// This script needs to be included before other scripts using the jQuery-ready. 
// Tested with jQuery 1.10.1 
(function(){ 
var readyList = []; 

// Store a reference to the original ready method. 
var originalReadyMethod = jQuery.fn.ready; 

// Override jQuery.fn.ready 
jQuery.fn.ready = function(){ 
if(arguments.length && arguments.length > 0 && typeof arguments[0] === 'function') { 
    readyList.push(arguments[0]); 
} 

// Execute the original method. 
originalReadyMethod.apply(this, arguments); 
}; 

// Used to trigger all ready events 
$.triggerReady = function() { 
    $(readyList).each(function(){this();}); 
}; 
})(); 


/* This part is for demo only and should be removed */ 
$(document).ready(function(){ 
    alert('document.ready is fired!'); 
}); 

또한 다른 핸들러 원래 다시 트리거 될 준비 이벤트에서 실행할 것을 기억 때문에주의해서 사용합니다.