Menu icon Foundation
Reveal ajax not working

Hi every body :)

After several test Reveal, I will wish to try with Ajax but the example of the documentation does not work

Made in, I do not understand what is the "data-reveal-id" for opening an external URL ?

Could someone explain me ?

Thank you :) !

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

FoundationrevealAJAXjs

Hi every body :)

After several test Reveal, I will wish to try with Ajax but the example of the documentation does not work

Made in, I do not understand what is the "data-reveal-id" for opening an external URL ?

Could someone explain me ?

Thank you :) !

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

Sumit Kapur gave the most helpful answer for this post
Sumit Kapur over 5 years ago

Crap. I didn't use the Insert Code functionality. So here is my answer again:

Hello Stephane. I think I got it!

Here's the deal.

Make a link and empty reveal modal div as below:

 <a data-reveal-id="myModal" data-reveal-ajax="http://0.0.0.0:3000/posts/5346cc00c5a2219d670000ee" data-reveal>
  Click Me For A Modal
</a>
<div id="myModal" class="reveal-modal" data-reveal>
</div>

You see above I also have the link to the content hard coded into the data-reveal-ajax attribute. This will call the show template for my posts controller. This link must return something very simple. in fact the link must return only what should be placed inside the empty reveal modal div above. So it cannot use the regular application.html.erb layout. You need a new layout. I created modal.html.erb in views/layouts which is just:

<%= yield %> 

Then at the top of my posts controller, I have:

layout "modal", only: [:show]

This makes it so the show action uses the modal layout. So now I set posts/show.html.erb to:

<a class="close-reveal-modal">&#215;</a>
hi 

And wala! It works. The key is that the link "http://0.0.0.0:3000/posts/5346cc00c5a2219d670000ee" must only return some content for inside the div. It can't have a div with class = reveal-modal or any start and end html tags or anything like that.
Good luck buddy!

Rafi Benkual over 5 years ago

looks like this has already been answered. This will help you http://foundation.zurb.com/forum/posts/1170-reveal-ajax

Stéphane Richin over 5 years ago

Hi Rafi,

Sorry, but i've already tested :)

<button data-reveal-id="myModal" data-reveal-ajax="http://google.com">
    Click Me For A Modal
</button>

<div id="myModal" class="reveal-modal" data-reveal></div>

Don't work :(

Cristyan J. Moreno over 5 years ago

Hi, Stéphane, you are missing the "href" tag and to set the "data-reveal-ajax" to true.

Hope it helps

Stéphane Richin over 5 years ago

Hi Cristyan !

I've changed with , but no result.

My div is without content :

<a html="http://foundation.zurb.com/" data-reveal-id="myModal" data-reveal-ajax="true">
    Click Me For A Modal
</a>

<div id="myModal" class="reveal-modal" data-reveal></div>

Sumit Kapur over 5 years ago

I too am having this problem and am using the same example as Stephane. Any help would be appreciated!

Stéphane Richin over 5 years ago

Hi sumit,

My problem is not solved :( if you happen to it, do not hesitate to propose the solution :)

Sumit Kapur over 5 years ago

Crap. I didn't use the Insert Code functionality. So here is my answer again:

Hello Stephane. I think I got it!

Here's the deal.

Make a link and empty reveal modal div as below:

 <a data-reveal-id="myModal" data-reveal-ajax="http://0.0.0.0:3000/posts/5346cc00c5a2219d670000ee" data-reveal>
  Click Me For A Modal
</a>
<div id="myModal" class="reveal-modal" data-reveal>
</div>

You see above I also have the link to the content hard coded into the data-reveal-ajax attribute. This will call the show template for my posts controller. This link must return something very simple. in fact the link must return only what should be placed inside the empty reveal modal div above. So it cannot use the regular application.html.erb layout. You need a new layout. I created modal.html.erb in views/layouts which is just:

<%= yield %> 

Then at the top of my posts controller, I have:

layout "modal", only: [:show]

This makes it so the show action uses the modal layout. So now I set posts/show.html.erb to:

<a class="close-reveal-modal">&#215;</a>
hi 

And wala! It works. The key is that the link "http://0.0.0.0:3000/posts/5346cc00c5a2219d670000ee" must only return some content for inside the div. It can't have a div with class = reveal-modal or any start and end html tags or anything like that.
Good luck buddy!

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).