Menu icon Foundation
Reveal Modal with AJAX Content

Alright, so my goal is to get a link to open a modal using AJAX. According to the Zurb team, you can simply use the jQuery $.ajax call.

So I have it working except the content isn't being pushed into the HTML.

<p><a href="//localhost:8000/index.html" id="openModal">Click me for a modal</a></p>

<div class="reveal" id="animatedModal10" data-reveal>

<script src="app.js"></script>
<script>
  $('#openModal').click(function(e) {
    e.preventDefault();
    $.ajax ({
      url: $(this).attr('href') + ' #pageBody * ',
      success : function(data){
        $('#animatedModal10').html(data.html).foundation('open');
        console.log(data);
      },
      error : function(xhr, status){
        console.log(status);
      }
    });
  });
</script>

 The modal will fire, and the AJAX doesn't seem to error out, so I am confused to why it won't display any content inside the modal on click.

AJAXrevealmodal

Alright, so my goal is to get a link to open a modal using AJAX. According to the Zurb team, you can simply use the jQuery $.ajax call.

So I have it working except the content isn't being pushed into the HTML.

<p><a href="//localhost:8000/index.html" id="openModal">Click me for a modal</a></p>

<div class="reveal" id="animatedModal10" data-reveal>

<script src="app.js"></script>
<script>
  $('#openModal').click(function(e) {
    e.preventDefault();
    $.ajax ({
      url: $(this).attr('href') + ' #pageBody * ',
      success : function(data){
        $('#animatedModal10').html(data.html).foundation('open');
        console.log(data);
      },
      error : function(xhr, status){
        console.log(status);
      }
    });
  });
</script>

 The modal will fire, and the AJAX doesn't seem to error out, so I am confused to why it won't display any content inside the modal on click.

Shoaib Iqbal over 3 years ago

What happens when you log data.html in the console?

console.log(data.html);

 

 

Glenn Philp over 3 years ago

Interesting. That returns undefined.

Glenn Philp over 3 years ago

If I change everything to (data) the console.log displays the HTML of the page being pulled (in this case index.html).

<script>
  $('#openModal').click(function(e) {
    e.preventDefault();
    $.ajax ({
      url: $(this).attr('href') + ' #pageBody * ',
      success : function(data){
        // Changed data.html to only data
        $('#animatedModal10').html(data).foundation('open');
        console.log(data);
      },
      error : function(xhr, status){
        console.log(status);
      }
    });
  });
</script>

However, the reveal modal breaks and jQuery throws an XHR error:

"Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/."

Dennis over 3 years ago

"Synchronous XMLHttpRequest on the main thread.." is a warning not a error and is not releated for filling your modal.

The problem is related in the return of your AJAX call. Undefined is obvious the reason of your whole problem. It seems the URL of the AJAX call is wrong.

Why do you use an astriks (*) in the URL? Looks wrong to me though

Glenn Philp over 3 years ago

@Dennis,

The URL + ID * is telling the jQuery AJAX load method to only pull the HTML inside of the ID and to exclude the ID itself. Both articles "How to use jQuery's $.ajax() function" by SitePoint and "AJAX load container contents" by CSS Tricks discusses the use of the URL, ID, Astrix combination. Although you did point out a possible problem is based on the click function previous was using the $.load method. I did follow SitePoints modal for adding the .find('#ID *') inside of the .html() like so:

$('#openModal').click(function(e) {
    var $modal = $('#reveal');
    e.preventDefault();
    $.ajax(this.href, {
      success: function(data) {
        $modal.html($(data).find('#pageBody *')).foundation('open');
        console.log(data);
        console.log('The page has been successfully loaded');
      },
      error: function() {
        console.log('An error occurred');
      }
    });
  });

The weird part is the AJAX call is successful every time, the function(data) is displaying all the correct HTML to the console. However, it doesn't place any content within the modal.

screen shot of successful AJAX call with no HTML output to the foundation 6 reveal modal

 

Dennis over 3 years ago

Never saw that method with the astriks before, learned someting new today :)

 

So if the AJAX returns what you expected then it looks like appending the data to the modal fails altough your code looks fine to me and the Foundation docs.

 

Do you have an codepen/fiddle example?

Glenn Philp over 3 years ago

Good news, I got it working with code from "Chapter 09: APIs, working with history" by JavaScript Book.

$(function() {                                     // DOM has loaded
    var $modal = $('#reveal');
    function loadContent(url){                    // Load new content into page
      $modal.load(url + ' #pageBody *').foundation('open');
    }

    $('#openModal').on('click', function(e) {     // Click handler 
      e.preventDefault();                         // Stop link loading new page
      var href = this.href;                       // Get href attribute of link
      var $this = $(this);                        // Store link in jQuery object
      loadContent(href);                          // Call function: loads content
    });
  });

The only thing I would add/suggest is when using the on click handler is to make it more generic/reusable. 

DON'T:

$('#openModal').

DO:

// Method One
$('.load-modal').

// Method Two
$('[data-reveal-ajax]').

Both of these methods would allow for this simple AJAX function to be reused on a single page multiple times.

Glenn Philp over 3 years ago

If anyone has a better way to implement this please feel free to share.

Rafi Benkual over 3 years ago

That looks like a good method to me! It seems like AJAX for Reveal modals is a feature that is needed to add to Foundation. We added it to the 6.3 milestone.

Luke Robinson over 3 years ago

Hello Glenn and Rafi,

I implemented a similar solution in Foundation 5.3.3 utilizing the basic Reveal without data-reveal-ajax. The trick was calling Reveal with jQuery's load function. You can see it in action under the heading '10 Year Priorities' in Calvin's Master Plan: http://www.calvin.edu/master-plan/#ten-year

The jQuery snippet (below) is close to Glenn's example; however, my solution has not worked in Foundation 6.x. YMMV.

<!--
MASTER PLAN - Foundation modal windows loaded via jQuery AJAX
/master-plan/priorities-modals.html
/master-plan/profiles-modals.html
-->
<script>
$(document).ready(function(){
    $('.js-modal-link').click(function(){
    	var url = $(this).attr("href");
		var id = $(this).attr("id");
        	$("#modalWindow").load(url+" #"+id).foundation('reveal', 'open');
    });
});
</script>

Glenn Philp over 3 years ago

Hey Luke,

Have you tried removing reveal from .foundation()? I don't think it is needed in Foundation Sites 6.

Jean-Luc Tallis over 3 years ago

Like what Glenn says, it's just .foundation('open') without the reveal.

See: http://foundation.zurb.com/sites/docs/reveal.html#js-functions 

Luke Robinson over 3 years ago

Hey Glenn & Jean-Luc,

Thanks for the suggestion and the link to the FS6 documentation. I hope ZURB will consider adding an AJAX modal example alongside their Advanced options. Meanwhile, anyone have basic AJAX demo or CodePen?

In my situations involving AJAX modals in Foundation 5.3, I've been loading only a section of content (usually a DIV) from another Web page into a modal window. jQuery's load function makes loading a DIV (via a URL) very simple; whereas Foundation 5's AJAX modal assumes the whole document behind the URL is to be loaded.

Cheers!

Glenn Philp over 3 years ago

Hey Luke,

I have the jQuery AJAX working from a link using the script above. You can simply change $('#openModal").on(click) to $('[data-reveal-ajax]').on(click). By targeting the data-attribute for the onclick you will not have to change anything in your HTML from foundation5 to foundation6.

Let me know if you need more assitance.

Luke Robinson over 3 years ago

Thanks Glenn! I'm very happy to have stumbled upon this thread (via Twitter).

Joel Davies over 3 years ago

Foundation yetis: I just wanted to add my 2¢ that Glenn Philip's JS at http://foundation.zurb.com/forum/posts/43809#comment_33251 did solve a similar problem I had trying to implement Reveal + AJAX.

The request gets performed, the console shows the target HTML is been acquired, but the HTML does not get injected into the designated Reveal modal. Perhaps this is an issue with JQuery's .ajax() ?

I think at the very least the Advanced Options > AJAX section in the docs should be rewritten; the sample code block seems like it just doesn't work. If it did work, it would be helpful to show folks that they are most likely going to want to have a click handler in there.

ReynBargz almost 3 years ago

 Hi, i need your expertise. I have a button on homepage. I want it to open a modal inside a subpage. Is this possible?

Glenn Philp almost 3 years ago

Yes, it is possible, you would simply pass a link with a parameter that would trigger your JavaScript to open the modal with the content passed inside.