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.
I had no luck with any of the above solutions, probably because the last answer is more than a year old and doesn't reflect the current mailchimp code anymore.
To solve my jQuery conflicts, I copied the
mc-validate.js
script that MailChimp serves from http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js and put it on our own server. Then I beautified it and removed the jquery code from the file. That way, now there is only our version of jquery left on our server and nothing con conflict anymore.As it looks, you will also not need the line
var $mcj = jQuery.noConflict(true);
anymore.@mailchimp: a great solution for this problem would be if you could just provide a different version of the code on your amazon servers, that doesn't include jquery.
Or you can simply just rename this variable in the mailChimp.js:
to
Don't know why the MailChimp developers decided to rewrite the dollar-sign with a method.
Using jquery 1.8.1 and the latest mailchimp code as of 28th may 2013
I couldn't find the above comment to uncomment it.
I could however see this mailchimp code:
My understanding of this isn't great but this re-assigns the default jquery $ variable.
However, later in the code there was this:
which was tripping the mailchimp code up
I changed it to
and it works. Not quite sure why (and would love an explanation!) but thought I'd post as someone might come across this question in the same way as I did.
Try moving this code to right at the top (like immediately after
<head>
tag):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
Remove the comment so that it looks like this
and then you should be good to go! :)