Foundation 6 Reveal ajax not working

Question

Foundation 6 Reveal ajax not working

1.6k Views Asked by Luca At 17 June 2016 at 18:32

I'm trying to create a reval Modal Foundation 6 and Ajac, but does not work. I followed the official guide

Page html

<!DOCTYPE html><html lang="it">
<head>
 <title>Avvisi</title>
 <link href="http://ci.dev/assets/css/foundation.min.css" rel="stylesheet" type="text/css" />
<script src="http://ci.dev/assets/js/vendor/jquery.min.js" type="text/javascript">
</script><script src="http://ci.dev/assets/js/foundation.min.js" type="text/javascript"></script><script src="http://ci.dev/assets/js/foundation.reveal.js" type="text/javascript"></script><link href="http://ci.dev/assets/css/reveal.css" rel="stylesheet" type="text/css" /><link href="http://ci.dev/assets/css/motion-ui.css" rel="stylesheet" type="text/css" /><script src="http://ci.dev/assets/js/vendor/what-input.min.js" type="text/javascript"></script><script src="http://ci.dev/assets/js/vendor/motion-ui.js" type="text/javascript"></script></head>
<body>
<h2>Title</h2><p>Message</p>
<span><a href='http://ci.dev/AR-PIB/warn/edit_v/160/284'>Edit</a></span><span id='160|284'><a class='big-link' href='#' data-reveal-id='myModal' data-animation='fade'>Delete</a></span></div><hr/>
<script type="text/javascript">jQuery(document).ready(function() {
 jQuery('.big-link').click(function(){
 var dati = jQuery(this).parent().attr('id');
 var $modal = $('#modal');
 alert($modal)
 $.ajax({'http://ci.dev/AR-PIB/Warn/delete'})
 .done(function(resp){
 alert(resp);
 jQuery('body').append(resp); 
 $modal.html(resp.html).foundation('open');
 conaole.log(resp);
  });
 });
});
</script>
<script src="http://ci.dev/assets/js/app.js" type="text/javascript"></script></body></html>

Original Q&A

There are 3 best solutions below

**tymothytym** · Answer 1 · 2016-06-18T20:20:40.480000

I'm not sure why it's not working exactly as I can't run your code (the links http://ci.dev/... seem to be local to your machine), but it may be one of the following:

You have an close div but no open
You're attempting to use the Foundation JS ($modal.html(resp.html).foundation('open'); etc.) before you have initialised Foundation (if in app.js, per your comment, this is after the Reveal code)
foundation.min.js (unless you have generated a slimmed down version) includes both the motion UI and the reveal so you don't need to add each JS file
You're missing a ; after alert($modal)
I think you mean console.log(resp); rather than conaole.log(resp);
You reference the element $('#modal') but there is no element on the page with the id modal (your link also has data-reveal-id='myModal')

**Renato Galvones** · Answer 2 · 2016-07-29T12:20:18.113000

Renato Galvones On 29 July 2016 at 12:20

According to the Foundation Docs:

http://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins

Just add a Foundation.reInit('abide'); and it should work right away!

**dams** · Answer 3 · 2017-11-01T18:19:09.983000

I found a solution that works with Zurb Foundation 6.3.2, as explain in https://foundation.zurb.com/sites/docs/javascript.html#programmatic-use

in the ajax done function :

var $modalContent = new Foundation.Reveal($('#modalContent'));
$modalContent.open();

Foundation 6 Reveal ajax not working

There are 3 best solutions below

Related Questions in AJAX

Related Questions in ZURB-FOUNDATION

Related Questions in ZURB-REVEAL

Trending Questions

Popular # Hahtags

Popular Questions