prints라는 mysqli 데이터베이스 테이블의 관련 이미지와 정보를 부트 스트랩 모달에 표시 한 다음 이미지, 제목 등을 모달에 표시하려고합니다 ... Ajax 호출이 작동하고 응답이 있어야 할 div를로드하지만 나머지 응답이 모달을 채우지 않습니까?
내 코드는 다음과 같습니다.
데이터베이스 연결 PHP :`
<?php
$dbhost = '*';
$dbuser = '*';
$dbpass = '*';
$dbname = '*';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
if(! $conn ) {
die('Could not connect: ' . mysqli_error());
}
//echo 'Connected successfully';
?>
오류없이 연결되며 필요할 때 호출됩니다.
해당 테이블의 썸네일을 표시하고 모달 팝업을 클릭하여 사용하기 위해 데이터베이스가 사용되는 내 메인 페이지는 다음과 같습니다.
<?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 -->
그러면 다음과 같은 모달 팝업이 호출됩니다.
<?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;
?>
모든 것이 클릭으로 작동하지만 모달은 응답 데이터를 포함하는 div를 제외하고는 응답을로드하지 않습니까?
이 사이트는 http://landscapephotoprints.co.uk 에서 위와 같습니다.
어떤 도움이라도 대단히 감사하겠습니다
많은 감사
데이터를 JSON 객체로 올바르게 전달한 다음 PHP를 사용하여 응답을 표시하는 대신 데이터를 성공 함수에 사용하도록 원래 AJAX 요청을 수정했습니다. Velome의 권장에 따라 JSON 경로를 따라 내려 가서 원래 PHP 응답을 편집하는 것보다 훨씬 더 빠른 솔루션을 찾았습니다.
$(document).on('click', '.printinfo', function(){
var printinfo = $(this).attr('data-id');
imageinfo = $(this).find().closest('img').attr('src');
alert(printinfo);
$('.modal-h1').html('');
// AJAX request
$.ajax({
url: 'wp-content/themes/LEP/Modals/landscape-product-1.php',
type: 'post',
dataType: 'json',
data: { printinfo: printinfo},
success: function(data){
console.log(data);
console.log(data[0].href);
console.log(data[0].id);
console.log(data[0].title);
alert(data);
$('.modal-header').prepend('<h1 class=modal-h1>' + data[0].title +'</h1>');
$('#modimg').attr('src', data[0].href);
$('#myModal').modal('toggle');
// Display Modal
}
});
});
그리고 while 루프 선택을 변경하고 반환 할 배열을 설정했습니다.
$printinfo = $_POST['printinfo'];
$sql = "SELECT * FROM prints WHERE image ='".$printinfo."' LIMIT 1";
$result = mysqli_query($conn, $sql);
$return_arr = array();
while($prints = mysqli_fetch_array($result)) : {
$id = $prints['image'];
$href = $prints['image_href'];
$title = $prints['image_title'];
$return_arr[] = array("id" => $id,
"href" => $href,
"title" => $title);
} endwhile;
$myJson = json_encode($return_arr);
echo $myJson;
exit;
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다