struts2、ajax 和注入 jquery 标签答案

【问题标题】：struts2, ajax and injected jquery tagstruts2、ajax 和注入 jquery 标签
【发布时间】：2014-02-15 04:53:28
【问题描述】：

我正在使用带有 struts2-jQuery-plugin 的 Struts 2.3。

我必须使用 ajax 动态加载动作的结果。
在 JSP 中有一些普通的 html 和一个 jQuery 标记

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

一切正常，注入ajax的代码是：

<!-- 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没有执行...

我能做什么？

【问题讨论】：

你是否在你的 head 部分插入了标签？您的 javascript 控制台中是否有任何日志消息？

标签： jquery ajax struts2 struts2-jquery

【解决方案1】：

问题是 struts2-jQuery-plugin 正在生成一个脚本，该脚本将在 DOM 准备好后运行：jQuery(document).ready(function () { ...

页面被渲染后，ready 事件被触发。但是在 AJAX 调用之后，就不是了。

那么你有两个解决方案：

避免对 AJAX 返回的 JSP sn-p 使用 struts2-jquery-plugin；改用纯 jQuery 并避免使用 jQuery(document).ready(function () {
_{（但我想它不会完全可靠）；}

使用技巧来覆盖默认的 jQuery 就绪事件 as described in this great answer，以便就绪函数可以触发。
然后将其作为 AJAX 返回的 JSP sn-p 的最后一行触发

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

我制作了一个小提琴来展示这个技巧，并在 jQuery 1.10.1 中对其进行了测试：

Running demo

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 事件中运行的其他处理程序也会再次触发，因此请谨慎使用。

【讨论】：