My code is working but the modal is showing same information for every button. I have to refresh the page each time to get information for other button .
there's the script and modal code
the id here is of the product fetched from database. i am new to web development still pursuing my degree.
<script>
function detailsmodal(id)
{
var data = {"id":id};
jQuery.ajax({
url : <?=BASEURL;?>+'/includes/detailmodal.php',
method : "POST",
data : data,
success : function(data)
{
jQuery('body').append(data);
jQuery('#details-modal').modal('toggle');
},
error :function()
{alert("something went wrong");}
});
}
</script>
<?php ob_start(); ?>
<div class="container">
<div class="modal fade" id="details-modal" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center"><?= $product['title'];?></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<img src="<?= $product['image'];?>" alt="<?= $product['title'];?>" class="details img-responsive"/>
</div>
<div class="col-sm-6">
<h4>Details</h4>
<p><?= $product['description'];?></p><hr>
<p>Price:₹ <?= $product['price'];?> </p>
<p>Brand: <?= $brand['brand'];?></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-warning" type="sumbit" class="glyphicon glyphicon-shopping-cart">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
Related
I want to edit/ update data that show in my page. The edit/ update data should done in modal. Below is code that I tried and it didn't work.
I tried lots of methods to done this. But not succeeded. IF anyone can help on this it would be very grateful. Thank you.
<?php
$query1=mysqli_query($dbconn, "SELECT * FROM food_menu WHERE status='1' AND category='Breakfast'" );
?>
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="card-deck">
<div class="card border-dark">
<div class="card-body">
<h3 class="card-title"><b>Breakfast Menu</b></h3>
<?php
while ($row1=mysqli_fetch_array($query1)){
$id=$row1['id'];
$name=$row1['name'];
$details=$row1['details'];
$category=$row1['category'];
$price=$row1['price'];
$image=$row1['image'];
?>
<div class="row">
<div class="col">
<div class="zoom">
<img src="<?php echo $image; ?>" class="rounded float-left img-thumbnail" alt="Food Image">
</div>
</div>
<div class="col">
<div hidden><?php echo $id; ?></div>
<h5><?php echo $name; ?></h5>
<h7><?php echo $details; ?></h7><br>
<h7><b>Rs. <?php echo $price; ?></b></h7><br>
<div class="text-right"><button type="button" class="btn btn-primary btn-sm editbtn" name="edit" id="edit" data-id="<?php echo $id; ?>" data-toggle="modal"><span class="icon text-white-100">
<i class="fas fa-pencil-alt"></i>
</span>UPDATE</button>
</div>
</div>
</div>
<br>
<?php } ?>
<button type="button" class="btn btn-success" name="add" id="add">Add New</button>
</div>
</div>
</div>
</div>
<!-- End of Page Content -->
My Modal is below
<div class="modal fade" id="editmodal" name="editmodal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post">
<input type="text" name="fid" name="fid" >
<input type="text" name="food_name" id="food_name">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
JavaScript Used.
<script>
$(document).ready(function(){
$('.editbtn').on('click', function(){
$('#editmodal').modal('show');
var ids = $(this).attr('data-id');
$(".modal-body #fid").val( ids );
$(".modal-body #food_name").val( ids );
});
});
</script>
When I click update button the modal is shown but data is not showing the modal.
Hi i'am a beginner in angular. I need to display a success message upon sending an email from modal popup and i'm trying to display the same in another popup.How can i display that?? my code part is
<div id="modalViewImportCode" class="modal fade btm-border" role="dialog" style="display:none;" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Email</h4>
</div>
<div class="modal-body" >
<p>Selectemail</p>
<div *ngFor="let primary of email; let i=index;">
<div *ngIf="primary">
<div class="clearfix">
<div class="margin-5-15">
<span class="pull-left modal3-checkbox">
<input type="checkbox" id="txt{{i}}" [(ngModel)]="primary.Current">
<label for="txt{{i}}"></label>
</span>
<span class="modal3-checkbox-label clsWordWrap width85per">{{primary.EmailAddress}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" (click)="sendMail()" class="btn btn-default">Send Email</button>
</div>
</div>
</div>
I tried something like below by butting below div under above code part
<div id="modalViewImportCodes" *ngIf="mailSent" class="modal fade btm-border" role="dialog" style="display:none;" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Email</h4>
</div>
<div class="modal-body">
<p>Sucess</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
sendMail() function triggers the mail.if success then "mailSent" become true.
thanks in advance.
Hi Jithin,
It very simple don't create new dialog, just use SweetAlerts after
your AJAX request completion these are very simple and easy. Trying
following steps.
Step 1:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Step 2:
Place in your desired location and change the message;
swal("Good job!", "You clicked the button!", "success");
References:
For more options and guidelines use the following URL:
https://sweetalert.js.org/guides/
Regards
I have a problem. I want my data dynamically view in modal. When I click first modal button its open dynamically and show data then when I click second button its show same previews data which opens first time. After reload the page when I click second its open dynamically again when I click first button its show second modal data.
Its WordPress site.
<a class="book-it-link" href="http://localhost/abc/modal/?id=<?=$row->id?>" data-toggle="modal" data-target="#myModal">Book IT</a>
<div class="modal booking-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<?php
foreach ($query as $row)
{
//var_dump($row);
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="row">
<div class="col-md-12">
<div class="booking-modal-form">
<form action="">
<div class="form-group">
<label>Check-in / Out</label>
<input type="text" class="form-control datepicker" id="datepicker" name="datefilter" placeholder="Check-in / Out">
</div>
<div class="info-text">
<?php echo $row->description ?>
</div>
<div class="book-it-btn">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</form>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
</div>
Jquery Modal data destroy code:
jQuery('body').on('hidden.bs.modal', '.modal', function () {
jQuery(this).removeData('bs.modal');
});
because you are repeating part of the dialog only not all dialog
try this
<?php
foreach ($query as $row)
{
//var_dump($row);
?>
<a class="book-it-link" href="http://localhost/abc/modal/?id=<?=$row->id?>" data-toggle="modal" data-target="#myModal<?=$row->id?>">Book IT</a>
<div class="modal booking-modal fade" id="myModal<?=$row->id?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="row">
<div class="col-md-12">
<div class="booking-modal-form">
<form action="">
<div class="form-group">
<label>Check-in / Out</label>
<input type="text" class="form-control datepicker" id="datepicker" name="datefilter" placeholder="Check-in / Out">
</div>
<div class="info-text">
<?php echo $row->description ?>
</div>
<div class="book-it-btn">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
I want to load upload.php inside of bootstrap modal box, here is my code
<h4>Update Database</h4>
<div class="btn-group btn-group-justified">
<div type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Update</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Step One 1</h4>
</div>
<div class="modal-body">
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div id="drop">
Update DB
<button>Upload</button>
</div>
<ul>
</ul>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But when I click on upload button, the page will redirect to upload.php
How can I load it inside of modal box after click on upload button?
Thanks in advance
while($row = mysqli_fetch_array($result_from_query)){
<a class="modal-trigger" href="#basicModal" data-toggle="modal" data-target="#basicModal" data-id="<?php echo $row['invoice_no']; ?>"><?php echo $row['invoice_no']; ?>
</a>
}
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Invoice Item</h4>
</div>
<div class="modal-body">
<input type="text" name="invoice" id="invoice" value=""/>
</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).on("click", ".modal-trigger", function () {
var invoiceNO = $(this).data('id');
$(".modal-body #invoice").val( invoiceNO );
});
</script>
so i have this code that send data to modal and put it in a <input name="invoice" />
now my question is i want to put it in a php variable to use it in a query inside the #basicModal div.
something like this
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Invoice Item</h4>
</div>
<div class="modal-body">
<?php
$result = mysqli_query($conn, 'SELECT item from invoice_tab where invoice no = ' $invoice_no);
$data = mysqli_fetch_assoc($result);
echo $data['item'];
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
but i have no idea on how to put the data in a php variable...can u pls guys help me in this...tnx
Why don't you use your:
$row['invoice_no'];
in your first example to fill the SQL query in the modal?