Question

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?

Was it helpful?

Solution

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

OTHER TIPS

  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/

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?

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);
});

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top