Prototype and jQuery

[Joseph O]

This has been tossed around the net in many variations yet none have
worked for me. I have done about ever work around for these two so
they will like each other and have reached a dead end. I need my image
fade menu to function with my flash driven lightbox. Please let me
know if this is something anyone can help with. Here are a few links
to reference.

This shows the menu working.
http://fabritechonline.com/content/awning_marquee.html

This shows the Lightbox Working.
http://fabritechonline.com/content/awning_marquee_test.html

This shows the jQuery / Prototype noConflict script in action.
(Prototype is disabled)
http://fabritechonline.com/content/awning_marquee_test_conflict.html

While the script allows jQuery to operate without Prototype loading,
it still does not function with both.

[T.J. Crowder]

Hi,

It's not clear what's wrong from your message or examples.

Fundamentally, if you want your first link to work when you add
Prototype to the page, just add the `noConflict` call *immediately*
after loading the jquery.js file and include the Prototype file, like
so:

<script src="../Scripts/jquery-1.2.6.js" type="text/javascript"
charset="utf-8"></script>
<script>jQuery.noConflict();</script>
<script src="../lightbox/js/prototype.js" type="text/javascript"></
script>

..and then change your two functions that look like this:

$(function () {
if ($.browser.msie && $.browser.version < 7) return;

// ...
});

...to look like this:

jQuery(function($) {
if ($.browser.msie && $.browser.version < 7) return;

// ...
});

Note that I've added `$` as an argument. jQuery passes a reference to
itself into `ready` handlers, and so you can use a local alias for it
and not have to change all your code. *Outside* of that `ready`
handler, `$` will refer to Prototype. (Or just use `jQuery` for jQuery
throughout the page, but for large scripts it can be convenient to use
the local alias.)

Example: http://jsbin.com/uqugo3

HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

On Mar 16, 6:36 pm, Joseph O <joeordo...@gmail.com> wrote:
> This has been tossed around the net in many variations yet none have
> worked for me. I have done about ever work around for these two so
> they will like each other and have reached a dead end. I need my image
> fade menu to function with my flash driven lightbox. Please let me
> know if this is something anyone can help with. Here are a few links
> to reference.
>

> This shows the menu working.http://fabritechonline.com/content/awning_marquee.html
>
> This shows the Lightbox Working.http://fabritechonline.com/content/awning_marquee_test.html

>
> This shows the jQuery / Prototype noConflict script in action.

> (Prototype is disabled)http://fabritechonline.com/content/awning_marquee_test_conflict.html

[Joseph O]

     Thank you for the reply. I worked on the repairing the code like you have shown and it does still allows prototype to take control when loaded. Could I still be missing something simple? 

     The three link examples I have shown are to see (1)  jQuery happy and working, (2) prototype doing it's thing, and (3) to show that the no.conflict script was still allowing jQuery to work but If pototype loaded at any point jQuery would stop. 

     I reposted the last link to reflect the suggested changes you made. jQuery still works until prototype is turned back on. 

    I have put a lot of work into both functions separately not knowing the conflict would exist. I have come to far to give up and truly could use further assistant. 

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[T.J. Crowder]

Hi,

That's very strange. I'm afraid the only real thing to do is to walk
through with a debugger. I got far enough to see that for whatever
reason, the jQuery code isn't finding the anchors to add the hover
spans to them, which is why they don't work, but I don't know why not.

It looks like you're using jQuery 1.2.6, which is very, very out of
date. The first thing I'd do is migrate to the latest. Then if the
problem persists, I'd walk through with a debugger.

If you like, you can hire me for a couple of hours to work it out for
you (my rates aren't completely unreasonable). Drop me a note
privately if you want to do that.

Good luck,

--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

[P.J.]

When using "$.noConflict();" you need to load Prototype before loading
jQuery. The <script> tag for Prototype literally needs to be above the
<script> tag for jQuery.

When using noConflict I find the most useful way of separating the two
libraries logically is to assign jQuery a new name.

For instance:

var $j = jQuery.noConflict();
// Do something with jQuery
$j("div p").hide();
// Do something with Prototype
$("content").hide();

I have a project called Modevious that specifically uses Prototype and
jQuery together (along with other plugins and components) and it
separates the two like so ($ for Prototype and $j for jQuery, and $c
for my own library).

When using Prototype $ works just as expected, but when using jQuery
you must use $j. jQuery plugin authors are usually good about
encapsulating their plugin so that even though their code may specify
$ jQuery does a good job working with that and they are accessible via
$j.

For instance Pines Notify is by default $.pnotify("Message"). But when
using Modevious or simply noConflict like above it is called by using
$j.pnotify("Message").

Hope that helps you use two wonderful libraries together.

On Mar 16, 1:36 pm, Joseph O <joeordo...@gmail.com> wrote:
> This has been tossed around the net in many variations yet none have
> worked for me. I have done about ever work around for these two so
> they will like each other and have reached a dead end. I need my image
> fade menu to function with my flash driven lightbox. Please let me
> know if this is something anyone can help with. Here are a few links
> to reference.
>

> This shows the menu working.http://fabritechonline.com/content/awning_marquee.html
>
> This shows the Lightbox Working.http://fabritechonline.com/content/awning_marquee_test.html

>
> This shows the jQuery / Prototype noConflict script in action.

> (Prototype is disabled)http://fabritechonline.com/content/awning_marquee_test_conflict.html

[T.J. Crowder]

On Mar 19, 8:17 pm, "P.J." <pjfontil...@gmail.com> wrote:
> When using "$.noConflict();" you need to load Prototype before loading
> jQuery. The <script> tag for Prototype literally needs to be above the
> <script> tag for jQuery.

No, you don't. The order doesn't matter, as long as if you load jQuery
first, you make the `noConflict` before you load Prototype, e.g.:

<script src='jquery.js'></script>
<script>jQuery.noConflict();</script>
<script src='prototype.js'></script>

Examples:
jQuery first: http://jsbin.com/acehi5
Prototype first: http://jsbin.com/acehi5/2

Those also demonstrate how you can keep using `$` within jQuery-
specific code without running into trouble using `$` elsewhere with
Prototype code. But you only want to do that with they won't be
intermixed; otherwise, best to stick to using the `jQuery` symbol or
(as you said) one you assign yourself by grabbing the return value of
`noConflict`.

Best,

--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

[P.J.]

On Mar 19, 3:53 pm, "T.J. Crowder" <t...@crowdersoftware.com> wrote:

> No, you don't. The order doesn't matter, as long as if you load jQuery
> first, you make the `noConflict` before you load Prototype, e.g.:
>
>     <script src='jquery.js'></script>
>     <script>jQuery.noConflict();</script>
>     <script src='prototype.js'></script>
>
> Examples:
> jQuery first:http://jsbin.com/acehi5
> Prototype first:http://jsbin.com/acehi5/2

Quite right. I retract my earlier statement.

Joseph, I'm getting similar results as T.J. did when tracking down the
anchors. Try to update to the latest jQuery stable release and
simplify your logic wherever you can. Good luck!

[kstubs]

I've read through the post, but need clarification on the no-conflict steps.  I have written an API using prototype.  I am now handing the code over to a jquery shop.  They do not want to change their use of $ symbol for jquery.  How can this be accomplished?

Thanks,

Karl..  

[greg]

I've also written an API in Prototype, and I know it will be used in
jQuery shops. I hope to not run into people not willing to make a few
easy search/replace changes. It would be nice if there was a way for
Prototype to not conflict.

[kstubs]

I don't think it is a matter of Prototype not conflicting with JQuery.  My understanding is they conflict with each other, all over the use of $ shortcut.  What I'm wondering is, how easy would it be in Prototype to compile a version which does not use the $ shortcut, so the fall back is the Element object.  Is the easy or hard, or not possible?

[Marc]

It's easy enough for the jQuery shop guys to use this pattern:

(function($) {
// jQuery stuff here
})(jQuery);

-- Marc

[T.J. Crowder]

Clarifying Marc's post, after doing jQuery.noConflict(), the jQuery
shop folks can continue to use $ for jQuery stuff if they shadow the
global symbol with a local one. The most common way to do that is to
use a function argument:

jQuery.noConflict();
(function($) {
// Here, $ = jQuery because $ resolves to the argument, so
$("div").css("color", "blue"); // Turns text in all divs blue

})(jQuery);
// Here, $ = Prototype because noConflict() was called, so
$$("div").invoke('setStyle', {color: "green"}); // Turns text in all
divs green

FWIW,

--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

[greg]

Would the following work?

jQuery.noConflict();
(function($) {
<script type="text/javascript" src="jQuerystuff.js"></script>
})(jQuery);

[kstubs]

Specifically:  How difficult would it be to remove $ from Prototype?  I like what you are suggesting T.J. but would like another option for the JQuery shop.

Karl..

[greg]

Wouldn't that be as easy as a search and replace of $( in
Prototype.js?
You could always trying changing $( to Proto( and give it a whirl.
But, any 3rd party stuff you have would need the same change.

[Jason]

You are mixing HTML (the <script> tag) and javascript (the rest)

however using a dynamic scripting language like PHP this would be
doable

ie

jQuery.noConflict();
(function($) {
<?php
include 'include_my_jquery_code';
?>
})(jQuery);

this is messy and I never like putting php tags in the middle of
javascript if I can help it

[kstubs]

We are trying exactly this and it seems to be working fine.