My code works fine in this way
posts.php?id=<?php echo $post_id?; ?>
It goes to the link and shows the post.
I need to stop going in that link and show that inside the modal. How can i do it
Note: I can simply include that inside the modal but can not pass the id .
<li data-toggle="modal" data-target="#myModal"><a href="posts.php?id=<?php echo $post_id; ?>" >See post</a></li>
<div id="myModal" class="modal fade" 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>
<h4 class="modal-title">Post</h4>
</div>
<div class="modal-body">
// include the posts.php here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div></div>
we can do this using ajax see the below code
in php file write the content what to display
$("#dynamicdata").click(function(){
var dyid=$(this).attr("posts_id");
$.ajax({
url:"posts.php",
type:"post",
dsta:{'id':dyid},
success:function(data){
$('#myModalbody').html('');
$("#mymodelbody").html(data);
}
});
});<li data-toggle="modal" data-target="#myModal" posts_id="<?php echo $post_id; ?>" id="dynamicdata"><a href="#" >See post</a></li>
<div id="myModal" class="modal fade" 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>
<h4 class="modal-title">Post</h4>
</div>
<div class="modal-body" id="mymodelbody">
// include the posts.php here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div></div>
try this code, first you must add js include in your file html or in one file your html and change some your code html like this
$(document).on("click", "[name=btnPreview]", function (event) {
event.preventDefault();
var id = $(this).parent().attr('id')
$.get("post.php?id=" + id, function (data) {
if (data.desc == 'ok') {
var datas = data.content;
document.getElementById('contentBody').innerHTML += datas;
$('#myModal').modal('show')
}
});
});<li data-toggle="modal" data-target="#myModal" data-id="<?php echo $post_id; ?>">
<a href="#" name="btnPreview">See post</a></li>
----------
<div class="modal-body" id="contentBody">
//after your click See post, post will show in here
</div></div>
Why don't you use BootBox ? it's simple and very handy, here is a quick example for your needs I just crafted :
<?php // fake modal output handler
if (isset($_GET['fakeit'])){
$random_robot = md5(rand());
die("<img src='https://robohash.org/$random_robot.png'>");
}
?><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
<!-- CSS dependencies -->
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<p>
<ul id="my_list" >
<?php foreach (range(1,5) as $post_id) { // this is just to fake some post links ?>
<li><a href="javascript:showModal(<?php echo $post_id; ?>);" >See post <?php echo $post_id; ?></a></li>
<?php } ?>
</ul>
</p>
<!-- JS dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- bootbox code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
</html>
<?php
$SITE_URL = '?fakeit#'; // change this to your real site url
?>
<script>
function showModal(id) {
$.ajax({ // regular jQuery ajax call
type: 'GET',
url: '<?php echo $SITE_URL; ?>/posts.php?id=' + id,
success: function (data) {
bootbox.dialog({
message: data,
title: "Robot number :" + id,
buttons: { // here you can define your modal's buttons
button1: {
label: "Got it !",
className: "btn-default",
callback: function () {
console.log("Button 1 clicked !");
// code de be executed before closing the modal (when the user clicks the button)
}
}
},
size: "large"
});
}
});
}
</script>
</body>