quickedit/mootools-jquery conflict

6 Posts

grabovacb Reply #1, 15 years, 2 months ago

Not sure this topic belongs here, and i know this question is already answered somewhere but i cant seem to find out where...
So, i need to import jquery lib, wich i have done, and it works just fine as long as im not signed in in the back end. If i am signed in jq isnt loaded due to mootools being loaded with qe. I dont want to disable/delete quickedit. Ive read that there is some kind of quick fix for this problem. Any help will be greatly appreciated.

MODX Staff
1,535 Posts

Garry Nutting Reply #2, 15 years, 2 months ago

If you’re using jQuery on the frontend then use the noConflict mode to assign jQuery to use a different reference (instead of the $ reference used by mootools).

To use the noConflict mode, place this in your JS code before you call any of the jQuery functions:

jQuery.noConflict();

And then, in your jQuery code, replace any references to $() with jQuery(). More information here: http://docs.jquery.com/Core/jQuery.noConflict

Garry Nutting
Senior Developer
MODX, LLC

Email: [email protected]
Twitter: @garryn
Web: modx.com

1,161 Posts

Photowebmax Reply #3, 15 years, 2 months ago

The conflict will only be an issue when you are logged into the Manager though.

The viewing public will not be aware of the issue...

6 Posts

grabovacb Reply #4, 15 years, 2 months ago

Thank you very much, works like a charm. I’ve noticed that it worked without me being signed in as i stated in the previous post. Again, thanks.

11 Posts

whodaman Reply #5, 14 years, 10 months ago

this fix worked for me thanks! grin

9 Posts

Sajonara Reply #6, 14 years, 8 months ago

So I downloaded 1.0. Before I was on 0.9.6.3. It was Quick Edit in those days, now it’s Quick Manager that is making some problems, because I am using css dock menu.

I am not really sure on how to do this? I tried to change the code but nothing happened, hence I think I placed the things at the wrong place. My <head> ist loading jquery and interface.js like that:

<head>
<title>[(site_name)] - [*pagetitle*]</title>
<meta http-equiv="Content-type" content="text/html; charset=[(modx_charset)]" />
<meta name="keywords" content="[*Schlagworte*]" />
<!-- add your meta tags here -->

<link href="[(base_url)]assets/templates/alext/css/alext.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="[(base_url)]assets/templates/alext/css/patches/alext_patches.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 div, img { behavior: url(assets/templates/alext/css/patches/iepngfix.htc) }
 </style>
<![endif]-->
<script type="text/javascript" src="[(base_url)]assets/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="[(base_url)]assets/js/interface.js"></script>
</head>

Then in the beginning of the <body> there is the actual javascript for the menu.

<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)
		}
	);

</script>

So my first try was like that: I added the jQuery.noConflict at the body-js code before the first $... came into play. Then I changed both of the $ into jQuery. I reloaded the page - nothing changed. Then I opened the interface.js and put the noConflict ontop. Again nothing changed. As well I played around a bit with the options of the QM-Plugin that is to say I changed the point when to load QM and tried reloading. Well nothing happened.

I now have undone every changes and started to ask you guys as I am some kind of a N00b to js. It’d be nice if someone can tell me how I get both QM and css dock menu (the fisheye thing) up and running.

Kind regards in advance for any hints.

Alexander

2 Posts

J3R Reply #7, 14 years, 8 months ago

I was looking for this solution! Although it took me quite some time to find out the problem was caused by the quickedit module...

Thanx for the fix! grin

Jer

1 Posts

jQueryNinja Reply #8, 14 years, 8 months ago

Quote from: garryn at Feb 13, 2009, 06:07 PM

...
And then, in your jQuery code, replace any references to $() with jQuery(). ...

Actually there is more elegant and easier way to use $ without overwriting all you $()’s to jQuery(). You need to put your javascript code in closure like it’s explained in this post about jQuery.noConflict():

function($){
  // here comes the code that uses $
}(jQuery);

☆ A M B ☆
536 Posts

Last Of The Romans Reply #9, 14 years, 7 months ago

Quote from: jQueryNinja at Aug 17, 2009, 12:28 PM

Quote from: garryn at Feb 13, 2009, 06:07 PM

...
And then, in your jQuery code, replace any references to $() with jQuery(). ...

Actually there is more elegant and easier way to use $ without overwriting all you $()’s to jQuery(). You need to put your javascript code in closure like it’s explained in this post about jQuery.noConflict():
function($){
  // here comes the code that uses $
}(jQuery);

i now this post is old i have no new information’s but i try jQuery in NO CONFLICT mode in second method...

jQuery(document).ready(function($){
    $("div").hide();
});

and work beautiful!

10x jQueryNinja

palma non sine pulvere