Menu icon Foundation
Adding reveal links via javascript/ajax

Hi.

Quick question about the reveal module in Foundation 5. I can create links with the data-reveal-id set and they work just fine, opening up the reveal div when clicked. However, I also need to add more of the links dynamically with javascript. Those I'm having problems with.

Here's a simple example that I've made up that shows the problem:

<!DOCTYPE HTML>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="foundation/f5/css/foundation.css" rel="stylesheet" type="text/css">
    <link href="foundation/f5/css/normalize.css" rel="stylesheet" type="text/css">
    <title>Foundation Ajax Reveal Test</title>
  </head>
<body>
<h1>Reveal Ajax Test</h1>
 <a href="#" data-reveal-id="revealAjaxModal">click me!</a>
 <br><a href="#" data-reveal-id="revealAjaxModal">click me also!</a>

 <div id="revealAjaxModal" class="reveal-modal" data-reveal> Hi! </div>
  
<script src="foundation/f5/js/vendor/jquery.js"></script>
<script src="foundation/f5/js/foundation.min.js"></script>
  <script>
  $(document).foundation();
  $(document).on("click", "a[data-reveal-id]", function() {
    console.log("click!");
    $(this).after("<br><a href='#' data-reveal-id='revealAjaxModal'>click me too!</a>");
  } );
  </script>
</body> </html>
            

         

The links that start out on the page work just fine. The links that I add in using javascript, though, don't open up the reveal div. Meanwhile, the click event that I bind using jquery(document).on() also works, so it's not like there's anything obviously wrong with the new links.

Is there something in the reveal usage that I'm missing here? Given how easy it is to use jquery.on(), I would expect that the behavior would work the same for initially available and dynamically added links. The fact that it doesn't is surprising.

Any help would be appreciated.

revealAJAX

Hi.

Quick question about the reveal module in Foundation 5. I can create links with the data-reveal-id set and they work just fine, opening up the reveal div when clicked. However, I also need to add more of the links dynamically with javascript. Those I'm having problems with.

Here's a simple example that I've made up that shows the problem:

<!DOCTYPE HTML>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="foundation/f5/css/foundation.css" rel="stylesheet" type="text/css">
    <link href="foundation/f5/css/normalize.css" rel="stylesheet" type="text/css">
    <title>Foundation Ajax Reveal Test</title>
  </head>
<body>
<h1>Reveal Ajax Test</h1>
 <a href="#" data-reveal-id="revealAjaxModal">click me!</a>
 <br><a href="#" data-reveal-id="revealAjaxModal">click me also!</a>

 <div id="revealAjaxModal" class="reveal-modal" data-reveal> Hi! </div>
  
<script src="foundation/f5/js/vendor/jquery.js"></script>
<script src="foundation/f5/js/foundation.min.js"></script>
  <script>
  $(document).foundation();
  $(document).on("click", "a[data-reveal-id]", function() {
    console.log("click!");
    $(this).after("<br><a href='#' data-reveal-id='revealAjaxModal'>click me too!</a>");
  } );
  </script>
</body> </html>
            

         

The links that start out on the page work just fine. The links that I add in using javascript, though, don't open up the reveal div. Meanwhile, the click event that I bind using jquery(document).on() also works, so it's not like there's anything obviously wrong with the new links.

Is there something in the reveal usage that I'm missing here? Given how easy it is to use jquery.on(), I would expect that the behavior would work the same for initially available and dynamically added links. The fact that it doesn't is surprising.

Any help would be appreciated.

Jason Locashio over 5 years ago

This is kindof late, I know, but there is an easier way to handle this. Foundation apparently doesn't bind with the jQuery .on method, but binds internally on init of the plug-in (in this case, Reveal). However, this situation was accounted for and bindings can be "refreshed" with this line of code (for Foundation 5):

 $(document).foundation({bindings: 'events'});

That should re-init all event bindings across all of Foundation on that page. I usually add it as the last line of my dynamic insert script, after the DOM is modified.

I hope that helps.

Mauricio González over 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:

<a href="myfiletoload.html" data-reveal-id="myModal" data-reveal-ajax="true">Load the file!</a>

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

Matt Vasquez almost 6 years ago

My app uses a lot of ajax so I run into this problem quite frequently. What's most frustrating is the behavior is not consistent across plugins (in this regard, tooltips behave differently than reveal). A more mature framework would have this consistency. Hopefully Foundation will get there because I really like it.

But I digress, here's the snippet of code I use on each project for links that are inserted into the page dynamically.

  $(document).on('click', '[data-reveal-remote]', function(){
    var $src = $(this);

    $($src.data('reveal-remote')).foundation('reveal', 'open', $src.attr('href'));

    return false;
  });
<a href="{url}" data-reveal-remote="#edit-comment-modal">Edit</a>

Hope this helps!

Antony Raj almost 5 years ago

Following code really worked for me
beware: It is using slim templates

div.row
  a#add-score.button data-sid=(@student.id) data-reveal-id="add-score-modal" data-reveal-ajax="http://localhost:3000/students/2/scores/new" Add Scores
div.row
  h2 Student Details
div#add-score-modal.row.reveal-modal data-reveal="true"

Brian Tsai almost 6 years ago

Same issue here. I've got a situation (should be pretty common) where i have a list of data-reveal-id links in a list when the page is rendered. When you click on a link, it properly posts an Ajax request to the server, which then updates the list in the ajax response (binding with the ajax:success event), but in the updated list, the data-reveal-id links no longer respond with Ajax, but straight HTML posts.

I've been searching on Google and StackOverflow for an hour but can't find any way to reinitialize the data-reveal-id links. Apparently the binding on the original links is no longer valid./

I've also tried:
* $(document).foundation();

Any help would be greatly appreciated.

Brian

Andrew Malkov almost 6 years ago

You can assign dynamically created button (link) to a javaScript function.
Inside this function you can open your modal dialog like this:

        function openModal() {
            $('#myModal').foundation('reveal', 'open');
        }

        function closeModal() {
            $('#myModal').foundation('reveal', 'close');
        }

I hope it will solve your problem.

Stephanie Gutierrez almost 5 years ago

Mauricio,

Where do you store the Ajax call and how does it know to find myfiletoload.html? Can you post all of the code for "myModal"?