Menu icon Foundation
Reveal Ajax

Does someone have Reveal working with ajax calls? I cannot get it to work. I had Reveals working with inline content, but need to have it get content via ajax. I followed the documentation and it just opens the page I am calling, not in a modal. I even tried the example opening Google in a modal and it didn't work.

Here is the page I am working on:
http://beta.kingswaychurch.org/serve/volunteer-hub/

On the left towards the bottom are checkboxes. Choose on and the list will change. The items in the list are supposed to open in a modal.

Any ideas?

revealAJAXmodal

Does someone have Reveal working with ajax calls? I cannot get it to work. I had Reveals working with inline content, but need to have it get content via ajax. I followed the documentation and it just opens the page I am calling, not in a modal. I even tried the example opening Google in a modal and it didn't work.

Here is the page I am working on:
http://beta.kingswaychurch.org/serve/volunteer-hub/

On the left towards the bottom are checkboxes. Choose on and the list will change. The items in the list are supposed to open in a modal.

Any ideas?


Kessir Adjaho gave the most helpful answer for this post
Kessir Adjaho over 5 years ago

I had the same issue. I was finally able to solve it. Make sure you have these two: 1.a button or a link to click and 2.a div in which the modal content will be inserted and displayed

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

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

Kessir Adjaho over 5 years ago

I had the same issue. I was finally able to solve it. Make sure you have these two: 1.a button or a link to click and 2.a div in which the modal content will be inserted and displayed

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

Hooman Askari over 5 years ago

Thank you very much, the part regarding to creating an empty div even for ajax requests is a bit vague on the docs, but thanks to @Kessir Adjaho problem is solved now.

Rexford Nkansah over 5 years ago

I'm testing the reveal page within a modal with the code above and its not showing anything though the dark overlay displays covering the screen.

But the content to be pulled doesn't show

This is exactly what I have in my code:

<a href="http://en.wikipedia.org" data-reveal-id="myModal" data-reveal-ajax="true">
Click Me For A Modal
</a>
<div id="myModal" class="reveal-modal" data-reveal></div>

I'm using Foundation 5

tanks