Menu icon Foundation
Loading specific AJAX content into Reveal

Is it possible to load specific content via AJAX (e.g. #modal) rather than the whole page when using the href method of calling Reveal:

<a href="http://some-url" data-reveal-id="myModal" data-reveal-ajax="true">
    Click Me For A Modal
</a>

I need to use the href method because of how I'm dynamically creating links in WordPress. I would love to be able to target specific content in those pages -- similar to the jQuery example below:

$("#area").load("something.html #content");

Has anyone worked this out?

revealAJAX

Is it possible to load specific content via AJAX (e.g. #modal) rather than the whole page when using the href method of calling Reveal:

<a href="http://some-url" data-reveal-id="myModal" data-reveal-ajax="true">
    Click Me For A Modal
</a>

I need to use the href method because of how I'm dynamically creating links in WordPress. I would love to be able to target specific content in those pages -- similar to the jQuery example below:

$("#area").load("something.html #content");

Has anyone worked this out?

Timothy Decker over 5 years ago

Hey guys,

I believe I had a similar you all experienced, where, within a Wordpress build, I wanted to display a different page within a modal window, but not show the header and footer. However, it was important to keep the header and footer tags in the template file in case someone viewed the page on its own, not in the modal window. Here's what worked for me: checking to see if a page was accessed with an AJAX request and then using if/else statements to display content.

Page with the modal window:

<?php
// code within the Wordpress Loop to generate the modal link.
?>
<a href="<?php the_permalink(); ?>" data-reveal-id="myModal" data-reveal-ajax="true"><h2 class="location-name"><?php the_title(); ?></h2></a>

<?php // ... ?>

<?php
// Empty div to contain modal AJAX content; this can really go anywhere. I have multiple modal links that bring in AJAX content to the same modal container
?>
<div id="myModal" class="reveal-modal" data-reveal></div>

Page template for the modal content:

<?php
//
if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])
    AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
   // I'm AJAX
} else {
  get_header( '' );
}

// ...

if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])
    AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
    // I'm AJAX
    // This is the close button for the modal window.
  echo '<a class="close-reveal-modal">&#215;</a>';
} else {
  get_footer( '' );
}
?>

Obviously, this result is predicated upon using PHP (and Wordpress, to an extent, but it would still work on any site built with PHP minus the Wordpress functions).

Let me know if this solves your problem (if you still have it after 3 months, haha). And I recognize that this code could be refactored. In the long run, it's probably wiser to store the results of the _SERVER query in a boolean variable that you can use anywhere else in your template.

Best,

Sam Smith over 5 years ago

I was just wondering the same thing. Would be very handy for creating non JS links (ie. could add header and footer to your modal content for when they appear as individual pages.

Yanik Turgeon over 5 years ago

Hi,

Did you figure it out. I am trying to achieve the same thing.

What I want to do is use this on a link to a page with a form. Using the Reveal and Ajax on the href reveal would load the page. But I want only the div containing the form, not the whole page with nav and all...

Let me know.

Thanks