Mura 6.1 $ is undefined

Question

I use jquery v1.8 for my template and I am on Mura version 6.1, I get the above error when I try to load any page, it occurs at this line $.extend(window,mura);

Obvious thing is $ is not available for it to use, but I don't know what should I do to prevent that since this code is something that gets added in a script tag dynamically by mura in every page and is not some library file that I can adjust by loading after jQuery.

Detailed code is as follows which is in includes/display_objects/html_head/global.cfm

var mura={
loginURL:"#variables.loginURL#",
siteid:"#variables.$.event('siteID')#", 
siteID:"#variables.$.event('siteID')#", 
context:"#variables.$.globalConfig('context')#", 
jslib:"#variables.$.getJsLib()#",
assetpath:"#variables.$.siteConfig('assetPath')#",
themepath:"#variables.$.siteConfig('themeAssetPath')#",
htmlEditorType:"#variables.$.globalConfig('htmlEditorType')#",
rb:"#lcase(listFirst(variables.$.siteConfig('JavaLocale'),"_"))#",
#variables.$.siteConfig('JSDateKeyObjInc')#
}
$.extend(window,mura);

I do not wish to do any changes like replace $ with jQuery since the mura core files if customized and when upgraded won't keep the changes. I tried replacing $ with jQuery and it works but is there a way I can do something to avoid jQuery conflicts by customizing my template files or custom js file so I won't have to worry about what will happen if I upgrade Mura and those core files get overwrite.

are you loading jQuery before the file that tries to use it? — Wesley Smith, Mar 22 '15 at 16:39
Yes, that is exactly what is happening, but the issue is Mura adds that file code at the end of and before `` tag ends. Now there is other file which is being rendered by mura exactly before the `$.extend` code and that is `global.min.js` which gives me `jQuery` is undefined if I try to load `jquery.js` after the `$.extend` code. — user2067888, Mar 22 '15 at 16:50

score 0 · Answer 1 · answered Mar 22 '15 at 18:25

Try using an Immediately-Invoked Function Expression (IIFE) around your jQuery code like below, this will need to be done anywhere you use jQuery but it will ensure there is no conflict:

var $ ='blah'; // assign $ to something other than jQuery, like in your enviroment
try{
  alert( $('#test').val() ); // this would break as 'blah' doesnt have a .val() function
  }
catch(err){
  alert('$ is not jQuery in this scope');
  }

(function($) {
   // inside this scope $ will allways be jQuery, even if $ is something else out in the wild
   alert( $('#test').val()+'\n\n This works because $ is protected in this scope' );
    
})(jQuery); //pass jQuery in as the parameter of this IIFE 

// see http://stackoverflow.com/questions/11403266/understanding-vs-jquery-in-iife-instead-of

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" value="working"/>

score 0 · Answer 2 · answered Mar 23 '15 at 02:07

0

I've seen this happen when developers attempt to have their reference to jquery.js somewhere other than in the <head> portion of the document (e.g., before the closing </body> tag. So, make sure you have jQuery loaded in the <head> portion of your document. Yes, Mura will add its JS before the closing </head> tag, but as long as your reference to jquery.js is there, you shouldn't run into this issue.

If that's not the issue, then I would be interested in see either a link to where this is happening, or at least the fully rendered html of a page this is occurring on.

answered Mar 23 '15 at 02:07

Steve Withington

480
2
6

I've also seen this happen when you have jQuery loaded more than once in your page request. Check your source code and make sure there is only one instance of the jQuery library script. (jquery.min.js, etc) – m_evangelista Mar 23 '15 at 15:10
Thanks for the reply but I checked that first thing when I got jQuery conflict and it loads only 1 jQuery getting loaded as far as I can tell. I am going to update my question to show the page source. – user2067888 Mar 23 '15 at 15:29
I have added page source to help debug the issue. My jquery file is in the `html_head`. And I couldn't paste the `` source because of limited words. But all that didn't have any jQuery code. I pasted `` and `
`
– user2067888 Mar 23 '15 at 15:49
@user2067888, check your theme's contentRenderer.cfc and see if you have this line somewhere `this.jsLibLoaded = true;` and if not, add it. Also, if there's a public URL, I'd be happy to take a closer look there as well. – Steve Withington Mar 24 '15 at 15:34
Yup `this.jsLibLoaded = true` is there in the `contentRenderer.cfc` file. The site I am working on is not yet live, so there is no public URL as such. Is there any way you can debug it from above page source? – user2067888 Mar 24 '15 at 20:15
I can't see anything in particular based on the source code. However, we've made extensive changes to some of these things in v6.2 which was just released recently. Maybe if you update both your core and site files, this issue will resolve itself ... partly because we've removed the line of code causing you grief. – Steve Withington Mar 25 '15 at 18:43
Nice, Thanks for your inputs :) I will certainly try upgrading. – user2067888 Mar 28 '15 at 21:04

Mura 6.1 $ is undefined

2 Answers2