Hi guys I am having problem with my ajax passing postID to my modal . var pid gets the id I wanted but when I echo the postID it doesnt get the value from ajax. please help
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var pid = $(e.relatedTarget).data('id');
$.ajax({
type: 'post',
url: 'domain/modal.php',
data: 'post_id=' + pid,
success: function (r) {
}
});
});
});
<a class="link-to-post" data-toggle="modal" data-target="#myModal" name="modal" data-id="<?php echo get_the_ID(); ?>">Button</a>
<?php
$post_ID = $_POST['post_id'];
?>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<?php echo $post_ID;?>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
</div>
</div>
</div>
Can you try this code?
change data: 'post_id=' + pid,
to data:{ 'post_id': pid },
add an id in the div where you want to put your id. Something like:
<div id="idContainer" class="col-sm-6"></div>
in your success function you could add this
$('#idContainer').html(pid);
Related
I have a modal script that I created in php and the script works fine but the php closing tag ?> is not closing at the end, tried putting the script in the header using echo but then the script dose not work at all also tried using just php removing the Script tags that did not work been working on for a while any help would be greatly appreciated.
<?php
include("db_config.php");
include('includes/session.inc');
$Title = _('Check Inquiry');
$ViewTopic = 'AccountsPayable';
$BookMark = 'AccountsPayable';
include('includes/header.inc');
include('includes/SQL_CommonFunctions.inc');
echo '<link href="' . $RootPath . '/css/bootstrap.min.css" rel="stylesheet" type="text/css" />';
echo '<script src = "'.$RootPath.'/javascripts/jquery.min.js"></script>';
echo '<script type="text/javascript" src = "'.$RootPath.'/javascripts/bootstrap.min.js"></script>';
$query = "select * from banktrans where type=".'22';
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_array($result)){
$transID = $row['transno'];
echo "<tr>";
echo "<td><button data-id='".$transID."' class='btn btn-info btn-sm btn-popup'>Details</button></td>";
echo "</tr>";
}
echo <<<'HTML'
<!-- Modal -->
<div class="modal fade" id="custModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Check Details</h4>
<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 type="text/javascript">
$(document).ready(function () {
$('.btn-popup').click(function () {
var transno = $(this).data('id');
$.ajax({
url: 'get_check_data.php',
type: 'post',
data: { transno: transno },
success: function (response) {
$('.modal-body').html(response);
$('#custModal').modal('show');
}
});
});
});
</script>
HTML;
include('includes/footer.inc');
?>
Yes it dose appear I added the HTML in a separate php file and it works but the closing tag ?> is still not working as expected normally it shows up in NP++ in red when closed but shows as normal text but does not appear on page I am just wondering if it will create any issues that way.
Here is the code for the include modal.php
echo <<<'HTML'
<!-- Modal -->
<div class="modal fade" id="custModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Check Details</h4>
<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 type="text/javascript">
$(document).ready(function () {
$('.btn-popup').click(function () {
var transno = $(this).data('id');
$.ajax({
url: 'get_check_data.php',
type: 'post',
data: { transno: transno },
success: function (response) {
$('.modal-body').html(response);
$('#custModal').modal('show');
}
});
});
});
</script>";
HTML;
?>'''
I am using bootstrap modal to show to data which is fetched from the database. I have this code for load remote PHP data into bootstrap modal. it is work. but i need to add a loading message into the modal until data fetch from database. I have this code for load remote PHP data into bootstrap modal box
index.html
<script>
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type : 'post',
url : 'fetch_subjects.php', //Here you will fetch records
data : 'rowid='+ rowid, //Pass $id
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
}
});
});
});
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subjects</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="fetched-data"> </div> <!--fetched dates here -->
</div>
<div class="modal-footer">
<button type="butZton" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
fetch_subjects.php
<?php
require 'db_connection.php';
if($_POST['rowid']) {
$id = $_POST['rowid'];
$sql = "SELECT * FROM subject where year=$id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<div class='list-group'>
<b>
<a href='notes?id=". $row['id'] ."' class='list-group-item list-group-item-action' target='_blank'>
" . $row["name"]. "
</a>
</b>
</div>
</button>";
}
}
else {
echo "no details.";
}
}
?>
I would do that this way:
$.ajax({
type : 'post',
url : 'fetch_subjects.php', //Here you will fetch records
data : 'rowid='+ rowid, //Pass $id
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
},
beforeSend: function() {
$('#loader').show(); // Assuming that you have some loader defined
},
complete: function(){
$('#loader').hide(); //Hide this loader
},
});
<script>
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type : 'post',
url : 'fetch_subjects.php', //Here you will fetch records
data : 'rowid='+ rowid, //Pass $id
beforeSend: function() {
$('.loader').show(); // Assuming that you have some loader defined
},
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
$('.loader').hide();
},
});
});
});
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subjects</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- loader -->
<div class="loader">
loading.............
</div>
<div class="fetched-data"> </div> <!--fetched dates here -->
</div>
<div class="modal-footer">
<button type="butZton" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
i have try everything but still doesn't work. My popup windows only up until header and button but it wont show the body where all the data is in.
$(document).on('click','.delete_data',function(){
var delete_id = $(this).attr('id') ;
$.ajax ({
URL : "showbekalan.php",
type : "post",
data = {delete_id:delete_id},
success: function(data){
$("#deleteInfo").html(data);
$("#delete").modal('show');
}
});
});
<!-- Modal content-->
<td class="column100 column6" data-column="column6">
<a href="#delete" type="button" class="btn btn-danger delete_data" id="<?php echo $id ;?>" data-toggle="modal">
<font size="3">Padam</font>
</a>
</td>
<div class="modal fade" id="delete" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<font size="6px"><b>Padam</b></font>
</h4>
</div>
<div class="modal-body" id="deleteInfo">
<form class="contact100-form validate-form" action="deletebekalan.php?bid=<?php echo $id;?>" method="post" id="deleteForm">
<div class="container-contact100-form-btn">
<button class="contact100-form-btn" id="deleteButt">
<span>
Padam
<i class="zmdi zmdi-arrow-right m-l-8"></i>
</span>
</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
</div>
</div>
</div>
</div>
Try to change this:
$(document).on('click','.delete_data',function(){
var delete_id = $(this).attr('id') ;
$.ajax ({
URL : "showbekalan.php",
type : "post",
data = {delete_id:delete_id},
success: function(data){
$("#deleteInfo").html(data);
$("#delete").modal('show');
}
});
});
to this:
$(document).on('click','.delete_data',function(){
var delete_id = $(this).attr('id') ;
$.ajax ({
URL : "showbekalan.php",
type : "post",
data = {delete_id:delete_id},
success: function(data){
$("#delete").modal('show');
$("#delete #deleteInfo").html(data); //Assuming that modal window has class modal
}
});
});
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>
I am displaying two functions in Modal head and Modal body using ajax.
Before sending ajax request the modal looks like this
After ajax response the modal looks like this
Where is the issue?
Cart.php
include('includes/Cart_code.php');
<?php
if (isset($_POST['ID'])) {
$cart_class = new cart_class($_POST['ID']);
$cart_class->cart_head_info_print();
$cart_class->cart_body_info_print();
exit();
}
?>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "POST",
url: "Cart.php",
data: {"ID":id},
success: function(result){
$('#ajaxResult').html(result);
}
});
});
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<img src="" class="showPic">
<div id="ajaxResult">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<!---HERE HEADER DATA WILL BE DISPLAY---->
</div>
<div class="modal-body" style="padding:40px 50px;">
<!---HERE BODY DATA WILL BE DISPLAY---->
</div>
</div>
</div>
</div>
</div>
Please the take product name from ajax response and append to the header part like below,
success:function(data){
if(!data){$('#ajaxResult .modal-header').append(data);}
}
as the same append into corresponding div for description and all.
REF: How to return PHP variables on success AJAX/jQuery POST
Hope you will found the answer here.!!