I noticed whenever I enable Panels IPE my jqueryui tabs stop working for some reason. The problem goes away when I change to the Standard Editor. Everything works correctly otherwise. I'm using the latest dev version of Panels.

I'm basically adding the jqueryui tabs using my theme's preprocess_page by including:
drupal_add_library('system', 'ui.tabs', TRUE);

I have verified that the following scripts are loaded in this order in the HEAD:
jquery.ui.tabs.min.js?v=1.8.7"
jquery.ui.core.min.js?v=1.8.7"
jquery.ui.widget.min.js?v=1.8.7"
panels.js?mfptv8"
panels_ipe.js?mfptv8"

My calling internal-pages.js script is loaded right before the closing body tag. This initializes the tabs.

Here is the error displayed in the console in Firefox using Firebug:

TypeError: d.widget is not a function
jquery.ui.tabs.min.js?v=1.8.7

TypeError: $(...).tabs is not a function
internal-pages.js?mfptv8
Line 38

Here is the error displayed in the console in Chrome using the inspector:

Uncaught TypeError: Object function (j,s){return new b.fn.init(j,s)} has no method 'widget' jquery.ui.tabs.min.js:15
Uncaught TypeError: Object #<Object> has no method 'tabs' internal-pages.js:36

I know this hard to troubleshoot without looking at my site, but hopefully someone might know what the problem is.

Let me know if I can provide any other information.

Comments

gmclelland’s picture

gmclelland commented

The problem is happening because for some reason on Panels IPE pages only the load order of the jqueryui javascript files gets messed up. I tested with a different theme(bartik) and it still shows the problem.

In bartik I added the following:

function bartik_preprocess_page(&$variables) {
  drupal_add_library('system', 'ui.tabs', TRUE);
}

On Panels IPE page:

jquery.ui.tabs.min.js?v=1.8.7"
jquery.ui.core.min.js?v=1.8.7"
jquery.ui.widget.min.js?v=1.8.7"
panels.js?mfptv8"
panels_ipe.js?mfptv8"

On non Panels IPE page:

jquery.ui.core.min.js?v=1.8.7"
jquery.ui.widget.min.js?v=1.8.7"
jquery.ui.tabs.min.js?v=1.8.7"
panels.js?mfptv8"
panels_ipe.js?mfptv8"

I'm not sure if this is because of another module messing with the order of the files or not? I will have to check on another site.

Hopefully this information helps narrow down the problem. Does Panels or Panels IPE rearrange the javascript in any way?

gmclelland’s picture

gmclelland commented
Category: support » bug

Just tested on a freshly installed site with nothing but Ctools and Panels modules. Problem still happens. Anybody have any thoughts as to what is causing this?

merlinofchaos’s picture

merlinofchaos commented

Now that I think about it, I suspect what's really wrong is that IPE is using jQuery UI 1.7 and you're adding jQuery UI 1.8 and the two aren't playing nicely together. This will probably take some real effort to debug, since it probably means updating IPE code to work with UI 1.8 and that'll require looking at the changes, etc.

gmclelland’s picture

gmclelland commented

Drupal 7 includes jQuery 1.4.4 and jQuery UI 1.8.7. I didn't see jQuery UI 1.7 being loaded on a Panels IPE page.

Correct me if I'm wrong but I see two separate issues here:
1. The load order of the js files gets messed up somehow. In this case it needs to be jquery.ui.core.min.js then jquery.ui.widget.min.js then jquery.ui.tabs.min.js. I believe that is what is causing the js error and what is also causing my tabs to not load correctly.

2. Panels IPE doesn't work with jQuery UI 1.8.x - I found a work around for all this by using the http://drupal.org/project/jquery_update module then choosing to use the Google hosted jQueryUI 1.7 which works. Errors went away and tabs started working. I then tested it with Google's jQueryUI 1.8. I didn't see any errors, but I did notice I couldn't drag any panes into a different region.

Note: I tested the local version of the jQuery UI 1.7 with the jquery_update module and this again causes errors because the load order is getting messed up.

Hope that helps

merlinofchaos’s picture

merlinofchaos commented

Wait, you're saying Drupal 7 comes with jQuery UI 1.8? Panels IPE works with a stock Drupal, so now I'm confused. And yes, I just confirmed that this is the case. So I don't *believe* there is any incompatibility with jQuery 1.8 after all. It's possible I'm misremembering this part.

I have no idea how the load order is getting messed up. Perhaps either your code or Panels is adding the library incorrectly somehow, but it only shows up as incorrect when used together.

Panels IPE doesn't add widgets or ui directly, it relies on Drupal to do it as part of this:

    drupal_add_library('system', 'ui.draggable');
    drupal_add_library('system', 'ui.droppable');
    drupal_add_library('system', 'ui.sortable');

Is it possible that your code is doing something wrong there that only shows up when another system is adding ui javascript?

gmclelland’s picture

gmclelland commented
Status: Active » Closed (fixed)

Found the problem:

In my code I was using the following:
drupal_add_library('system', 'ui.tabs', TRUE);

Not sure why, but when I change it to the following everything works correctly:
drupal_add_library('system', 'ui.tabs');

Thank you for your help, I'm closing this issue.

merlinofchaos’s picture

merlinofchaos commented

The 3rd argument on drupal_add_library is actually an ordering system, so in fact that argument was probably wrong and adding the library early.