MailChimp jQuery Conflict

Question

I've been having the most AWFUL time integrating MailChimp into a site I'm designing!

The problem is that validation is not working for the embedded subscribe form. Instead of inlining error messages, the form is kicking the user over to the MailChimp signup page to correct errors or confirm list opt in.

I've done a heavy amount of customization to the code, so unfortunately going back to the default is not an option.

Here are the errors I'm getting, but I'm a JS n00b so I don't know what they mean:

Break on Error mce_jQuery is not defined:

I don't think it's an error that can be caught with the console though.

The weird thing is this. If I rip out the custom code and just post the static code from MailChimp it somehow works, but I've copied all the relevant code with important functions and still no dice.

You can view the site live at: http://ranya.net/wp/contact

The MailChimp list signup is in the top right corner sliding dropdown. The relevant scripts are embedded just after div#top_mailing.

Answer 1

Or you can simply just rename this variable in the mailChimp.js:

var mce_jQuery = jQuery.noConflict();

to

var mce_jQuery = jQuery;

Don't know why the MailChimp developers decided to rewrite the dollar-sign with a method.

Answer 2

Alec Smart's answer was ALMOST correct. By running jQuery in NoConflict mode the issue was resolved. Alec suggested that I add jQuery.noConflict(); in the header of the document. It turns out that there is a line in the MailChimp embed code that is commented out. In order to properly enable the noConflict mode for the MailChimp script search for

 //var mce_jQuery = jQuery.noConflict();

Remove the comment so that it looks like this

 var mce_jQuery = jQuery.noConflict();

and then you should be good to go! :)