Skillbuilders - Super LOV plugin

Question

Hi,
I am using Oracle APEX 4.2, I recently installed Skillbuilders - Super LOV plugin into my APEX instance. Everything worked fine.
But later, I used jQuery grid plugin to show the result. and somehow the Super LOV plugin doens't work.
The "Open Dialog" and "Clear Content" button disappeared.
What i have done is inclued the following files at the page edit page
Javascript
File URLs
http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js
/i/javascript/grid/pqgrid.min.js
CSS
File URLs
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css
/i/javascript/grid/pqgrid.min.css
Can someone help me with this? I think maybe there is a confliction between SuperLOV plugin and the jQuery grid plugin?

Answer 1

Max,
I took a quick look and confirmed your findings. There is a solution, but it's a little complex. I've modified your application to do the first part, which is to "safely" add a new version of jQuery and jQuery UI to APEX:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
   var jQ_1_8_3 = jQuery.noConflict(true);
   (function($) {
      $(document).ready(function() {
         alert ('Look at me, new version with the old $ reference: ' + $.fn.jquery);
   })(jQ_1_8_3);
</script>The first 2 lines here bring in the new version of jQuery and then jQuery UI into the new jQuery object. The second part does two things. First, it uses noConflict to put the new version of jQuery in a custom variable named jQ_1_8_3 (while returning the previous value of jQuery and $ as they were). Second, I use "self-executing anonymous function/expression" to show you how you can still use the $ to refer to the new variable.
Now, the next thing you would need to learn to do is to safely bring in the newer CSS file - that is if bringing it in now breaks something which may happen. That involves CSS scoping, which is an option you see when downloading jQuery UI (at the bottom): http://jqueryui.com/download/
However, to do this, you would need to move to the file system and away from the hosted CDN files. I hope some of this makes sense...
Regards,
Dan
blog: http://DanielMcghan.us/
work: http://SkillBuilders.com/APEX/