Refresh of report hides jQuery calendar popup anchors

Question

In an attempt to build an interactive tabular form in Oracle Apex 4.0.2.00.07, we have based an interactive report on a query containing:
SELECT ...
     , apex_item.date_popup2( p_idx              => 11
                            , p_value            => to_char(..., 'DD.MM.YYYY')
                            , p_date_format      => 'DD.MM.YYYY'
                            , p_size             => 12
                            , p_maxlength        => 10
                            , p_attributes       => 'onchange="..."'
                            , p_item_id          => 'f11_' || to_char(deincno)      -- deincno = primary key column
                            , p_show_on          => 'both'
FROM   ...This renders perfectly. However, any interactive change in the report (filtering, sorting, hiding/showing columns, ...) will hide the calendar popup anchors, reducing the field to a normal text box. Only when the page is reloaded do the calendar popup anchors reappear.
Any help or advice on how to prevent these anchors from dissapearing would be greatly appreciated.

Answer 1

You need to rebuild the date pickers after the apexafterrefresh jquery event
If you look at your page source > scroll to the bottom and you will see some jquery code that builds date-pickers initially on the page load
(function(){apex.widget.datepicker("#f11_7369", { buttonImage: "/i/asfdcldr.gif", buttonImageOnly: true,"buttonText":"Calendar","showTime":false,"defaultDate":new Date(1980,11,17),"showOn":"button","showOtherMonths":false,"changeMonth":false,"changeYear":false}, "dd.mm.yy", "en-gb");})();You can look into your above code and find some of the contextual/dynamic parameters into the date-picker widget such as date format,image path etc...
You can use those values to add this code accordingly
Add this to your page header javascript
apex.jQuery('#apexir_WORKSHEET_REGION').bind("apexafterrefresh", function () {
     // loop through the actual f11 column
     jQuery.each($('input[name="f11"]'), function () {
          //rebuild the datepickers
          var vid = "#" + $(this).attr('id');
          (function () {
               apex.widget.datepicker(vid, {
                    buttonImage : "/i/asfdcldr.gif",
                    buttonImageOnly : true,
                    "buttonText" : "Calendar",
                    "showTime" : false,
                    "showOn" : "button",
                    "showOtherMonths" : false,
                    "changeMonth" : false,
                    "changeYear" : false
               }, "dd.mm.yy", "en-gb");
OR create a dynamic action with event after refresh and with action execute javascript
// loop through the actual f11 column
jQuery.each($('input[name="f11"]'), function () {
          //rebuild the datepickers
          var vid = "#" + $(this).attr('id');
          (function () {
               apex.widget.datepicker(vid, {
                    buttonImage : "/i/asfdcldr.gif",
                    buttonImageOnly : true,
                    "buttonText" : "Calendar",
                    "showTime" : false,
                    "showOn" : "button",
                    "showOtherMonths" : false,
                    "changeMonth" : false,
                    "changeYear" : false
               }, "dd.mm.yy", "en-gb");
});Edited by: VC on Jun 19, 2012 11:01 AM