CODEWITHSUNDEEP
jqueryzurb-foundation
John S
John S

Reputation: 8341

Foundation 5 Reveal not working with JQuery 3.1.1

Using Chrome 50 & JQuery 3.1.1 I am trying to get the basic Foundation Reveal modal to work. I have copied the code from the basic example on the Zurb site and placed it in the body tag of my page.

<a href="#" data-reveal-id="myModal" id="test">++</a>
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <h2 id="modalTitle">Security Details</h2>
   <p>My message</p>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

And I have verified that all the libraries are loading. The last script piece on my page is 

<script>
    $(document).foundation();
</script>

which I know is working because I am using other Foundation elements that work.

When I click on the link "++" I get an error in my console

Uncaught TypeError: Cannot read property 'defaultView' of null

If I then run

$('#myModal').foundation('reveal', 'open');

at the console the reveal dialog shows up and from then until I reload the page the "++" link work also. So I'm guessing somewhere in the setup the click event to the link is not working, but the JQuery error message is not making sense.

Any ideas? (I am also using the JQuery Migrate library)

Upvotes: 4

Views: 1989

Answers (2)

Aldo Reyes
Aldo Reyes

Reputation: 514

An alternative to tymothytym answer, is to have your links manually call the foundation reveal method. i.e.

Replace your modal link from:

<a data-reveal-id="myModal" data-reveal>

to

<a data-legacy-reveal-id="#myModal">

Then add this to your js code to catch the click and manually open the modal:

$('a[data-legacy-reveal-id]').click(function(e){
   e.preventDefault(e);
   $($(this).data('legacy-reveal-id')).foundation('reveal', 'open');
});

Upvotes: 3

tymothytym
tymothytym

Reputation: 1611

I think your problem is the breaking changes introduced in jQuery 3 (https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed), specifically the removal of .load, which you probably realise to some degree as you're using the Migrate library so I won't bang on about it.

Migrate doesn't seem to always work for legacy versions of Foundation (see issue here: https://github.com/zurb/foundation-sites/issues/8975) but why exactly that is a little more vague with several different opinions.

The good news is that you have two fixing options.

Fix option one

The Zurb suggested fix is to manually patch all the broken references to .load. I can't find a list for F5 but here is one of F6 and I'd guess they are fairly similar (the pr >> https://github.com/zurb/foundation-sites/pull/8923/commits/c0b42643da96d3b297f3d7c35ccdcebed92ad7a1). It's not that many files, the affected ones are:

  • dist/foundation.js
  • dist/plugins/foundation.interchange.js
  • dist/plugins/foundation.util.triggers.js
  • js/foundation.interchange.js
  • js/foundation.util.triggers.js

They are all the same issue; using the depreciated .load(fn)

If you're feeling very daring you could just globally replace all instances of:

.load(function () {

with

.on("load", function () {

Fix option 2

Use version 1.4.1 of jQuery Migrate. I'm not entirely sure why 1.4.1 works when later versions don't (or why they skipped version 2 altogether) but it does, so that is probably a good enough start. (3.0.0 & 3.0.1-rc both generate errors which seems slightly counter intuitive when trying to get jQuery 3 to work).

Working with F 5.5.3, JQ 3.1.1 & JQM 1.4.1 >> https://jsfiddle.net/tymothytym/fxbk6h1d/

Upvotes: 4

Related Questions