I am working on an old APEX application that uses the Prototype Javascript framework. Since Prototype has a function $() we have always had to avoid conflicts with the jQuery $() function by adding the following to our page templates after the APEX Javascript libraries have been loaded:
<script type="text/javascript">jQuery.noConflict();</script>
This works because all jQuery generated by APEX uses apex.jQuery() rather than $().
However, having recently upgraded the application to APEX 5.0 this no longer seems to be the case - i.e. APEX is generating Javascript calls to $() intending to call the apex.jQuery function, but in our pages fails because it actually calls the Proptotype $() function instead. This means that, for example, Date Picker items do not work.
To illustrate I have set up a page on apex.oracle.com where I have linked in the Prototype.js library and added the jQuery.noConflict call after the APEX libraries:
https://apex.oracle.com/pls/apex/f?p=20820:2
(Log in as demo/demo).
The APEX-generated code that fails is:
apex.jQuery( document ).ready( function() {
(function(){$('body').addClass('t-PageBody--leftNav');
})();
(function(){apex.widget.datepicker("#P2_DATE_FROM",{"buttonImageOnly":false,"buttonText":"\u003Cspan class=\u0022a-Icon icon-calendar\u0022\u003E\u003C\u002Fspan\u003E\u003Cspan class=\u0022u-VisuallyHidden\u0022\u003EPopup Calendar: Date From\u003Cspan\u003E","showTime":false,"defaultDate":new Date(2016,10,14,11,35,11),"showOn":"button","showOtherMonths":false,"changeMonth":false,"changeYear":false},"dd-M-y","en"); $('#P2_DATE_FROM').next('button').addClass('a-Button a-Button--calendar');})();
(function(){apex.widget.datepicker("#P2_DATE_TO",{"buttonImageOnly":false,"buttonText":"\u003Cspan class=\u0022a-Icon icon-calendar\u0022\u003E\u003C\u002Fspan\u003E\u003Cspan class=\u0022u-VisuallyHidden\u0022\u003EPopup Calendar: Date To\u003Cspan\u003E","showTime":false,"defaultDate":new Date(2016,10,14,11,35,11),"showOn":"button","showOtherMonths":false,"changeMonth":false,"changeYear":false},"dd-M-y","en"); $('#P2_DATE_TO').next('button').addClass('a-Button a-Button--calendar');})();
(function(){apex.initDevToolbar([{"pageId":"2","typeId":"5110","id":"45582984331005604074","domId":"R45582984331005604074"},{"pageId":"2","typeId":"5120","id":"45582997134701606257","domId":"P2_DATE_FROM"},{"pageId":"2","typeId":"5120","id":"45582997468967606259","domId":"P2_DATE_TO"}],"FOCUS",{"autoHide":"Auto Hide","iconsOnly":"Show Icons Only","noBuilderMessage":"This application was not run from the Application Express Application Builder or the Builder window cannot be found. The Builder will now replace the application in this window.","display":"Display Position","displayTop":"Top","displayLeft":"Left","displayBottom":"Bottom","displayRight":"Right"},42);})();
apex.theme42.initializePage.noSideCol();
});
Should that code not be using apex.jQuery() rather than $()? And how can I make the page work, short of removing use of Prototype altogether?