3

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.

All my jQuery code is in a function like so

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

});

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?

Improve this question
2
  • 1
    check if you're not having conflicts because of the $() shortcut Commented Feb 15, 2010 at 0:14
  • Regarding the last edit: AFAIK, prototype.js used to do some dodgy stuff like that (modifying Object.prototype), but I'm fairly certain they've dropped that brain-damage by now. Commented Feb 15, 2010 at 1:52

5 Answers 5

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I tried doing this (re: prototype custom click) but did not work var p = $; p('special').simulate(click);
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: 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.
Sorry, yeah I did do that. I'm just gonna take a break from it for a while. Thanks for your help.
0

  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/

Improve this answer

1 Comment

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

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?

Improve this answer

2 Comments

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)
I can only back up the one-framework advice. Even with noconflict there are loads of confusing little incompatibilities and edge cases.
0

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);
});
Improve this answer

2 Comments

Ah you mean the double-wrapping? Yes OK, jQuery passes in the jQuery object so it's cool.
jQuery passes it as the first parameter to the callback, so the way alex is doing it now is fine.
0

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

Improve this answer

3 Comments

Well, when passing $ as an argument like jQuery(function($) { }), it means the same thing. Plus I don't have to break habit of using $.
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.
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.