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>

  • 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 '17 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 '17 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 '17 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 '17 at 16:37
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.

| improve this answer | |
  • 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 '17 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 '17 at 0:15
  • Yeah, sorry - it was a bit unclear, my mistake! – m0gul Feb 3 '17 at 0:34

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.