views:

420

answers:

5

I have a Magento site, which includes the prototype JavaScript library.

Some time ago, I added jQuery as well.

Before that however, I'd included a prototype based Lightbox. It was triggered by adding the attribute rel="lightbox[gallery]".

Now I'd like to make a lightbox appear on page load. I know nothing about prototype, so I tried creating a hidden link with jQuery and then calling $('#special').click() but to no avail. If I actually click the link however, it works fine.

So does jQuery's click() only trigger events that jQuery has binded? If so, how could I call the click event or trigger the lightbox in prototype?

UPDATE

Sorry, should of cleared some things up.

All my jQuery code is in a function like so

jQuery.noConflict();
jQuery(function($) {
 // Now I can use $ in here... :)

});

ANOTHER UPDATE

I've also thought about it, and does a framework being called prototype mean that it adds extra functionality via the prototype property? This could very well be the cause of problems. And IIRC, jQuery does for (i in obj) {} in places which may be accessing more than it'd like to (up the prototype chain).

A: 
  1. use "jQuery" instead of "$". Function $ is defined in both Prototype and jQuery. it is possible you're trying to call "click()" method on Prototype-selected object, which may not work ( I don't know prototype at all, except that it defines "$" function as well) ( note: please have a look at http://docs.jquery.com/Using_jQuery_with_Other_Libraries )

  2. This does not exactly answer your question, but why don't you use lightbox for jQuery? ;) http://leandrovieira.com/projects/jquery/lightbox/

migajek
See update. Also, for 2, I've already implemented the Prototype lightbox throughout the site. I want to stick with it (for now).
alex
A: 

When using jquery, try using jQuery noconflict so that by default $ refers to protoype and using jQuery when you want to use jQuery. To be honest in my experience when ever I added two frameworks and tried to make them work together it's always a problem and almost near hell. What special are you trying to achieve using jQuery in a project made with prototype?

Teja Kantamneni
I am taking care of conflicts. I included jQuery as well, because I know jQuery, and wanted to get something done (as opposed to learning prototype for one small project)
alex
I can only back up the one-framework advice. Even with `noconflict` there are loads of confusing little incompatibilities and edge cases.
bobince
+1  A: 

So does jQuery's click() only trigger events that jQuery has binded?

It will also trigger events bound via old-style onEventName attributes. But it won't trigger events bound via addEventListener() or attachEvent() (which, AFAIK, are what Prototype uses to bind events...)

However, you can simulate an actual click event. It'll just take a bit more effort...

See: How can I simulate a click to an anchor tag?

See also: Trigger an event with Prototype

Shog9
I tried doing this (re: prototype custom click) but did not work `var p = $; p('special').simulate(`click`);`
alex
@alex: didn't do anything, or produced an error?
Shog9
Produced an error. `simulate` not a method of $. I placed the `var p` above the `jQuery.noConflict()` so I could hopefully still reference prototype from inside the `jQuery(function($) { });`.
alex
@alex: Oh... Well, then you probably need to include the event.simulate.js linked to in that second question. ;-) That or just use the script in the first question.
Shog9
Sorry, yeah I did do that. I'm just gonna take a break from it for a while. Thanks for your help.
alex
A: 

To use $ as you ask, do this:

jQuery(function() {
  (function($) {
    //
    // your initialization code goes in here
    // and you can use '$' safely as the name
    // of the jQuery object, even though
    // window.$ is something else
    //
  })(jQuery);
});
Pointy
Not necessary - please see: http://api.jquery.com/jQuery/#jQuery3
Shog9
Ah you mean the double-wrapping? Yes OK, jQuery passes in the jQuery object so it's cool.
Pointy
jQuery passes it as the first parameter to the callback, so the way alex is doing it now is fine.
Shog9
A: 

very very easy solution is to append $j = jQuery.noConflict at the end of the jquery source file. then globally you can just use $j and not have to worry about wrapping functions

Matt
Well, when passing $ as an argument like `jQuery(function($) { })`, it means the same thing. Plus I don't have to break habit of using $.
alex
right but then you are required everytime you use it to wrap...if you use a lot of jquery then it just saves some time in writing scripts.in my last implementation it is all jquery minus native magento js, so it probably saved a 1000 lines of code by doing it as such. It is by no means the end all solution because there are plenty of ways to do things, just a way to save on some lines of code and make the separation of libraries easily visible.
Matt
I only use it once in this scenario though. But if I was using it throughout the site extensively, I probably would bind the jQuery object to a new variable as suggested by you.
alex