struts2, ajax and injected jquery tag

Question

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

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

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>

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...

What can I do?

Answer 1

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

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

Then you have two solutions:

1. avoid using struts2-jquery-plugin for the JSP snippet that is returned by AJAX; use instead plain jQuery and avoid using jQuery(document).ready(function () {
   _{(but I guess it won't be completely reliable);}

2. 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>
   

I've made a fiddle showing the trick, and tested it in 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!');
});

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