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:

Screen shot 2010-08-22 at 4.34.50 AM.jpg

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.

Was it helpful?

Solution 5

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! :)

OTHER TIPS

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.

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:

function mce_init_form(){
jQuery(document).ready( function($) {

My understanding of this isn't great but this re-assigns the default jquery $ variable.

However, later in the code there was this:

function mce_success_cb(resp){
$('#mce-success-response').hide()

which was tripping the mailchimp code up

I changed it to 

function mce_success_cb(resp){
jQuery(document).ready( function($) {
$('#mce-success-response').hide();

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.

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.

Try moving this code to right at the top (like immediately after <head> tag):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>jQuery.noConflict();</script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top