I have a simple bootstrap modal here: https://jsfiddle.net/blacode/kecyrv4q/
I´m trying to do the same but in a remote way with ajax. I've added a bit more of complexity adding glob function (PHP) to look for an image in a specific directory with image type validation in ajax request. Here is the code:
index.php
<body>
<div class="container">
<h2>Basic Modal Example</h2>
<!-- Trigger the modal -->
<a href="image.php" class="modalImage" data-toggle="modal" data-var="images/image/">
<img class="img-fluid" src="image.png" alt="" style="width:20%">
</a>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<img class="img-fluid img-responsive" src="" alt="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- Close modal content-->
</div>
</div>
<!-- Close modal -->
</div>
<!-- Close container -->
</body>
page to search image in specific directory (image.php):
<?php
header('Content-Type: application/json');
$directory = $_POST['var'];
echo json_encode (glob($directory. '*.{png,mp4}', GLOB_BRACE));
?>
ajax request:
$(document).ready(function(){
$('.modalImage').click(function (event) {
event.preventDefault();
var data = this.dataset;
$.ajax({
url: "image.php",
data: data,
type: "POST",
dataType: "json",
success: function(data) {
var imgs = data.map(function(img) {
var html = "";
var fileExtension = img.substring(img.lastIndexOf('.'));
if (fileExtension == ".png") {
return html = '<img src="'+img+'"></img>';
$('.modal-body').load(html,function(){
$('#myModal').modal({show:true});
});
}
});
}
});
});
});
Unfortunately the page doesn't respond. The console shows these warnings:
unreachable code after return statement
ReferenceError: $ is not defined
Is there a way to do that?
You are returning from the function before trying to set the html and showing the modal. Just set the value of html and then the html of the .modal-body element like below.
As for the issue with $ undefined, you need to reference jQuery prior to this script.
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('.modalImage').click(function (event) {
event.preventDefault();
var data = this.dataset;
$.ajax({
url: "image.php",
data: data,
type: "POST",
dataType: "json",
success: function(data) {
var imgs = data.map(function(img) {
var html = "";
var fileExtension = img.substring(img.lastIndexOf('.'));
if (fileExtension == ".png") {
html = '<img src="'+img+'"></img>';
$('.modal-body').html(html);
$('#myModal').modal({show:true});
}
});
}
});
});
});
</script>