Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Robert Walker
Robert Walker
17,146 Points
Posted by Robert Walker
Robert Walker
17,146 Points

Ajax and Foundation 6 Modal

Please note that we removed the option for AJAX loaded modals in Foundation 6. We did make it very easy to implement on your own though, check out a sample in the Advanced section.

<p><a data-open="modal">Click me for a modal</a></p>

<div class="reveal" id="modal" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

var $modal = $('#modal');

$.ajax('myurl')
  .done(function(resp){
    $modal.html(resp.html).foundation('open');
});

I know its likely me being an idiot as always but I cant get ajax modal with the new foundation to work at all.

Can someone point out my mistakes for me please.

EDIT: sorry im such an idiot I forgot to add my actual code.

<li><a href="#" data-open="loginModal" id="Modal">Log In</a></li>

<div class="reveal" id="loginModal" data-reveal>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
      <span aria-hidden="true">&times;</span>
  </button>
</div>

$('#Modal').click(function(){

var $modal = $('#loginModal');

$.ajax({
  url: "MYURL"
}).done(function(resp) {
  $modal.html(resp.html).foundation('open');
});