Recently updated Zurb's Foundation4 to version 5 and encountered an issue with the reveal functionality. Despite starting fresh with a new framework download, I am still unable to get the reveal feature to work properly as it did in version 4.
Here is the code I have tried:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.0/modernizr.min.js"></script>
</head>
<body>
<h1>Reveal Test</h1>
<p><a href="/server.php?id=1234" data-reveal-id="myModal1" data-reveal-ajax="true">Load via a href ajax (calling /server.php) - works!</a></p>
<p><a id="fire-via-js">Load via javascript</a></p>
<div id="myModal1" class="reveal-modal" data-reveal><a class="close-reveal-modal">×</a></div>
<div id="myModal2" class="reveal-modal" data-reveal><a class="close-reveal-modal">×</a></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation.min.js"></script>
<script>
$(document).foundation();
$(document).ready(function() {
// url with custom callbacks
$('#fire-via-js').click(function() {
$('#myModal2').foundation('reveal', 'open', {
url: '/server.php?id=5678',
success: function(data) {
alert('modal data loaded');
},
error: function() {
alert('failed loading modal');
}
});
});
});
</script>
</body>
</html>
The server.php file being called simply contains:
<?php
echo "hello world...<br />";
if(isset($_GET['id'])) {
echo "got the id : ". $_GET['id'] ."<br />";
}
Although the documentation states that "Ajax-based Reveal modals can also be opened via JavaScript," when attempting to load it through JavaScript, the output from the PHP file does not display in the modal.
If there is a basic oversight on my part after spending hours trying to transition old calls to the new system, any guidance would be greatly appreciated!