1

So I have two specific jQuery includes on a custom VF page, and the combination of both of them are causing the page to "break". When both of the js files are included the VF page has a standard SF page BELOW it (which breaks the styling on the page) and it says "The name can only contain underscores and alphanumeric characters..."

When I comment out one of the JS includes, it works fine... Problem is... I need BOTH of them - any ideas?!

I was thinking perhaps I could use a jQuery.noConflict - but I can't get that to work for some reason.

Any help would be great appreciated!

EDIT: here is the code for a very simplified version of the page (here are the assets you'll need, just upload to static resources: https://drive.google.com/file/d/0BxC45_oHA7IIRF91OFZzZnZtdlk/view?usp=sharing ) NOTE: the closing of the HTML and apex:page tags are NOT showing up, please add those yourself.

<apex:page setup="false" showHeader="false" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" name="andrew_test">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <head>

        <!-- SCRIPTS -->
        <script type="text/javascript" src="{!URLFOR($Resource.demoJS, '/js/jquery-2.1.1.js')}"></script>
        <script type="text/javascript" src="{!URLFOR($Resource.demoJS, '/js/jquery.metisMenu.js')}"></script>
        <script type="text/javascript" src="{!URLFOR($Resource.demoJS, '/js/jquery.slimscroll.js')}"></script>
        <script type="text/javascript" src="{!URLFOR($Resource.demoJS, '/js/bootstrap.min.js')}"></script>
        <script type="text/javascript" src="{!URLFOR($Resource.demoJS, '/js/inspinia.js')}"></script>


        <!-- METADATA -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <apex:stylesheet value="{!URLFOR($Resource.demoJS, '/js/bootstrap.min.css')}" />
        <apex:stylesheet value="{!URLFOR($Resource.demoJS, '/js/animate.css')}" />
        <apex:stylesheet value="{!URLFOR($Resource.demoJS, '/js/style.css')}" />


    </head>



    <body>

        <div id="wrapper">


            <nav id="navigation" class="navbar-default navbar-static-side" role="navigation">
                <div class="sidebar-collapse">
                    <ul class="nav metismenu" id="side-menu">
                        <li class="nav-header p-md">
                            <div class="dropdown profile-element"> 
                                <span>
                                    LOGO
                                </span>
                            </div>
                            <div class="logo-element"><!-- COLLAPSED LOGO -->
                                AMGEN
                            </div>
                        </li>
                        <li>
                            <a href="">Expandable</a>
                            <ul class="nav collapse">
                                <li><a href="">Child element</a></li>
                            </ul>
                        </li>
                        <!-- MENU GETS ADDED HERE BY browser-script and AssetHierarchyController -->
                    </ul>

                </div>
            </nav>

            <div class="gray-bg" id="page-wrapper">
                <div class="row border-bottom">
                    <nav class="navbar navbar-static-top ">
                        <div class="top-nav-wrapper">
                            top
                        </div>
                    </nav>
                </div>

                <div class="row wrapper border-bottom white-bg page-heading">
                    Top page heading
                </div>

                <div class="wrapper wrapper-content animated fadeInRight">

                   Main content

               </div>

            </div>

        </div>

    </body>

4
  • 1
    Can you create a simple VF page illustrating the problem and post code here? That way people can easily reproduce the problem and provide solution. Thanks!
    – javanoob
    Feb 2, 2017 at 23:36
  • Ok, question edited - it has a sample VF page, and I've made the .zip available so you can just upload it to static resources, and paste that code into a new VF page and you'll see the error
    – m0gul
    Feb 3, 2017 at 0:11
  • I am trying the code in my org and I see the error. But I am curious as what you are trying to do here? Do you want to display the Salesforce page below the Main Content or you think it is happening somehow? I am guessing that one of these js libraries is screwing up your page..
    – javanoob
    Feb 3, 2017 at 0:58
  • To be clear I do NOT want the standard Salesforce page under my custom VF page (who would, right?) - If you comment out either MetisMenu or Slimscroll, you'll see the standard SF page goes away, which technically FIXES the error. But the problem is: I need BOTH of the JS libraries on my page...
    – m0gul
    Feb 3, 2017 at 16:37

1 Answer 1

0

You can write code that uses more than one version of jQuery like this:

<script src=".../versionA/jquery.js"/>
<script>
(function($) {
    // $ in here is jQuery version A
    ...
})(jQuery.noConflict());
</script>

<script src=".../versionB/jquery.js"/>
<script>
(function($) {
    // $ in here is jQuery version B
    ...
})(jQuery.noConflict());
</script>

Add this at the bottom of your apex:page. You will need to hook the jQuery code up to elements in your page using class or Id selectors.

Don't use apex:includeScript as that generates the script tags in the head section.

3
  • Take a look at the edited version of my question I just posted - it has a sample VF page, and I've made the .zip available so you can just upload it to static resources, and paste that code into a new VF page and you'll see the error.
    – m0gul
    Feb 3, 2017 at 0:10
  • @m0gul OK I guess by "two specific jQuery includes" you don't mean two different versions of jQuery so ignore this answer.
    – Keith C
    Feb 3, 2017 at 0:15
  • Yeah, sorry - it was a bit unclear, my mistake!
    – m0gul
    Feb 3, 2017 at 0:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .