問題描述

我正在使用帶有 struts2-jQuery-plugin 的 Struts 2.3.

I am using Struts 2.3 with struts2-jQuery-plugin.

我必須使用 ajax 動態加載一個動作的結果.
在 JSP 中有一些普通的 html 和一個 jQuery 標記

I have to load dynamically with ajax a result from an action.
In the JSP there is some normal html and a jQuery tag

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

一切正常，注入ajax的代碼是:

All works OK and the code injected with ajax is:

<!-- 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"> 呈現為普通文本和點作為日期選擇器.
我認為注入的javascript沒有執行...

but now <input type="text" name="dataScadenza"> is rendered as a normal text and dot as a datepicker.
I think that the injected javascript is not executed...

我能做什么?

推薦答案

問題是struts2-jQuery-plugin正在生成一個腳本，該腳本會在DOM準備好后運行:jQuery(document).ready(function() { ...

The problem is that struts2-jQuery-plugin is generating a script that will run after the DOM is ready: jQuery(document).ready(function () { ...

頁面被渲染后，ready 事件被觸發.但是在 AJAX 調用之后，就不是了.

After the page is rendered, the ready event is fired. But after an AJAX call, it is not.

那么你有兩個解決方案:

Then you have two solutions:

1. 避免對 AJAX 返回的 JSP 片段使用 struts2-jquery-plugin；改用純 jQuery 并避免使用 jQuery(document).ready(function () {
   _{(但我想它不會完全可靠)；}

使用一個技巧來覆蓋默認的 jQuery 就緒事件，如此出色答案中所述，以便就緒函數將變為可觸發的.
然后將其作為 AJAX 返回的 JSP 片段的最后一行觸發

use a trick to override the default jQuery ready event, as described in this great answer, so that the ready function will become triggerable.
Then trigger it as last row of your JSP snippet returned by AJAX

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

我制作了一個小提琴來展示這個技巧，并在 jQuery 1.10.1 中對其進行了測試:

I've made a fiddle showing the trick, and tested it in jQuery 1.10.1:

運行演示

HTML

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

JAVASCRIPT

// 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!');
});

請記住，最初在 ready 事件中運行的其他處理程序也會再次觸發，因此請謹慎使用.

Remember that also the other handlers originally run in ready event will be triggered again, so use this with caution.

這篇關于struts2、ajax 和注入的 jquery 標簽的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！