2

I was working on Jquery with Visualforce and noticed that the page was fine with showheader = false and when I used showheader="true" I ended up having the following error in my console:

Uncaught TypeError: undefined is not a function dynatree?core.apexpages.devmode.url=1:46 Uncaught ReferenceError: initViewstateTab is not defined

This post: Why would my table render different when using showheader=false? says salesforce will apply a lot of their standard css to the page. Setting standardstylesheets="false" does not seem to fix this errors.

Do I need to use showheader = "false" when I use jquery with third party libraries.Some examples pointed out by @metadaddy :https://success.salesforce.com/answers?id=90630000000gi24AAA and https://developer.salesforce.com/forums/ForumsMain?id=906F000000098ppIAA use showheader="true" and most of them do not have third party JS included.

Please clarify why and how the showheader flag affects the VF page when used with Jquey.

Was answering this question and ended up having a question :/ Loading Dynatree Jquery library in Visualforce

Page :

<apex:page standardStylesheets="false" sidebar="false" showHeader="false">
<!-- jQuery files -->

<apex:includeScript value="{!(URLFOR($Resource.DynaTreeJQjs))}"/>
<apex:includeScript value="{!(URLFOR($Resource.DynaTreeCustomjs))}"/>
<apex:includeScript value="{!(URLFOR($Resource.DynaTreeCookiejs))}"/>


<!-- DynaTree files -->
    <apex:includeScript value="{!(URLFOR($Resource.DynaTreejs))}" />
    <apex:stylesheet value="{!(URLFOR($Resource.DynaTreecss))}" />

<script type="text/javascript">
$j = jQuery.noConflict();

    $j(function(){
        // Attach the dynatree widget to an existing <div id="tree"> element
        // and pass the tree options as an argument to the dynatree() function:
        $j("#tree").dynatree({
            onActivate: function(node) {
                // A DynaTreeNode object is passed to the activation handler
                // Note: we also get this event, if persistence is on, and the page is reloaded.
                alert("You activated " + node.data.title);
            },
            persist: true,
            children: [ // Pass an array of nodes.
                {title: "Item 1"},
                {title: "Folder 2", isFolder: true,
                    children: [
                        {title: "Sub-item 2.1"},
                        {title: "Sub-item 2.2"}
                    ]
                },
                {title: "Item 3"}
            ]
        });
    });
    </script>

<body>
    <!-- Add a <div> element where the tree should appear: -->
    <div id="tree"> </div>
</body>

</apex:page>
2

It sounds like jquery is conflicting with a salesforce script library. You will probably need to use jQuery.noConflict() to give up control of the $. Using something like this below you would just need to replace any $ in your script to $j

$j = jQuery.noConflict();

https://api.jquery.com/jQuery.noConflict/

  • Craig I do have the JQuery.noConflict. I will update the question – Rao Apr 14 '14 at 22:09

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.