I am trying to display in a bootstrap modal the relevant image and information from a mysqli database table named prints and then display in the modal the image, title etc… the ajax call is working and loading the div where the response should go but none of the rest of the response is populating the modal?
my code is as follows:
database connection php: `
<?php
$dbhost = '*';
$dbuser = '*';
$dbpass = '*';
$dbname = '*';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
if(! $conn ) {
die('Could not connect: ' . mysqli_error());
}
//echo 'Connected successfully';
?>
This connects without errors and is called when needed
my main page where the database is being used to display thumbnails from the relevant table to then click and use a the modal pop up is as follows:
<?php include 'CreateDb.php';
ini_set('display_errors', 'on');
error_reporting(E_ALL);
$SQLprintsall = 'SELECT * FROM prints';
$printsall = mysqli_query($conn, $SQLprintsall);
?>
<div id ="shop-header">
<div id="cont-cart">
<p>BUY PRINTS</p>
<ul class="cart-actn">
<li><a class="fa fa-pound-sign" href="#"></a></li>
<li><a class="fa fa-shopping-cart" href="#"></a></li>
</ul>
</div>
<ul class="shop-filters">
<li class="filter-item">All</li>
<li class="filter-item"><a href="#">Landscapes</a></li>
<li class="filter-item"><a href="#">Animals</a></li>
<li class="filter-item"><a href="#">Europe</a></li>
<li class="filter-item"><a href="#">Scotland</a></li>
<li class="filter-item"><a href="#">England</a></li>
<li class="filter-item"><a href="#">Asia</a></li>
<li class="filter-item"><a href="#">Canada</a></li>
</ul>
</div>
<!--thumbnail images Loop-->
<div id="shop-thumbs">
<?php while($prints = mysqli_fetch_array($printsall)) : ?>
<div id="image-shop" class="image-holder">
<button type="button" data-id="<?php echo $prints['image']; ?>" class="img-btn btn-success
printinfo" >
<img src="<?=$prints['image_href']; ?>">
</button>
</div>
<?php endwhile; ?>
<!-- Modal -->
<div class="modal fade" id="empModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).on('click', '.printinfo', function(){
var printinfo = $(this).attr('data-id');
alert("'.$printinfo.'");
// AJAX request
$.ajax({
url: 'wp-content/themes/LEP/Modals/landscape-product-1.php',
type: 'post',
data: {printinfo: printinfo},
success: function(response){
console.log(printinfo);
alert(response);
// Add response in Modal body
$('.modal-body').html(response);
// Display Modal
$('#empModal').modal('toggle');
}
});
});
</script>
</div> <!-- end of containder from header.php -->
This then calls the modal pop up which is as follows
<?php
include "CreateDb.php";
$printinfo = 0;
if(isset($_POST['printinfo'])){
$printinfo = mysqli_real_escape_string($conn,$_POST['printinfo']);
}
$sql = "SELECT * FROM prints WHERE id =" .$printinfo;
$result = mysqli_query($conn,$sql);
$response = "<div class='modal-holder'>";
while( $prints = mysqli_fetch_array($result)){
$id = $prints['image'];
$image = $prints['image_href'];
$title = $prints['image_title'];
$response .= "<div>";
$response .= "<h1>".$title."</h1>";
$response .= "</div>";
$response .= "<div>";
$response .= "<img src=".$image_href.">";
$response .= "</div>";
}
$response .= "</div>";
echo $response;
?>
Everything works on the click but the modal doesnt load any of the reponse apart from the div that contains the response data?
The site is as above at http://landscapephotoprints.co.uk
any help would be greatly appreciated
Many thanks
3
Answers
I revised the original AJAX request to correctly pass the data as JSON objects and then use the data in the success function, rather than using PHP to display responses. As recommended by Velome I went down the JSON route and found a solution much quicker than trying to edit my original PHP responses
And changed the while loop select and setup the array to be returned
Problem is the way you do it, your code after "This then calls the modal pop up which is as follows" is not the way to do it.
You should never get HTML code/tags with an Ajax Request.
You should only get the "pure" data and integrate it with javascript in the DOM.
The ideal way after loading your PHP page from the server is that your JS Ajax queries only get non-html data as response, so in this exemple your html code to display the pic should already be in the div at the begining, maybe with a dumy pic. Your Ajax request should just receive the url of the pic (echo($picUrl) on server side) OR (even better) multiple infos like url+title+description+place as JSON (just create a PHP array on server side and use JSON_ENCODE($myArray)).
To be honest JSON is probably the way you should go to be able to send img url + all kind of other info to include in your modal.
It would give you for exemple something like that
{picSrc = "./img/pic043.png", title = "Great pic", date= "2020-11-18"}
if you encode this array :See detailed exemple here :https://makitweb.com/return-json-response-ajax-using-jquery-php/
To put it easy and without JSON as in your exemple, your Ajax request to "wp-content/themes/LEP/Modals/landscape-product-1.php" should give you back the picture url as a response (or as part of the response if you use JSON).
Also you should have already include a dumy image in the modal body like that :
So now if your Ajax call give you the picture url as response you just have to do this :
And Boom!, you should see your pic in the modal when clicking in the galery 🙂
To follow the nice job of Paul Stephen Davis, I will add some best practices stuff based on his response/code.
Keep in mind that the database native error message should be send out only in dev/debug mod, not in production because it can reveal important informations.
Keep also in mind this is not the "shinny way" to do it, to do it better you can use a "try catch" and throw error in the error check, exemple :
if(mysqli_connect_errno()) throw new Exception("Failed to connect to MySQL: " . mysqli_connect_error());