jQuery plugin foiled by `defer`

I’ve sent this request to the helpdesk and hope for a reply, but since the dev team is pretty busy, I thought I’d post it here in case @bartekkustra or anyone had a quick fix… I could really use some help.

I’m trying to use the excellent MixItUp jQuery plugin to sort/filter samples on a page, but the defer attribute in the webflow header’s jQuery reference:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" defer></script>

…seems to disable it somehow. (Adding a jQuery reference without a defer in the custom code has no effect.)

When I export my test site and just delete that defer attribute, the site works fine:

http://insightcx.info/wfmixit2/

… Here’s how it looks using the raw export that still includes the Webflow header defer attribute:

http://insightcx.info/wfmixit1/

(The content is set to opacity:0; display:none; and Mixitup handles its state so it’s visible in the version that works.)

I’m assuming that Bad Things would happen if I just removed the defer and kept working, since webflow’s jQuery performance must depend on it being there.

But is there some way of having the Mixitup plugin load properly by adding something to force it?

Thanks,

Allen

Here’s the troubleshooting link: https://webflow.com/design/mixit?preview=f7f616f7a33cbf8aa41131e402b0307a

Try to add async attribute to script load just like the defer is.
< script src=“” async ></ script >
Maybe that will work. Defer attribute makes webflow.js load right after the page loads. That means that your script MIGHT be somehow overwritten by webflow.js. Try adding defer or async attribute to your script.

I can’t promise that’ll help… good luck! :wink:

Hi @ramatsu, we just had a conversation this morning at Webflow HQ about jQuery plugins, and specifically your helpdesk issue. As an immediate fix, you can replace your mixitup plugin + init code with the following script:

In the future, we are discussing ways of removing the defer attribute. But in any case, the above Webflow wrapper will remain future-proof. Please let us know if you have any further issues.

Cheers,
-Dan

Wow, your solution appeared before my eyes as I was crafting a follow up question. Thanks for the quick response! You guys really are rockstars.

Allen

Also forgot to mention- you should delete this code from your site:

<script>/* jQuery lib and mixit jq plugin for samples page */</script>
<script type="text/javascript" src="http://insightcx.info/plugins/jquery.mixitup.min.js"></script>
<script type="text/javascript">
/* Instantiate mixit */
$(function(){
    $('#grid').mixitup();
});
</script>

And replace it with the new script path:

<script type="text/javascript" src="http://insightcx.info/plugins/webflow-mixitup.js"></script>

Glad we could help!
-Dan

Yeah this perplexed me as well. I solved it by:

  • Exporting the site
  • Removing defer
  • Moving webflow JS to bottom of page before ending </body>
  • Putting my custom plugin js directly after the webflow JS

But obviously that’s not optimal, just a hacky work-around. What I was trying to solve was the ability to have an ajax mailchimp signup form in the page - which doesn’t pop the user out of the site just to sign up - like the MC web form examples do. That’s not the experience I wanted. So I duct-taped my own together.

I would prefer not to mess with it at all and am awaiting MailChimp or Campaign Monitor API access (like squarespace has - but they suck) and just enter my mailchimp account and id and whammo - Bob’s your uncle.

@brent Sorry you had to jump through those hoops. We’ve changed it so that our exported sites no longer use the defer attribute, and the script tags are inserted at the bottom.

See this post for more details on webflow.js.

No worries danro. Thanks for the heads up on the changes. And just fyi - integration with mailchimp so I can ajax the results without popping the user out of the page is the killer feature I am waiting for. It will change this from being my favorite web design tool to my killer solution I’d be happy to pay for.

features i am waiting for:

  • mailchimp ajax integration
  • touch slider like swipejs

thanks !

2 Likes