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
Improve this question
6
  • What error are you getting in console. Commented Dec 24, 2013 at 9:03
  • @MilindAnantwar I edited the question, check it out. Commented Dec 24, 2013 at 9:08
  • can you show your .js include files Commented Dec 24, 2013 at 9:09
  • Have you defined CSS class which you are using (activetab & inactivetab) Commented Dec 24, 2013 at 9:11
  • @Nomi the only script that I use is the jQuery library, otherwise it will be built in force.com platform. Commented Dec 24, 2013 at 9:11

2 Answers 2

Reset to default
8

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>
Improve this answer
3
  • I'm using noConflict as "var $ = jQuery.noConflict();" from the beginning, but I replaced <script> with apex:includeScript, but the errors didn't gone. Commented Dec 24, 2013 at 9:19
  • thanks a lot for your help @mast0r , I replaced $ with $x then add noConflict function to $x and it works well. Commented Dec 24, 2013 at 9:26
  • @HasanKhatib Good! Commented Dec 24, 2013 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]

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.