Jquery Conflict between Mega-Menu and MailChimp form

Hello Community!
Here’s a conundrum… I have two elements that I need on a page that just won’t play nice with each other: a mega-menu (required for the main site navigation) and a simple mailchimp signup form (in the footer).

See them both on this page here:

https://cms.ucd.ie/geary2020/research/

The problem is that the mailchimp form (in the footer) won’t accept submissions unless the following line is removed:

<script>var plugin_path = '/t4cms/';</script>

This code is however is needed by the mega-menu, so I have to keep it there.

If I remove the above line - then the mailchimp form will accept submissions BUT the mega-menu is boken!

I have tried reordering the sequence of the .js files - that didn’t work.

Also, I have downloaded and stored locally the mailchimp js file: mc-validate-geary.js - so I can make any suggested edits directly in this file. I suspect the solution will be found by editing this file.

Any advice much appreciated!

Let’s try and resolve issues as they appear then.

When attempting to signup, the browser console tells me:
POST https://cms.ucd.ie/geary2020/research/php/mailchimp-action.php 404 (Not Found)

Hi Paul,
Thanks for your reply. Yes, I see that in Console too. I think the reason that is happening is due to the presence of that line of code (plugin_path) I cited in my original post. This line appears to be confusing the Mailchimp widget to look locally for the mailchimp-action.php file.

Unfortunately I need to keep this code in order to get the mega-menu to work.

Sometimes, multiple scripts on a page can block one another from working correctly. Check that too.

@bencwalkerbw93 Thanks for the reply. I think I have identified the problem - in that if I add/remove the line of code in my original post then then either the menu or the mailchimp works. The challenge is to figure out how to have both work at the same time.

Do any of the other scripts include a variable with the name plugin_path?

@Gandalf @Paul_Wilkins
Thank you for your replies. It turns out there was ANOTHER reference to mailchimp js elsewhere that was causing the conflict. Through analysing the error via console I was able to locate it.

1 Like

The cause of the problem is in the following line, in the jquery library

f (s.open(t.type, t.url, t.async, t.username, t.password), t.xhrFields)

t.url is where the difference occurs.

Understanding why that occurs is next. The t variable is from a closure, when w.ajaxTransport is called.
I can’t do this with minified jQuery anymore. It’s time to use the <base> keyword to run code as if it was on your own website.

<base href="https://cms.ucd.ie/geary2020/research/">
...
<!-- webste_jquery-3.3.1.min.js / 413892 -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

That’s better.

Now with the uncompressed jQuery the error stems from line 9490, which is the options.url parameter

				xhr.open(
					options.type,
					options.url,
					options.async,
					options.username,
					options.password
				);

The options are received when the jQuery ajaxTransport command is executed. Here is the definition of the ajaxTransport command.

jQuery.ajaxTransport( function( options ) {

The options come from line 8609:

			var dataTypeOrTransport = prefilterOrFactory( options, originalOptions, jqXHR );

Where we find originalOptions which also contains the host url.

That comes from line 8599:

// Base inspection function for prefilters and transports
function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR ) {

Which come as options on line 9077

		// Apply prefilters
		inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );

Where do those options come from?

The subscribe button has several event handlers associated with it, one being from webste_custom.js

              $.ajax({
                 type: 'POST',
                 url: 'php/mailchimp-action.php',
                 data: {url:url},
                 dataType: 'json',
                 success: function(data){
                      $('#msg').html(data);           
                 },

That is where the mailchimp url is coming from. Mailchimp is correctly doing what it should be doing, and is taking over the form submit event.

When plugin_path is enabled, you an error of:

jquery-3.3.1.js:3827 Uncaught TypeError: POTENZA.mailchimp is not a function
    at HTMLDocument.<anonymous> (webste_custom_geary.js:1022)

That code among other things tries to run mailchimp, but it doesn’t exist.

 //Document ready functions
    $document.ready(function () {
        POTENZA.megaMenu(),
        POTENZA.counters(),
        POTENZA.accordion(),
        POTENZA.carousel(),
        POTENZA.mailchimp(),
        POTENZA.contactform(),

The custom geary code has the mailchimp function commented out of it.

/*************************
     mailchimp
*************************
  POTENZA.mailchimp = function () {
         $(document).on('click','#mc-embedded-subscribe',function(event){
          event.preventDefault();       
    ...

And that is the cause of the problem.

If you intend for the mailchimp code to not execute, instead of commenting out the whole function, I recommend that you instead comment out the code that executes the function, which is found in the previous code block.

1 Like

@Paul_Wilkins Hi Paul, That’s an amazing breakdown of the what was causing the issue. I am so grateful to you for taking the time to write out all this detail. Have a great weekend!