Theme conflict with script?

awrmedia

MD customer
Messages
21
Reaction score
4
Hi there,

It appears to me that MD interfers with a certain script that I run perfectly fine on other sites/theme's. 

The script:

<div class="brochurecheckall"><label><input type="checkbox" name="checkAllAuto" id="checkAllAuto" onchange="window.location.href='#codeword'" /></label> Ja, stuur mij alle magazines in één keer!</div>

<script>
$('#checkAllAuto').click(
    function()
    {
        $("INPUT[type='checkbox']").attr('checked', $('#checkAllAuto').is(':checked'));    
    }
)
function send(el){
  var target = '#' + el.getAttribute('data-target');
  window.location = target ;
}
</script>


For example:

https://www.izaa.nl/stap-1-keukenbrochures-aanvragen-test/

The top checkbox (Ja, stuur mij alle magazines in één keer!) (Yes, send me all the magazines at once) is supposed to select all the checkboxes in the form, the way it does here:

https://www.keukenmagazinesinhuis.nl/

Unfortunately, it doesn't work on izaa.nl, running MD theme. Could one of your staff take a peek to see why? If at least someone points me towards what exactly causes the script to fail I'd really appreciate that.

Thanks a lot!

 

Alex

MD developer
Messages
4,883
Reaction score
1,138
Hey , thanks for the report!

After reviewing the differences between your sites, it seems to be that your issue is either:

1) Loading the incorrect version of jQuery

2) Not loading jQuery at the proper time

On the site where your custom script works, I see that 3 different variations of the jQuery library are being loaded! Optimally, only one version (the latest) should load, and it should be loaded at the bottom of the site. On your site that doesn't work, an old version of jQuery is bring loaded at the top of the site - so those are the differences I see that are the culprit.

The easiest solution you can try without doing anything but changing the script as I have rewritten it:

JavaScript:
<script>
    jQuery( document ).ready( function( $ ) {
        $( '#checkAllAuto').on( 'click', function() {
            $( 'input[type="checkbox"]' ).attr( 'checked', $( '#checkAllAuto' ).is( ':checked' ) );
        });
        function send( el ) {
            var target = '#' + el.getAttribute( 'data-target' );
            window.location = target;
        }
} );
Otherwise, you will have to do some Plugins management and see what is loading the different versions of jQuery and get the right one to load it to the footer - but this should be the easy way. Let me know!
 
Last edited:

awrmedia

MD customer
Messages
21
Reaction score
4
Alex, thanks for responding so fast, and putting effort into it. Unfortunately the editted script doesn't solve the problem. Any suggestions how exactly I can inspect and change the jQuery load order? A manual is fine too, I really need to spend some more time learning js.

 
Last edited by a moderator:

Alex

MD developer
Messages
4,883
Reaction score
1,138
Fortunately it looks like we still have a good chance with the script, it looks like however you embedded it is actually breaking the format of the script causing it to not load properly:

Image 2019-11-22 at 7.46.32 AM.png

This kind of problem arises when you paste scripts directly into the post editor. MD has a meta box called "Tracking" scripts" where you can paste your custom scripts to the &lt;head&gt; or footer of your page, so if possible, paste your script to the Footer section.

Any suggestions how exactly I can inspect and change the jQuery load order? A manual is fine too, I really need to spend some more time learning js.
This is where Plugins can get tricky because you are generally limited on how you can control their scripts, and once you start adjusting the scripts they load, functionality can break. That is why I have spent so much time making MD one entire system (and not needing jQuery!) so we can have custom functionality separated from each other.

A good tip that will help you is to keep your scripts at the bottom of your page too. Also used the Console in your browser's inspector to see any JS errors on your page. For example, the way I found out about the formatting issue was by inspecting your site and seeing the error the Console returned to me:

Image 2019-11-22 at 7.51.45 AM.pngImage 2019-11-22 at 7.52.26 AM.png

 
Top