Menu icon Foundation
Ajax Reveal Foundation 6

I am trying to create a reveal modal with ana ajax request using foundation sites 6

This is loading a login form. However when it loads the response doesnt display on page within the browser/source.

I have a modal declared in the page like below

Then in my javascript app.js i have the ajax request

$( document ).ready(function() {
    var $modal = $('#exampleModal1');

    $.ajax("auth/register")   
	  .done(function(resp){
	    $modal.html(resp.html).foundation('open');  
	});

});
            

         

This loads the modal on loading of the page for now while i get it working. The modal loads and I can see in firebug that the ajax request is made.

GET URL 200 OK 298ms

And i can see the login form however this is not displayed on the page or in the source.

Can anyone help?

AJAX

I am trying to create a reveal modal with ana ajax request using foundation sites 6

This is loading a login form. However when it loads the response doesnt display on page within the browser/source.

I have a modal declared in the page like below

Then in my javascript app.js i have the ajax request

$( document ).ready(function() {
    var $modal = $('#exampleModal1');

    $.ajax("auth/register")   
	  .done(function(resp){
	    $modal.html(resp.html).foundation('open');  
	});

});
            

         

This loads the modal on loading of the page for now while i get it working. The modal loads and I can see in firebug that the ajax request is made.

GET URL 200 OK 298ms

And i can see the login form however this is not displayed on the page or in the source.

Can anyone help?

Nick over 3 years ago

This is the modal below. The forum wont allow me to edit my post for some reason

<div class="full reveal" id="exampleModal1" data-reveal data-animation-in="fade-in" data-animation-out="fade-out">  
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Brian Tan over 3 years ago

Try this. Define empty data-reveal container in html, then load content (without data-reveal wrapper) via Ajax and open.

<div class="full reveal" id="exampleModal1" data-reveal ....></div>

<script>
  $.ajax("url").done(function(data) {
    $("#exampleModal1").html(data).foundation("open");
  });
</script>

jinch about 3 years ago

Hi Brian / Nick

Do you have a working example of this?

I just posted another question on the forum regarding opening a modal after a form has been submitted. Any info on this would be awesome as there isn't much out there in regard to doing this with F6 : /

Here is that post if interested in having a look (dont ask me why the font is so big / no clue:).
http://foundation.zurb.com/forum/posts/45361-modal-reveal-on-form-submit---f6

Hopefully your still around / this forum has been wicked quiet lately witch is unfortunate. Hopefully there is still more than of a handful of people using this framework : / or am I the one hold out?

Carolyn Lee 4 months ago

Just a note on this in case anyone else can't get this to work and what I finally figured out was for this line in the jquery:

$.ajax("url")

I think you have to load a page within the same domain and also use the full URL path. When I tried a different domain, it wouldn't let me load the page, when I tried a page using just page.html it didn't work either. I had to put in the full path. So https://www.example.com/page.html.