Posts

Magento – jQuery clash with testimonials, prototype.js & showcase

/1 Comment/in /by

If you use testimonials on magento and then place them onto a page that contains the prototype extension showcase, you may notice that both the testimonial and showcase animation stops working, and that an absolute snow of javascript errors are generated.

 

If this is happens to you, it may be caused by a jQuery library conflict. The testimonials PHP template directly includes jQuery and this may clash with the prototype library, we found that we could resolve the library conflict by placing good old:

 


jQuery.noConflict();

 

In the file testimonial_advance.phtml just before document/ready, like this…

 

[code]

jQuery.noConflict();

 

jQuery(document).ready(function() {
….
}

[/code]

 

Adding this solved the problem for us.

 

testimonial_advance.phtml should be found in this folder:

 

app/design/frontend/default/default/template/testimonial

 

However, it is not good magento practice to alter this version of the file, instead you should create a testimonials folder under:

 

app/design/frontend/default/[your folder]/template/

 

Then copy testimonial_advance.phtml to this folder and edit it there. Remember to clear the magento cache when testing changes!

IE8 / .change() jQuery event not firing

/6 Comments/in /by

This one catches me out time after time and I always forget how to get around it – so I am writing it down this time. Developing software to run well on multiple browsers is actually not that difficult until, that is, good old IE is thrown into the mix! ;-)

 

The problem is that in Internet Explorer, the .change() event on radio buttons doesn’t get fired properly, or at least it doesn’t behave the same was as it does in the other browsers – it’s a real pain!

 

There is however a relatively easy way to get around the problem, that is to handle the radio’s .click() event, and then, just .blur() and .focus() the radio control – this will cause the change() event to be fired:

 
$(document).ready(function() {
  $('#my-radio-container input:radio').click(function () {
        // Cause the change() event
        // to be fired in IE8 et. al.
        this.blur();
        this.focus();
   });
  $('#my-radio-container input:radio').change(function() {
    // Handle .change() event as normal....
  });
});
 

Remember to replace #my-radio-container with an appropriate selector for your HTML.

 

I am not sure why it works exactly….. but it works well for me!