So far I can now delete the record using modal, but it just needs to go to the page delete-page. I want to delete the record with confirmation before deleting (using modal) and then delete the record without refreshing the page.
This is what I've tried so far:
<script type="text/javascript">
$(function() {
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
$("#btn-delete").click(function(e) {
$("#dialog-example").modal('hide');
});
});
</script>
<?php
$stmt2 = $conn->prepare("SELECT project_code, description FROM tblprojects");
$stmt2->execute();
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];
?>
<tr class="record" id="record-">
<td>
<a href="project-detail.php?code=<?php echo $project; ?>">
<?php echo $project; ?></a>
</td>
<td><?php echo $desc; ?></td>
<td>
<a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
</td>
<td>
<a href="#"
data-id="<?php echo $project; ?>"
id="<?php echo $project; ?>"
class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">No<a>
<a href="delete-project.php?code=<?php echo $project; ?>"
data-id="<?php echo $project; ?>"
class="btn btn-danger" id="btn-delete">Yes<a>
</div>
</div>
</tr>
<?php
}
?>
Any ideas? Thank you for your help.
Try this:
$("#btn-delete").click(function(e) {
e.preventDefault();
$.get(this.href, function(){
$("#dialog-example").modal('hide');
});
});
I do this all in the time in my projects but didn't want to post it since the code might not mean anything to others (and it's fairly long) but this is what I do:
<!-- Delete Modal -->
<div id="delete_modal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel">Delete</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12"></div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button id="delete_confirm" class="btn red btn-primary" data-dismiss="modal">Delete</button>
</div>
<!-- Submit Delete Modal -->
<div id="submit_delete_modal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" tabindex="-1">
<div class="modal-header">
<h3 id="myModalLabel">Deleting</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12">
<div class="alert alert-info">Deleting... <img src="/images/loading.gif" alt="Deleting..." /></div>
</div>
</div>
</div>
</div>
So that's the two modals I use, one for the confirmation and another to show that the item is actually being deleted.
This is the JS:
$('.delete').click(function() {
$('#delete_modal .modal-body div div').html('Are you sure you want to delete this row?');
});
// this is the delete button in the confirmation modal
$('#delete_confirm').click(function() {
$('#delete_modal').modal('hide');
$('#submit_delete_modal').modal('show');
$.ajax({
url: '/delete-page',
data: { id: id },
type: "POST",
cache: false,
success: function(data) {
if (data === '1') {
// delete the row from the DOM
$('tr#record-' + id).fadeOut('slow').remove();
$('#submit_delete_modal .modal-body div div').html('<div class="alert alert-success"><i class="icon-ok-sign"></i> The row has been deleted</div>');
} else {
$('#submit_delete_modal .modal-body div div').html('<div class="alert alert-error"><i class="icon-exclamation-sign"></i> Deletion failed, please refresh the page and try again</div>');
}
},
error: function() {
$('#submit_delete_modal .modal-body div div').html('<div class="alert alert-error"><i class="icon-exclamation-sign"></i> Deletion failed, please refresh the page and try again</div>');
}
});
return false;
});
Just a pointer, looking at your tr markup, are you meaning to put the id from the database as part of the row id?
You have <tr class="record" id="record-"> so every row has the same id, if you add the correct parameter there every row will have a unique id and the delete part in the ajax callback will work.
The only thing that remains is to get the id when something is clicked but I'm finding it hard to tell what link you are using to perform the delete.
It should be something like this:
var id; // put this as the very first line of js, if it's in the global scope it can be accessed from anywhere, it's not best practise though.
$(document).on('click', '.some_class_name', function() {
id = $(this).parent().parent().attr('id').split('-').pop();
$('#delete_modal .modal-body').html('Are you sure that you want to remove this row?');
$('#delete_modal').modal('show');
// uncomment this to check you're getting the correct id and that it's not undefined etc
// alert('id');
return false;
});
I've tried to make everything generically named to avoid stuff from my projecting bleeding in but I might have missed some things and made some errors when renaming elements etc.
Related
i created an articles and each article has an id. i made a modal window for viewing the detailed articles inside modal window you can insert a comment and like the article but the problem is when i tried to click the other article the id that he gets is only the first id that was created.what i wanted to do is that when i tried to click the article it will get the article id and show it to the modal.
here is my sample code.
this is the button that i clicked for me to show the modal window
span style="color:#59960b;" class="read" data-toggle='modal' data-target="#myModal">Read more..</span><input type="hidden" value="<?php echo $articleid; ?>"></span>
MODAL WINDOW
<?php
$output = $db->viewArticle($articleid);
foreach ($output as $key):
if($key['art_id'] == $articleid){
?>
<!--view Modal content-->
<div id="articlepost" class="modal-content-article">
<div class="modal-header-article">
<input type="hidden" name="aid" id="aid" value="<?php echo $articleid ?>"/>
<button type="button" style="padding-left:1155px;position:fixed;" class="close" data-dismiss="modal">×</button>
<img src="./<?= $key['art_cphoto'];?>" style="margin-left:100px;"/>
</div>
<div class="modal-body">
<div align="center" style="color:#222;">
<strong class="font-2" id="title"><?php echo $arttitle ?></strong>
<?php }?>
<?php
foreach ($db->countarticlecomment($articleid) as $value) {
?>
<span class="font-1-2" style="margin-right:10px;">
<i class="fa fa-comment" style="color:#59960b;"></i> <span style="color:gray;"><b><?php echo $value['comments']?></b></span>
</span>
<hr>
<?php }?>
</div>
</div>
<?php
$out = $db->articleviewcount($articleid);
foreach ( $db->viewarticlecomment() as $value) {
if($articleid = $value['artid']){
?>
<div id="mycomments" class="col-lg-8" style="background:#eff9c7;color:#222;margin-left:170px">
<span class="" style="margin-left:10px;font-size:.9em;color:gray;"><abbr class="timeago" title="<?php echo $value['artsend']?>"></abbr></span>
</p>
</div>
<?php
}
}
?>
<div class="col-lg-8" style="background:#eff9c7;margin-left:170px">
<br>
<input type="text" name="artcomment" id="artcomment" class="form-control pull-right" style="width:92%;margin-top:5px;margin-bottom:10px;" placeholder="Comments..." />
<br><br>
</div>
<?php endforeach ?>
<br>
<div class="row">
</div>
<br>
</div>
</div>
</div>
how can i get the value of the $articleid so that when i clicked one of the articles it will send the (id)value to the modal window so that the id of the article will be the one to shown. i tried using jquery to get the $articleid and it works but my problem is how can i use the id from my jquery to my modal? i tried searching and they said to use ajax. i tried it also and declared my modal window in a variable but my concern is my modal has 2 forloops inside and also when i tried to use the jquery function only the latest article is clickable not the other articles. even if i can get the id of the article if i cannot clicked the other article it doesn't make anysense. so is there any way i can get the id and use it in a modal..? btw this script is both inside 1php file.
I would recommend that you use the Global data attribute to send the article id to the modal. You can learn about the data attribute here:
https://www.w3schools.com/tags/att_global_data.asp.
Below is a code snippet that shows how the data attribute works.
You'll notice that in the button there is an custom data attribute called data-articleid and that I have set it's value to xyz. You would set it's value to <?php echo $articleid ?>. I can't use php here.
When the button openBtn is clicked, a function is called and a variable called articleId gets the value of the attribute data-articleid and then sets the text of title inside the modal to articleId.
// function to open the modal, get the data attribute, and set the title text
$('#openBtn').click(function() {
$('#myModal').modal('show');
var articleId = openBtn.getAttribute("data-articleid");
$('#title').text(articleId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<!-- I can't use php in this snippet so I'm just hardcoding a data-articleid of "xyz". You should echo your article id instead. -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-articleid="xyz" id="openBtn">Open Modal</button>
<!-- Modal -->
<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" id="title"></h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Maybe you could output all articles as their own modals and assign them their own ID's, so that they wouldn't be named as myModal (<div id="myModal) but instead myModal1, myModal2etc.
Then the links would look like this
<span style="color:#59960b;" class="read" data-toggle='modal' data-target="#myModal<?php echo $articleid; ?>">Read more..</span>
This would work if you don't have too many articles, if there is a lot of data, you should use Ajax.
I'm using the loop to create a new module every time a new post is published. The ID is assigned using id="modal-<? the_ID(); ?>"
Now I want people to be able to visit the site from an external link with a module already open. I can do this js if I know the ID of the modal, like so (using dreamsModal-23 as an example):
var target = document.location.hash.replace("#", "");
if (target.length) {
if(target=="dreamsModal-23"){
$("#dreamsModal-23").modal('show');
}
}else{
}
Since these modal's are dynamically created though, obviously I don't know the IDs before they're created.
Is there a way I can I can append any ID to the js so that it will take any value and work? Basically I'm looking for this:
var target = document.location.hash.replace("#", "");
if (target.length) {
if(target=="dreamsModal-ANYTHING"){
$("#dreamsModal-WHATEVER-ID-IS-APPENDED-ABOVE").modal('show');
}
}else{
}
As always, any help is greatly appreciated!
EDIT ----
Here's an example of the modal markup in the loop:
<div class="modal fade" id="dreamsModal-<? the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="dreamsModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="dreamsModalLabel">Manifested Dream #<? the_ID(); ?></h4>
</div>
<div class="modal-body">
<p><?php echo substr(the_title('', '', FALSE), 0, 140); ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn-main" data-dismiss="modal">Close</button>
<?php $next_post = get_next_post();
if (!empty( $next_post )): ?>
<
<?php endif;
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
>
<?php endif; ?>
</div>
</div>
</div>
</div>
And here's the trigger for above example:
<a data-id="<?php the_ID(); ?>" data-toggle="modal" class="clickme">
<article id="post-<?php the_ID(); ?>">
<div class="content">
<p class="post-title"><?php echo substr(the_title('', '', FALSE), 0, 140); ?></p>
</div> <!-- .content -->
</article> <!-- .article -->
</a>
js for trigger:
$(".clickme").on ("click", function(){
$("#dreamsModal-" + $(this).attr('data-id')).modal();
});
You could simply use the data-target attribute that comes for default with the Modal Plugin to make modal popup, so you could change your code like this:
<a data-target="#dreamsModal-<?php the_ID(); ?>" data-toggle="modal" >
<article id="post-<?php the_ID(); ?>">
<div class="content">
<p class="post-title"><?php echo substr(the_title('', '', FALSE), 0, 140); ?></p>
</div> <!-- .content -->
</article> <!-- .article -->
</a>
This way you could remove your the script that triggers the modal, because it would be unnecesary, and change the script I linked to you in the comment to this:
$(document).ready(function(){
$(window.location.hash).modal('show');
$('a[data-toggle="modal"]').click(function(){
window.location.hash = $(this).attr('data-target');
});
});
EDIT
As navigation also worked on href, then you can change the href atribute to data-target as well
<?php $next_post = get_next_post();
if (!empty( $next_post )): ?>
<a data-target="#dreamsModal-<?php echo $next_post->ID; ?>" class="btn-main" data-dismiss="modal" data-toggle="modal"><</a>
<?php endif;
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
<a data-target="#dreamsModal-<?php echo $prev_post->ID; ?>" class="btn-main" data-dismiss="modal" data-toggle="modal">></a>
<?php endif; ?>
How i can pass image,title and description to bootstrap modal?
when one image link click the modal open with that image title and description.
my code is:
<?php
$result = mysql_query("SELECT * FROM project");
$file_path = 'admin1\projectimages/';
while($post=mysql_fetch_array($result)){
$id=$post['id'];
$ptitle=$post['Title'];
$image=$post['Image'];
$des=$post ['Description'];
$src = $file_path . $post['Image'];
echo'<li class="col-md-4 col-sm-6"><h4 class="project_heading">'.$ptitle.'</h4>
<img src='.$src.' style="width:250px; border:1px solid red;"></li>';}
?>
Modal Code:
<div class=" modal fade bs-example-modal-lg" role="dialog" id="modal" aria-hidden="true" data-keyboard="true" data-backdrop="static" tabindex="-1">
<a href="#modal" class="fa fa-times cls-pop" data-dismiss="modal" id="thanks" ></a>
<div class="modal-dialog modal-lg clearfix">
<div class="modal-content pop-up">
<h3 >Title</h3>
<div class="clearfix">
<div>
<img src=" " style="width:99%; border:1px solid red;">
<p></p><p ></p>
<p></p></div>
</div>
</div>
</div>
</div>
You can pass data from PHP to HTML by using echo.
So here: <h3 >Title</h3>
you would put: <h3><?PHP echo $ptitle; ?></h3>
The shorter notation for this is <?= $ptitle; ?>
It will work just fine as long as 1) your HTML is working and 2) your variables are getting populated.
Set image src in tag
<li>
<a href="#modal" class="fa open_model" data-toggle="modal" data-placement="right"><h4 class="project_heading" data-imgsrc="'.$src.'" data-desc="'.$ptitle.'">'.$ptitle.'</h4>
</a>
<a href="#modal" class="fa ok open_model" data-toggle="modal" data-target="#modal" data-placement="right" data-imgsrc="'.$src.'" data-desc="'.$ptitle.'">
In your model html
<div class="modal-content pop-up">
<h3>Title</h3>
<div class="clearfix">
<div>
<img id="model_img" src="" style="width:99%; border:1px solid red;">
<p></p><p ></p><p></p>
</div>
When you click on the link set the image src and description to model
set in your js file
$(document).on("click", ".open_model", function () {
var imgSrc = $(this).data('imgsrc');
var desc = $(this).data('desc');
$(".modal-content #model_img").attr('src',imgSrc);
});
If you set it well than it will works
Here is the html that generates an array of 6 objects called from the DB (this is working fine), and prints them to a bootstrap row.
<div class="row products">
<?php while($product = mysqli_fetch_assoc($featured)) : ?>
<div class="col-md-2 col-sm-6">
<div class="product">
<div class="image">
<img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive">
<div class="quick-view-button"><button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button></div>
</div>
<div class="text">
<h3> <?= $product["manufacturer"]; ?></h3>
<p class="price">$<?= $product["rrp"]; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
Here is the Jquery to generate the modal
<script>
function quickModal(recid) {
alert(recid)// checked it was receiving ID
// setting an id object as recid from db
var data = {"id" : recid};
jQuery.ajax({
url : '/MagV4(Final)/includes/quickModal.php',
method : "post",
data : data,
success: function(data){
jQuery('body').append(data);
jQuery('#product-quick-view-modal').modal('toggle');
},
error: function(){
alert("something wrong");
}
});
}
</script>
Here is the modal code, Now I know the ID is being passed (alert from Modal) but the modal doesn't generate new content after the first modal is loaded, (there are 6 different mag wheels) so if for example I load the modal for the first mag with id 1, the second mag which is id 7 also creates a modal for id 1.
Using $_POST['id'] doesn't work in the modal for some reason.
<?php
require_once '../core/dbcon.php';
if(isset($_GET['id'])) {
$id = $_GET['id'];
$id = (int)$id;
}
echo $id;
$sql = "SELECT * FROM wheels WHERE recid = '$id'";
$result = $db->query($sql);
$product = mysqli_fetch_assoc($result);
$sql = ""
?>
<?php ob_start(); ?>
<!-- quick view modal box-->
<div id="product-quick-view-modal" tabindex="-1" role="dialog" aria-hidden="false" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
<div class="row quick-view product-main">
<div class="col-sm-6">
<div class="quick-view-main-image"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></div>
<!-- Ribbons
<div class="ribbon ribbon-quick-view sale">
<div class="theribbon">SALE</div>
<div class="ribbon-background"></div>
</div>
<!-- /.ribbon
<div class="ribbon ribbon-quick-view new">
<div class="theribbon">NEW</div>
<div class="ribbon-background"></div>
</div>
<!-- /.ribbon-->
<div class="row thumbs">
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
</div>
</div>
<div class="col-sm-6">
<h2 class="product__heading"><?= $product['manufacturer']; ?></h2>
<p class="text-muted text-small text-center">Great Tyre for all vehicle types</p>
<div class="box">
<form action="add_cart.php" method="post">
<p class="price"><?= $product['rrp']; ?></p>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="modal_size">Choose your size</label>
<select id="modal_size" class="form-control">
<option value=""></option>
<option value=""></option>
</select>
</div>
<p>Current Stock: 3</p>
<div class="form-group">
<label for="modal_quantity">Quantity</label>
<input type="number" value="1" id="modal_quantity" class="form-control">
</div>
</div>
</div>
<p class="text-center">
<button type="submit" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Add to cart</button>
<button type="submit" data-toggle="tooltip" data-placement="top" title="Add to wishlist" class="btn btn-default"><i class="fa fa-heart-o"></i></button>
</p>
</form>
</div>
<!-- /.box-->
<div class="quick-view-social">
<h4>Show it to your friends</h4>
<p><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i><i class="fa fa-twitter"></i><i class="fa fa-envelope"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-dialog-->
</div>
<!-- /.modal-->
<!-- /quick view modal box-->
<?php echo ob_get_clean(); ?>
added in the new script but now the modals after the first just flash and then disappear with the same information.
<script>
$('a[data-toggle="modal"]').on('click', function(){
// update modal header with contents of button that invoked the modal
$('#quick-view-button').html( $(this).html() );
//fixes a bootstrap bug that prevents a modal from being reused
$('#product-quick-view-modal').load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});
</script>
After further research, I found a few Bootstrap issues mentioning this behaviour here and here. I've asked for issue 5514 to be reopened.
Meanwhile, this jQuery will patch up the problem*:
$('a[data-toggle="modal"]').on('click', function(){
// update modal header with contents of button that invoked the modal
$('#myModalLabel').html( $(this).html() );
//fixes a bootstrap bug that prevents a modal from being reused
$('#utility_body').load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});
Please see http://jsfiddle.net/jhfrench/qv5u5/51/ for a working example.*
So, in your case, you'd also edit the calling button from <button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button> to Quick view. FWIW, I favor this "link invokes modal" approach (vs "button invokes modal") because this also allows the user to right-click the link and open the modal's contents in a new browser tab, should they so-choose. So think through the implications of that UX.
*-For some reason, sometimes when you click the button in the fiddle the modal will show blank. This is not a problem in the application I'm working with, so I suspect it's a problem unrelated to this question/answer.
I'm trying to pass a variable from my link to ajax, but I cannot do so.
This is the code I'm working on:
<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
$("#btn-delete").click(function(e) {
var id = $(this).attr('data-id');
$.ajax({
type:"POST",
data: { id : id },
url:"delete-project.php",
success:function(result){
$("#dialog-example").modal('hide');
}
});
});
});
</script>
<table class="table table-bordered">
<tr>
<td>Project Code</td>
<td>Description</td>
</tr>
<?php
$stmt2 = $conn->prepare( "SELECT project_code, description FROM tblprojects" );
$stmt2->execute();
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];?>
<tr class="record" id="record-">
<td>
<?php echo $project; ?>
</td>
<td><?php echo $desc; ?></td>
<td>
<a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
</td>
<td>
<a href="#" data-id="<?php echo $project; ?>" id="<?php echo $project; ?>" class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">No<a>
<a data-id="<?php echo $project; ?>" class="btn btn-danger" id="btn-delete">Yes<a>
</div>
</div>
</tr>
<?php
}
?>
</table>
I have a table where it has a delete column, if it is clicked a confirmation modal will appear that has 2 options yes or no. If yes is clicked, I need to delete that record and dismiss the modal, display the result without refreshing the page. How can I do that? I tried using ajax, I don't know if I am using it correctly. Your help will greatly appreciated. Thanks.
IDs must be unique in your DOM.
You have multiple links with id="btn-delete". That is the reason your code is not working
Change it to class, as below
In your markup:
<a data-id="<?php echo $project; ?>" class="btn btn-danger btn-delete">Yes<a>
And in your jQuery:
$(".btn-delete").click(...);
IDs must be unique Change to class instead and use $(this).data("id")
You also likely want to hide the deleted data from the page too
<a data-id="<?php echo $project; ?>"
class="btn btn-danger btn-delete">Yes<a>
$(".btn-delete").on("click",function(e) {
e.preventDefault(); // cancel the link
var id = $(this).data('id');
$.ajax({
type:"POST",
data: { id : id },
url:"delete-project.php",
success:function(result){
$(this).closest("tr").remove(); // remove the row from view
$("#dialog-example").modal('hide');
}
});
});
Lastly I suggest you have only ONE dialog on the page and pass the ID to delete and ID or the row to it
Passing data to a jQuery UI Dialog
You're just hiding the modal when the delete success event is executed. You have to remove the line from the table too.
You can remove it like this :
$(this).parents('tr').remove();
UPDATE :
The following code was tested and is working. If you still have error, you should open firebug and report the error message. You have some basic syntax problem or errors in your code, I corrected some in this solution, but you should look at tutorials or documentations to learn basic and good practice to provide a good structured code.
Just replace the html table lines (tr) below with your php loop to generate the lines.
<!-- place your modal out of a table. In a table you have tr and td, no div.
By the way you just need 1 modal for all rows -->
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
No
Yes
</div>
</div>
<table class="table table-bordered">
<tr>
<th>Project Code</th>
<th>Description</th>
<th>Actions</th>
</tr>
<tr class="record" id="record-1">
<td>
project1
</td>
<td>description</td>
<td>
<a href="update-project.php?code=proj1" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
<a href="#" data-id="proj1" id="proj1" class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
</tr>
<tr class="record" id="record-2">
<td>
project2
</td>
<td>description</td>
<td>
<a href="update-project.php?code=proj2" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
<a href="#" data-id="proj2" id="proj2" class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
</tr>
</table>
<script>
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
var btnDelete = $("#btn-delete");
//show the modal
$("#dialog-example").modal('show');
//save the id to delete if confirmed
var id=$(this).attr('data-id');
btnDelete.data('toRemove', id);
return false;
});
//action when clicking YES
$("#btn-delete").click(function(e) {
var id = $("#btn-delete").data('toRemove');
alert(id);
$.ajax({
type:"POST",
data: { id : id },
url:"delete-project.php",
success:function(result){
//hide the modal
var modal = $("#dialog-example");
modal.modal('hide');
var btnDelete = $("#btn-delete");
//remove the saved id
var id= btnDelete.data('toRemove');
//remove the row dynamically
$("#"+id).closest('tr').remove();
},
error:function( jqXHR, textStatus ) {
alert( "Request has failed! ; " + jqXHR.status + " / "+textStatus);
}
});
});
});
</script>