Struts2的，Ajax和注入的jQuery标签 [英] struts2, ajax and injected jquery tag

问题描述

我使用Struts 2.3 Struts2的-的jQuery插件。

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"/>

所有工程确定和code注射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>

但现在＆LT;输入类型=文本名称=dataScadenza＆GT; 呈现为普通文本 和斑点作为一个datepicker。
我认为，不执行注入的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插件产生，这将在DOM后运行一个脚本准备好了： jQuery的（文件）。就绪（函数（）{...

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

在呈现页面时，准备好事件。但是，一个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. 避免使用Struts2的-的jQuery插件是由AJAX返回的JSP代码段;使用而不是纯jQuery和避免使用 jQuery的（文件）。就绪（函数（）{
   <子>（但我想这不会是完全可靠） ;

使用一个技巧在这个伟大的答案的描述，这样就覆盖默认jQuery的ready事件，准备就绪功能将成为触发的。
然后触发它作为你的JSP的片断由AJAX返回的最后一行

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

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

请记住，也是其他处理程序最初是在准备好事件上运行将再次触发，所以采用这种谨慎。

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

这篇关于Struts2的，Ajax和注入的jQuery标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！