Re: How to use noConflict to get JQuery and Ajax (Wonder) working together?
Re: How to use noConflict to get JQuery and Ajax (Wonder) working together?
- Subject: Re: How to use noConflict to get JQuery and Ajax (Wonder) working together?
- From: David BON <email@hidden>
- Date: Thu, 05 Aug 2010 22:41:36 +0000
Just my 2 cts for the next newbie like me: I try to summarize the
solution that work for me and seems quite easy (thanks to Faruk, Mike
and Timo).
In my javascript directory (under WebserverResources), I created a
jquery-noconflict directory and a jquery directory. In this last one,
I put the latest jquery source files I need.
For every source file using jquery (e.g. splitter.js) I create in
that directory a file with the same name with the following lines:
;jQuery.noConflict()(function() {
include('../jquery/splitter.js');
});
In the <head> section of my pageWrapper.wo I put:
<wo:ERXJavaScript framework = "app" filename = "JavaScript/jquery/
jquery.js" />
<wo:ERXJavaScript framework = "app" filename = "JavaScript/jquery-
noconflict/splitter.js" />
(NB: It loads before any other library like prototype.js that comes
with Ajax)
And in the component where I need to use jquery I use the explicit
call to jquery like in:
// Use jQuery via jQuery(...)
jQuery().ready(function() {
// Vertical splitter. Set min/max/starting sizes for the left pane.
jQuery("#Mysplitter'').splitter({
splitVertical: true,
outline: true,
sizeLeft: true,
anchorToWindow: true,
accessKey: "I"
});
Work like a charm for me.
Regards.
David B.
Le 5 août 10 à 08:56, Timo Hoepfner a écrit :
Hi David,
Am 05.08.2010 um 01:10 schrieb David BON:
I read on this link: Using jQuery with Other Libraries that I have
to insert in the <head> section the noConflict() function:
I've used a different approach mentioned on the same page once:
Load jQuery before prototype and then wrap jquery code into jQuery
(function($){...});
In the PageWrapper's head section:
<!-- load jquery -->
<wo:ERXJavaScript framework = "app" filename = "jquery/
jquery-1.4.2.min.js" />
<!-- Load prototype after jquery, this replaces the definition
of the $ function with the prototype one -->
<wo:ERXJavaScript framework = "Ajax" filename = "prototype.js" />
And then in the component:
<script type = "text/javascript">
jQuery(function($){
// $ is jQuery's $ here, not Prototype's. Do some jQuery stuff
here.
});
</script>
This will probably only work, if the third party jQuery library you
are using is built cleanly. In my case it was the date picker from
jQuery UI and it worked fine. I'd still be careful when mixing
different JS libraries though...
Timo
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (email@hidden)
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden