Menu icon Foundation
Foundation 5 AJAX Reveal - No Modal Appearing

I'm trying to get content loaded into a modal via ajax. Luckily Foundation 5 has just what I need but there's an issue. If I create a modal with the actual content, loaded in the socialModal div, it loads fine but when I try to load content via ajax, the screen dims as it should but the modal never appears.

Hitting the escape key does not remove the dim screen overlay either, I need to reload the page.

Any ideas as to what's causing this?

     <ul>
         <li><a href="http://twitter.com/intent/tweet?url=<?php the_permalink();?>&text=The Tweet" title="Tweet This Idea" data-reveal-id="socialModal" data-reveal-ajax="true"><span class="icon-twitter"></span></a></li>
     	<li><a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php the_permalink();?>&p[title]<?php echo get_the_title();?>&p[summary]=<?php echo get_the_excerpt();?>" title="Add This Idea To Facebook" data-reveal-id="socialModal" data-reveal-ajax="true"><span class="icon-facebook"></span></a></li>									
     	<li><a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink();?>&summary=<?php echo get_the_excerpt();?>&title=<?php echo get_the_title();?>" data-reveal-id="socialModal" data-reveal-ajax="true"><span class="icon-linkedin"></span></a></li>									
     	<li><a href="https://plus.google.com/share?url=<?php the_permalink();?>"><span class="icon-googleplus" data-reveal-id="socialModal" data-reveal-ajax="true"></span></a></li>
     </ul>
     
     <div id="socialModal" class="reveal-modal" data-reveal> 
     	<a class="close-reveal-modal">&#215;</a>
     	<!-- Ajax Content -->
     </div>
     
     <script>
     	$(document).foundation({});
     </script>

revealmodalAJAX

I'm trying to get content loaded into a modal via ajax. Luckily Foundation 5 has just what I need but there's an issue. If I create a modal with the actual content, loaded in the socialModal div, it loads fine but when I try to load content via ajax, the screen dims as it should but the modal never appears.

Hitting the escape key does not remove the dim screen overlay either, I need to reload the page.

Any ideas as to what's causing this?

     <ul>
         <li><a href="http://twitter.com/intent/tweet?url=<?php the_permalink();?>&text=The Tweet" title="Tweet This Idea" data-reveal-id="socialModal" data-reveal-ajax="true"><span class="icon-twitter"></span></a></li>
     	<li><a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php the_permalink();?>&p[title]<?php echo get_the_title();?>&p[summary]=<?php echo get_the_excerpt();?>" title="Add This Idea To Facebook" data-reveal-id="socialModal" data-reveal-ajax="true"><span class="icon-facebook"></span></a></li>									
     	<li><a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink();?>&summary=<?php echo get_the_excerpt();?>&title=<?php echo get_the_title();?>" data-reveal-id="socialModal" data-reveal-ajax="true"><span class="icon-linkedin"></span></a></li>									
     	<li><a href="https://plus.google.com/share?url=<?php the_permalink();?>"><span class="icon-googleplus" data-reveal-id="socialModal" data-reveal-ajax="true"></span></a></li>
     </ul>
     
     <div id="socialModal" class="reveal-modal" data-reveal> 
     	<a class="close-reveal-modal">&#215;</a>
     	<!-- Ajax Content -->
     </div>
     
     <script>
     	$(document).foundation({});
     </script>

This post has been closed. No new replies can be added.

Mauricio González about 5 years ago

THIS SOLVED MY PROBLEM:

After hours of searching, i found this important thing.

Ajax will only load files that are on the same server.

Your link should be something like:

Load the file!

and the file myfiletoload.html should be stored on the same server (and the same folder too, in this case).