Mailchimp's $mcj = jQuery.noConflict(true) causing conflict

Question

I am trying to integrate MailChimps' standard html form into my website. However, my site has some jquery code that is running into problems with MailChimp's code.

The following code is part of the MailChimp embedded form:

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-  validate.js'></script>
<script type='text/javascript'>
(function($) {
window.fnames = new Array(); window.ftypes = new   Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';
}(jQuery));
var $mcj = jQuery.noConflict(true);
</script>

The '....mailchimp.com/js/mc-validate.js' conflicted with my Google API for jquery so I took out mailchimp's jquery activation.

My questions are:

1. Do I have to have the mailchimp /mc-validate.js line in my .html code to run the form or can I rely on

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'> </script>?

2. If I do remove the native mailchimp jquery line and rely on the googleapi line, I run into problems with the $mcj=jQuery.noConflict(true) code.

Basic question is: Has anyone had experience with integrating Mail Chimp into their website and run into these type of issues with jQuery?

Looking forward to your answers.

Answer 1

I know its been 3 months since you asked this but in case anyone else has the same problem heres an explanation.

In response to the comment below i have created a simple html example containing the version of jquery specified and the classic mailchimp form. As you can see there are no errors thrown. (http://thepixel.ninja/lab/mailchimp-signup-form/).

The error you are receiving is most likely the cause of some other script on the page. Its impossible to say without more information from you though.

Here is a breakdown of some simple fixes if you dont know much about debugging and an explanation of what may be happening.

1. Do I have to have the mailchimp /mc-validate.js line in my .html code to run the form or can I rely on

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'>?

These are two different scripts. One is jQuery its self and one is the mailchimp validation code. You dont need the /mc-validate.js line if you done require js validation from mailchimp. If this is the cast then follow the instructions below. Dont just remove this line and hope all will be ok.

NB. If you don't require the validation code then you can tick the "disable all JavaScript" checkbox when you are creating the form on the mailchimp website. This will eliminate all js errors. (You can also choose "naked form" instead of "classic form" and then style the form with css to look however you want).

2. If I do remove the native mailchimp jquery line and rely on the googleapi line, I run into problems with the $mcj=jQuery.noConflict(true) code.

As stated above. They are two different scripts. You cant remove one and rely on the other as they do completely different things.

All that being said, the mailchimp script should not conflict with jquery in any way. I have used the mailchimp form and jquery hundreds of times and never once had an issue. (see the link above) The issue may have occured if you edited the mailchimp html snippet supplied to you in any way or if you have other errors in other javascript you are including on the page.

Hope this helps someone figure out problems they are encountering by process of elimination.

Answer 2

So, if you're like me you may not need Mailchimp on every page. This example assumes you're loading it when needed through jQuery, but the idea still applies to loading it inline with the page load:

var tmp = jQuery.noConflict(); //This jQuery is the one we want

            jQuery.getScript("//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js", function(){
                (function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='CGROUP';ftypes[3]='dropdown';}(jQuery));

              //Let mailchimp set its own jQuery, destroying window.jQuery
                var $mcj = jQuery.noConflict(true);

              //Now, restore the copy of jQuery we saved
                window.jQuery = tmp.noConflict();

             //At this point, things should be as they were before we loaded mailchimp

            });

To answer some other users' questions, the reason they have the line there is that Mailchimp is expecting a specific version of jQuery (1.9.0 as of right now). Also, let's say, in your example, we're using the easing plugin. This modifies window.jQuery, however Mailchimp loads a different version of jQuery, which won't have any of the plugins you've been adding on to the page. I believe their initial thinking was that everyone would load their script first (which is an acceptable alternative solution). However, the issue with that approach is we know from best practices that JS from an external site should be loaded last, not first

Answer 3

you can simply use this lien of code in your program

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-  validate.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript'>
(function($) {
   window.fnames = new Array(); 
   window.ftypes = new Array();
   fnames[0]= 'EMAIL';ftypes[0]='email'; 
   fnames[1]='FNAME';ftypes[1]='text';  
   fnames[2]='LNAME';ftypes[2]='text';
   }());
   var $mcj = $.noConflict(true);
 </script>

Answer 4

If your application includes its own version of jQuery, and your jQuery script tag is included before MailChimp's mc-validate.js script, then MailChimp's included version of jQuery (v1.9.0 at the time of this writing) will conflict with your existing jQuery object and cause problems.

Since I didn't want to rework the script inclusion order for my application, the simplest solution for me was to backup my existing jQuery object, then include the MailChimp scripts, and then revert the jQuery object:

<!-- Backup our jQuery object -->
<script type='text/javascript'>
    var jQueryBackup = jQuery.noConflict();
</script>

<!-- Include MailChimp scripts -->
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>(function($) {window.fnames = new Array();  /* Etc. This will be specific to your MailChimp form */ }(jQuery));var $mcj = jQuery.noConflict(true);</script>

<!-- Restore our jQuery object -->
<script type='text/javascript'>
    window.jQuery = jQueryBackup;
</script>

Note: The middle section with the two MailChimp script tags will be unique to your embedded form, so don't copy and paste that part above. Use the scripts provided to you by MailChimp as-is for that section.