Receiving '$' is undefined when trying to create a CSS drop down menu

Question

I am trying to create a drop down menu on an HTML page using some CSS and JavaScript. The CSS seems to work fine but the JS returns a '$' is undefined. I'm not sure what I'm doing wrong here. I have this set up to open the web page when a button is clicked in the CRM 2011 ribbon. Currently it's set up to just run locally though.

HTML:

<html>
<header>
<link rel="stylesheet" type="text/css" href="OpportunityStyleSheet.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="createRecord.js"></script>  
</header>

<body>
    <h3>Select your Products</h3>

    <div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>

JS:

$('#cssmenu li.has-sub>a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp();
        }
    });

function createRecord() {
alert("Button Pressed");
}

The createRecord() function does work and shows the correct alert. Thanks for any help!

Error Message. Microsoft Dynamics CRM Error Report Contents

<CrmScriptErrorReport>
  <ReportVersion>1.0</ReportVersion>
  <ScriptErrorDetails>
   <Message>'$' is undefined</Message>
   <Line>6</Line>
   <URL>/_common/global.ashx?ver=66087337</URL>
   <PageURL>/userdefined/edit.aspx?etc=3&id=%7b515C22D0-7524-E311-8980-12A32B1E376A%7d&pagemode=iframe&preloadcache=1395165209284</PageURL>
   <Function>anonymous(container,scriptContent,id){if(IsNull(container))container=this.get_headElement();var$v_0=container.ownerDocument.createElement("script");container.appendChild($v_0);!isNullOrEmptyString(id)&&$v_0.setAttribute("id",id);$v_0.setAttribute("type","</Function>
   <CallStack>
    <Function>anonymous(container,scriptContent,id){if(IsNull(container))container=this.get_headElement();var$v_0=container.ownerDocument.createElement("script");container.appendChild($v_0);!isNullOrEmptyString(id)&&$v_0.setAttribute("id",id);$v_0.setAttribute("type","text/javascript");$v_0.text=scriptContent}</Function>
    <Function>anonymous(container,scriptFile){var$v_0=scriptFile.toString();if(this.$4W_1($v_0))return;var$v_1=this.fetchExternalFile($v_0);this.addIncludeInline(container,$v_1,$v_0)}</Function>
    <Function>anonymous(uri,useInlineScripts,scriptLoaded){if(uri.get_path().toUpperCase()==="/_STATIC/_COMMON/SCRIPTS/GLOBAL.JS")uri=Mscrm.CrmUri.create("/_common/global.ashx");if(useInlineScripts)Mscrm.CrmHeader.get_scriptLoader().addIncludeExternalSync(null,uri);elseMscrm.CrmHeader.get_scriptLoader().addIncludeExternalCallback(null,uri,scriptLoaded)}</Function>
    <Function>loadWebResourceScript(sScriptSrc,sId)</Function>
    <Function>LoadJsScripts()</Function>
    <Function>executeAction(action)</Function>
    <Function>anonymous(){executeAction(action);executeActionQueue()}</Function>
   </CallStack>
  </ScriptErrorDetails>
  <ClientInformation>
   <BrowserUserAgent>Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; BRI/2; BOIE9;ENUS)</BrowserUserAgent>
   <BrowserLanguage>en-us</BrowserLanguage>
   <SystemLanguage>en-us</SystemLanguage>
   <UserLanguage>en-us</UserLanguage>
   <ScreenResolution>1600x900</ScreenResolution>
   <ClientName>Outlook Laptop - Online</ClientName>
   <ClientTime>2014-03-18T11:53:30</ClientTime>
  </ClientInformation>
  <ServerInformation>
    <OrgLanguage>1033</OrgLanguage>
    <OrgCulture>1033</OrgCulture>
    <UserLanguage>1033</UserLanguage>
    <UserCulture>1033</UserCulture>
    <OrgID>{AACB118A-823E-4A12-BFCD-190E5E9BE731}</OrgID>
    <UserID>{E200F73B-57CC-E111-B35F-12A32B1E376A}</UserID>
    <CRMVersion>5.0.9690.3731</CRMVersion>
  </ServerInformation>
</CrmScriptErrorReport>

<CrmScriptErrorReport>
  <ReportVersion>1.0</ReportVersion>
  <ScriptErrorDetails>
   <Message>'$' is undefined</Message>
   <Line>6</Line>
   <URL>/_common/global.ashx?ver=66087337</URL>
   <PageURL>/userdefined/edit.aspx?etc=3&id=%7b515C22D0-7524-E311-8980-12A32B1E376A%7d&pagemode=iframe&preloadcache=1395165209284</PageURL>
   <Function>anonymous(container,scriptContent,id){if(IsNull(container))container=this.get_headElement();var$v_0=container.ownerDocument.createElement("script");container.appendChild($v_0);!isNullOrEmptyString(id)&&$v_0.setAttribute("id",id);$v_0.setAttribute("type","</Function>
   <CallStack>
    <Function>anonymous(container,scriptContent,id){if(IsNull(container))container=this.get_headElement();var$v_0=container.ownerDocument.createElement("script");container.appendChild($v_0);!isNullOrEmptyString(id)&&$v_0.setAttribute("id",id);$v_0.setAttribute("type","text/javascript");$v_0.text=scriptContent}</Function>
    <Function>anonymous(container,scriptFile){var$v_0=scriptFile.toString();if(this.$4W_1($v_0))return;var$v_1=this.fetchExternalFile($v_0);this.addIncludeInline(container,$v_1,$v_0)}</Function>
    <Function>anonymous(uri,useInlineScripts,scriptLoaded){if(uri.get_path().toUpperCase()==="/_STATIC/_COMMON/SCRIPTS/GLOBAL.JS")uri=Mscrm.CrmUri.create("/_common/global.ashx");if(useInlineScripts)Mscrm.CrmHeader.get_scriptLoader().addIncludeExternalSync(null,uri);elseMscrm.CrmHeader.get_scriptLoader().addIncludeExternalCallback(null,uri,scriptLoaded)}</Function>
    <Function>anonymous($p0,$p1,$p2,$p3){Mscrm.CrmHeader.setScriptFile(Mscrm.CrmUri.create($p1),true);for(var$v_0=window,$v_1=$p0.split("."),$v_2=0;$v_2<$v_1.length;$v_2++)if($v_0)$v_0=$v_0[$v_1[$v_2]];if(!IsNull($v_0)&&typeof$v_0===Mscrm.TypeNames.functionType){var$v_3=this.$CN_1($p2,$p3);return$v_0.apply(null,$v_3)}returnnull}</Function>
    <Function>anonymous($p0,$p1,$p2,$p3){var$v_0=this.getCommandDefinition($p0,$p1);if(IsNull($v_0)||IsNull($v_0.Actions))returnfalse;for(var$v_1=0;$v_1<$v_0.Actions.length;$v_1++){var$v_2=$v_0.Actions[$v_1];switch($v_2.ActionType){case2:this.$DF_1($v_2.Attributes);break;case3:var$v_3=$v_2.Attributes;this.$9z_1($v_3.FunctionName,$v_3.Library,$v_2.Parameters,$p2);break;case1:this.$DG_1($v_2.Attributes,$v_2.Parameters);break}}returntrue}</Function>
    <Function>anonymous($p0,$p1,$p2){var$v_0=this.parseCommandFromRibbon($p0),$v_1=this.$7w_1($v_0.command,$v_0.entityLogicalName,$p1,$p2),$v_2=$p1;if(!IsNull($v_2)&&!isNullOrEmptyString($v_2.PopulationXML)&&!$v_2.SuppressCommandIncludes){var$v_3=null;if($v_0.entityContext==="Form"){var$v_4=$find("crmFormSelector");if($v_4)$v_3=$v_4.get_currentFormId()}$v_2.PopulationXML=this.$Ep_1($v_2.PopulationXML,$v_0.entityLogicalName,$v_3)}return$v_1}</Function>
    <Function>anonymous($p0,$p1,$p2){if(this.$1w_1&&!this.$1w_1.$3m_1)returnthis.$1w_1.handleCommand($p0,$p1,$p2);returnfalse}</Function>
    <Function>anonymous(handler,commandId,properties,sequenceNumber){returnhandler.handleCommand(commandId,properties,sequenceNumber)}</Function>
    <Function>anonymous($p0,$p1,$p2){var$v_0=this.$2S_0[$p0];if(CUI.ScriptUtility.isNullOrUndefined($v_0))returnfalse;elseif(Array.isInstanceOfType($v_0)){for(var$v_1=$v_0,$v_2=false,$v_3=0;$v_3<$v_1.length;$v_3++){var$v_4=$v_1[$v_3];if(this.callCommandHandler($v_4,$p0,$p1,$p2))$v_2=true}return$v_2}elsereturnthis.callCommandHandler($v_0,$p0,$p1,$p2)}</Function>
    <Function>anonymous(commandId,properties){returnthis.$DE_0(commandId,properties,this.getNextSequenceNumber())}</Function>
    <Function>anonymous(commandId,properties,commandInfo,root){returnthis.$10_1.executeCommand(commandId,properties)}</Function>
    <Function>anonymous($p0){if(CUI.ScriptUtility.isNullOrUndefined($p0.$4_1))return;$p0.$7U_1=this.$DU_1();var$v_0=$p0.get_commandInfo();$v_0.CommandId=$p0.$4_1;$v_0.RootId=this.$4_0;$v_0.RootType=this.get_rootType();!CUI.ScriptUtility.isNullOrUndefined(this.$26_1)&&this.$26_1.executeRootCommand($p0.$4_1,$p0.$34_1,$v_0,this)}</Function>
    <Function>anonymous($p0){this.$7w_1($p0);returntrue}</Function>
    <Function>anonymous($p0){if($p0.$I_1!==11){$p0.get_commandInfo().RootLocation=$p0.$I_1===2?"UpperRibbon":"LowerRibbon";if($p0.$I_1===2){var$v_0=$p0.$34_1;$p0.get_commandInfo().TabId=$v_0.NewContextId}}returnCUI.Root.prototype.$2p_0.call(this,$p0)}</Function>
    <Function>anonymous($p0){this.$2p_0($p0)&&!CUI.ScriptUtility.isNullOrUndefined(this.$M_0)&&this.$M_0.$B0_0($p0);this.$Ao_0($p0)}</Function>
    <Function>anonymous($p0){this.$2p_0($p0)&&!CUI.ScriptUtility.isNullOrUndefined(this.$M_0)&&this.$M_0.$B0_0($p0);this.$Ao_0($p0)}</Function>
    <Function>anonymous($p0){this.$2p_0($p0)&&!CUI.ScriptUtility.isNullOrUndefined(this.$M_0)&&this.$M_0.$B0_0($p0);this.$Ao_0($p0)}</Function>
    <Function>anonymous($p0){this.$2p_0($p0)&&!CUI.ScriptUtility.isNullOrUndefined(this.$M_0)&&this.$M_0.$B0_0($p0);this.$Ao_0($p0)}</Function>
    <Function>anonymous($p0){this.$2p_0($p0)&&!CUI.ScriptUtility.isNullOrUndefined(this.$M_0)&&this.$M_0.$B0_0($p0);this.$Ao_0($p0)}</Function>
    <Function>anonymous($p0){this.$2p_0($p0)&&!CUI.ScriptUtility.isNullOrUndefined(this.$M_0)&&this.$M_0.$B0_0($p0);this.$Ao_0($p0)}</Function>
   </CallStack>
  </ScriptErrorDetails>
  <ClientInformation>
   <BrowserUserAgent>Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; BRI/2; BOIE9;ENUS)</BrowserUserAgent>
   <BrowserLanguage>en-us</BrowserLanguage>
   <SystemLanguage>en-us</SystemLanguage>
   <UserLanguage>en-us</UserLanguage>
   <ScreenResolution>1600x900</ScreenResolution>
   <ClientName>Outlook Laptop - Online</ClientName>
   <ClientTime>2014-03-18T11:53:33</ClientTime>
  </ClientInformation>
  <ServerInformation>
    <OrgLanguage>1033</OrgLanguage>
    <OrgCulture>1033</OrgCulture>
    <UserLanguage>1033</UserLanguage>
    <UserCulture>1033</UserCulture>
    <OrgID>{AACB118A-823E-4A12-BFCD-190E5E9BE731}</OrgID>
    <UserID>{E200F73B-57CC-E111-B35F-12A32B1E376A}</UserID>
    <CRMVersion>5.0.9690.3731</CRMVersion>
  </ServerInformation>
</CrmScriptErrorReport>

Did you google your issue? google.com/search?q=%27%24%27+is+undefined — Jason P
– Jason P, Commented Mar 18, 2014 at 17:18
How are you running the page? from a web server or from file://? - Also createRecord will work regardless, as it's vanilla Javascript. — Nick R
– Nick R, Commented Mar 18, 2014 at 17:21
Change the script src from //ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js to ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js — lshettyl
– lshettyl, Commented Mar 18, 2014 at 17:24
Yes I Googled my question first before posting this. I've tried all mentioned jscript library notations they all return the same issue. Here is the error message in greater detail. I am posting it in the original post since I can't fit in the comment. — Trevor
– Trevor, Commented Mar 18, 2014 at 17:56

Ashok Kumar Gupta · Accepted Answer · 2014-03-18 18:10:09Z

I think you just need to append http: while running locally, later it can be removed since "//" will prefix approx protocol.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

PS: Its always good to have head, meta, title tags mentioned in each document. Not related to above issue. this is clean and proper way of writing. :)

Your html document...as requested:

<html>
<head>
<link rel="stylesheet" type="text/css" href="OpportunityStyleSheet.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="createRecord.js"></script>  

</head>

<body>
<h3>Select your Products</h3>

<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
  <ul>
     <li class='has-sub'><a href='#'><span>Product 1</span></a>
        <ul>
           <li><a href='#'><span>Sub Item</span></a></li>
           <li class='last'><a href='#'><span>Sub Item</span></a></li>
        </ul>
     </li>
     <li class='has-sub'><a href='#'><span>Product 2</span></a>
        <ul>
           <li><a href='#'><span>Sub Item</span></a></li>
           <li class='last'><a href='#'><span>Sub Item</span></a></li>
        </ul>
     </li>
  </ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<script type="text/javascript">
$('#cssmenu li.has-sub>a').on('click', function(){
    $(this).removeAttr('href');
    var element = $(this).parent('li');
    if (element.hasClass('open')) {
        element.removeClass('open');
        element.find('li').removeClass('open');
        element.find('ul').slideUp();
    }
    else {
        element.addClass('open');
        element.children('ul').slideDown();
        element.siblings('li').children('ul').slideUp();
        element.siblings('li').removeClass('open');
        element.siblings('li').find('li').removeClass('open');
        element.siblings('li').find('ul').slideUp();
    }
});
function createRecord() {
alert("Button Pressed");
}
</script>
</body>
</html>

Cheers,

Ashok

Hey thanks for your response. I will keep the tags comment in mind. I have tried referencing the jscript library many different ways. I receive the same error back each time. I posted the full message in the original post. Thanks for your help. I change out all the css and jscript references for the "crmserver" references. One of which is a jquery that does work on other web resources I have running in the CRM.

Community · Accepted Answer · 2017-05-23 11:49:47Z

0

It looks like you don't have the proper JQuery library loaded. Please provide us with full head section.

Take a look at this topic: JavaScript runtime error: '$' is undefined for similar problem.

Added: I can see the head section now - "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" is not the proper library url - add http: to it.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Mar 18, 2014 at 17:21

Bizley

18.1k6 gold badges53 silver badges62 bronze badges

3 Comments

Nick R Over a year ago

// means protocol relative/agnostic, so will work on http and https, but won't work when you run it directly from the file:// protocol.

user400654 Over a year ago

The fix will solve the problem, but the explanation is not correct. "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" is the proper url, assuming you run your code from a webserver (which you should always do)

Trevor Over a year ago

Hello, and thanks for your reply. I actually did see that question you posted the link to prior to asking this question. It returns the same error message.

Trevor · Accepted Answer · 2014-03-18 18:41:08Z

0

I was able to solve this issue. The jscript library needs to be called twice basically. Once in the html file (like you all suggested above) and again on the CRM entity that the function is running off of. I didn't think this needed to happen because nothing was being called until the button was clicked that called the function to show the webpage. However, apparently I was wrong.

Thank you everyone for your help and comments.

answered Mar 18, 2014 at 18:41

Trevor

3212 gold badges7 silver badges21 bronze badges

Collectives™ on Stack Overflow

Receiving '$' is undefined when trying to create a CSS drop down menu

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related