struts2、ajax 和注入的 jquery 标签

2022-01-16 00:00:00 jquery ajax struts2 struts2-jquery

我正在使用带有 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.

相关文章