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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
alex
  • 479,566
  • 201
  • 878
  • 984
  • 1
    check if you're not having conflicts because of the $() shortcut – fmsf Feb 15 '10 at 00: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. – Shog9 Feb 15 '10 at 01:52

5 Answers5

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

Community
  • 1
  • 1
Shog9
  • 156,901
  • 35
  • 231
  • 235
  • I tried doing this (re: prototype custom click) but did not work `var p = $; p('special').simulate(`click`);` – alex Feb 15 '10 at 00:43
  • 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 Feb 15 '10 at 01:32
  • @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 Feb 15 '10 at 01:55
  • Sorry, yeah I did do that. I'm just gonna take a break from it for a while. Thanks for your help. – alex Feb 15 '10 at 02:05
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/

migajek
  • 8,524
  • 15
  • 77
  • 116
  • See update. Also, for 2, I've already implemented the Prototype lightbox throughout the site. I want to stick with it (for now). – alex Feb 15 '10 at 00:19
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?

Teja Kantamneni
  • 17,402
  • 12
  • 56
  • 86
  • 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 Feb 15 '10 at 00:27
  • I can only back up the one-framework advice. Even with `noconflict` there are loads of confusing little incompatibilities and edge cases. – bobince Feb 15 '10 at 01:02
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);
});
Pointy
  • 405,095
  • 59
  • 585
  • 614
  • Ah you mean the double-wrapping? Yes OK, jQuery passes in the jQuery object so it's cool. – Pointy Feb 15 '10 at 01:41
  • jQuery passes it as the first parameter to the callback, so the way alex is doing it now is fine. – Shog9 Feb 15 '10 at 01:53
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

Matt
  • 89
  • 1
  • 4
  • 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 Feb 20 '10 at 12:51
  • 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 Feb 20 '10 at 17:57
  • 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 Feb 20 '10 at 23:08