5

We have a managed package that includes a VF page with containing an <apex:tabPanel> component that renders 2 <apex:enhancedlist> elements in tabs, and an iframe.

The tab-panel is performant and normal, except for certain users, in installed orgs.

When these users access the page, the tab-panel is broken, and a series of Javascript exceptions are emitted from the ExtJS library that drives the component. These errors occur in multiple browsers.

The tab-panel behaves normally for others using the same org, and we have determined that the permissions for the managed package components, apex classes, vf pages, custom objects look to be normal.

Here is a screen capture of some of the exceptions that occur when the page is loaded...extjs tabpanel exceptions

Normally would think it could be a $ in jQuery conflict issue, but any jQuery is loaded inside of iFrames, which wouldn't explain the exceptions occurring on the enhanced list tab?

  • Is it actually causing errors for those users? I've often seen JS errors around iframes in Salesforce, I think by default some communication is attempted but the cross domain nature of VF pages throws it all out of whack. – Matt Lacey Aug 13 '13 at 23:04
  • Compare the profiles of the users - the ones that are getting the errors and the ones that don't. See if there are any permissions that need to be set, in case the JQuery uses the API etc. – Boris Bachovski Aug 13 '13 at 23:25
  • @e-bancho2.0 We attempted too, there are literally hundreds and this is a remote install so we can only look at it via screen sharing, etc. without spending a long time on the phone. Also, If it were the iframe why wouldn't it happened to both users regardless of profile...? – jordan.baucke Aug 14 '13 at 15:13
  • I'm getting these errors in a much simpler context: tabPanel containing tabs importing other pages with apex:composition. One of those pages contains a jQuery import, and removing that restores functionality. Left in, errors like those seen in your screenshot show, and no tabs work. Will let you know if I make any headway on it :) [This is all in Chrome] – James Hill Aug 20 '13 at 22:44
5

So following on from my comment above, I'm hoping I have the answer you're after. It's not precisely the same as your situation, but the errors were exactly the same, and the issues involved were very similar.

The Problem

In my situation, we had an <apex:tabPanel> on a custom Account page with different <apex:tab>s corresponding to different bits of Account information.

In each of these, we were using <apex:composition> to pull in different visualforce pages laying out this information.

In one of these pages pulled in using <apex:composition> I was importing jQuery and a few other bits and bobs to get some enhanced table functionality. Now as the <apex:tabPanel> tag had the attribute switchType="server" set, I was surprised to find my static jQuery resource was being pulled into the page's source when I wasn't viewing the jQuery tab. This was of course combined with the fact that none of the tabs functioned correctly, and I was getting exactly the same error messages as you.

So long story short - it didn't matter which tab I was viewing, something about the <apex:tabPanel> thought it would be clever and get all javascript imports from all tabs and make sure I could see them at all times.

The Solution

Of course, my first thought was "OK, easy fix, slap jQuery.noConflict() into a <script> tag inside the page where I import jQuery". No such luck. While using the <apex:tabPanel> does pull any js imports from non-active tabs in, it doesn't pull any <script> tags an.

So I chucked the same thing into the page containing the <apex:tabPanel> instead (with a check that the jQuery var had been attached to the window). And bam: the errors were gone :)

So to bring it on home/TL;DR

On the page containing the <apex:tabPanel> (not necessarily the page that actually imports jQuery, unless it can be accessed/is used in other contexts where there may be a conflict on the $ alias!) chuck the following in. This checks to see if jQuery has been loaded onto the page. If it has, it calls jQuery.noConflict(). The major side-effect of this, for those unfamiliar with noConflict, is that you now cannot use the $ alias for jQuery, and instead need to use the full jQuery namespace var.

<script type="text/javascript" language="javascript">
    if(jQuery) {
        jQuery.noConflict();
    }
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.