7

I am using jQuery library in my visual force page, but I've faced a major problem when I tried to use tabs "apex:tabPanel".

<script src="{!$Resource.jQuery}"></script> <!-- If I delete this script the tabs work !! -->

<apex:tabPanel tabClass="activeTab" inactiveTabClass="inactiveTab">
  <apex:tab label="Tab#1" id="tab1"></apex:tab>
  <apex:tab label="Tab#2" id="tab2"></apex:tab>
</apex:tabPanel>

I get a "JS" errors in the console when I try to click on any tab, but if I delete jQuery library it works. So I guess there is a conflict between jQuery and apex:tabPanel functionality.


Here's what I got in the console

Uncaught ReferenceError: initViewstateTab is not defined 
Uncaught TypeError: Object [object Object] has no method 'dispatchEvent' 
Uncaught ReferenceError: initViewstateTab is not defined 
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
Uncaught TypeError: Object [object Object] has no method 'hasClassName' 
Uncaught TypeError: Cannot call method 'replace' of undefined
  • What error are you getting in console. – Milind Anantwar Dec 24 '13 at 9:03
  • @MilindAnantwar I edited the question, check it out. – iKhatib Dec 24 '13 at 9:08
  • can you show your .js include files – Naeem Dec 24 '13 at 9:09
  • Have you defined CSS class which you are using (activetab & inactivetab) – Sravan Alaparthi Dec 24 '13 at 9:11
  • @Nomi the only script that I use is the jQuery library, otherwise it will be built in force.com platform. – iKhatib Dec 24 '13 at 9:11
9

The error happens here because of the conflict between jQuery and PrototypeScript libraries. To fix it just use jQuery's noConflict() function:

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

  1. Load the jQuery library first (at the top of the page)
  2. Use apex:includeScript instead of script tag
  3. Then use noConflict() function
  4. Read this great topic Using jQuery in a Visualforce Page from the developer force site

Yout page must look like this then:

<apex:page>
<apex:includeScript value="{!URLFOR($Resource.Scripts,'script/jquery-1.8.1.min.js')}" />

<script>
    jQuery.noConflict();

    // all other javascript stuff...
</script>

<apex:tabPanel switchType="client" tabClass="activeTab" inactiveTabClass="inactiveTab">
  <apex:tab label="Tab#1" id="tab1"></apex:tab>
  <apex:tab label="Tab#2" id="tab2"></apex:tab>
</apex:tabPanel>
  • I'm using noConflict as "var $ = jQuery.noConflict();" from the beginning, but I replaced <script> with apex:includeScript, but the errors didn't gone. – iKhatib Dec 24 '13 at 9:19
  • thanks a lot for your help @mast0r , I replaced $ with $x then add noConflict function to $x and it works well. – iKhatib Dec 24 '13 at 9:26
  • @HasanKhatib Good! – Sergej Utko Dec 24 '13 at 9:27
1

You can do the following test: - Remove the tabs, and check if the library works fine yet? There seems to be a problem with library in VF.

If it works fine then, it may be fixed by following: - Try using jQuery.noConflict() or move them beow '' (As said by eyescream)

  • Manipulate the library and try to modify the function

[u may share the library for better clarity]

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.