I am using php,mysql and ajax to delete record from a table. The problem is that the in MySQL_query it not getting the id it shows "id= undefined", i tried to pass the id to the query but i don't know where i went wrong i tried to print MySQL its shows
delete from 9xx WHERE id = undefinedArray
(
[rowid] => undefined
[supplier] => 9xx
)
can anyone tell me how to pass the id ...thanks
My ajax
$(".deletesuppliernetwork").live('click',function()
{
arr = $(this).attr('class').split( " " );
var supplier=document.getElementById("supplier").value;
if(confirm("Sure you want to delete this update?"))
{
$.ajax({
type: "POST",
url: "suppliernetwork/delete.php",
data: "rowid="+arr[2]+"&supplier="+supplier,
success: function(data){
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
}});
}
});
My html
<?php
include"db.php";
$supplier_id=$_GET['supplier_id'];
if($supplier_id!=""){
$sql=mysql_query("select * from $supplier_id order by country,networkname" );
while($rows=mysql_fetch_array($sql))
{
if($alt == 1)
{
echo '<tr class="alt">';
$alt = 0;
}
else
{
echo '<tr>';
$alt = 1;
}
echo ' <td style="width:123px" class="edit supplier '.$rows["id"].'">'.$rows["supplier"].'</td>
<td style="width:104px" class="edit rn '.$rows["id"].'">'.$rows["rn"].'</td>
<td style="width:103px" class="edit sc '.$rows["id"].'">'.$rows["sc"].'</td>
<td style="width:108px" class="edit comment '.$rows["id"].'">'.$rows["comment"].'</td>
<td style="width:62px" class="deletesuppliernetwork '.$rows["id"].'"><img src="/image/delete.png" style="margin:0 0 0 17px" ></td>
</tr>';
}
}
?>
delete.php
<?php
include"db.php";
$supplier=$_POST['supplier'];
$rownum=$_POST['rowid'];
$sql="delete from $supplier WHERE id = ".$rownum."";
print $sql;
mysql_query($sql);
print_r($_POST);
?>
<td style="width:62px" class="deletesuppliernetwork '.$rows["id"].'"><img src="/image/delete.png" style="margin:0 0 0 17px" ></td>
the index of your ID is 1, that is second index. not 2.
$.ajax({
type: "POST",
url: "suppliernetwork/delete.php",
data: "rowid="+arr[1]+"&supplier="+supplier,
success: function(data){
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
}});
var rowObj = $(this);
$.ajax({
type: "POST",
url: "suppliernetwork/delete.php",
data: "rowid="+arr[1]+"&supplier="+supplier,
success: function(data){
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
$(rowObj).parents("tr:first").hide();
}});
this should hide your complete row.
Related
I have a table where I can edit a specific row in it:
<table class="table table-hover" id="patient_name_table">
<tr id="after_tr_2">
<th>Patient</th>
<th>Phone</th>
<th>D.O.B</th>
<th>Address</th>
<th>Edit</th>
</tr>
<tbody>
<?php foreach($name_array as $tabName) { ?>
<tr id="<?php echo $tabName['id']; ?>">
<td id="nameid"><?php echo ''.$tabName['patient_name'].'';?></a>
</td>
<td id="phoneid"><?php echo $tabName['phone']?></td>
<td id="dobid"><?php echo $tabName['dob']?></td>
<td id="addressid"><?php echo $tabName['patient_address']?></td>
<td><button type="button" class="btn btn-info" id="editInfo">Edit</button>
</tr>
<?php } ?>
</tbody>
</table>
Now I use jquery to get the selected row ID and a dialog box appears:
$(document).ready(function()
{
$("#patient_name_table #editInfo").on('click', function()
{
var id = $(this).closest('tr').attr('id');
var row = $(this).closest('tr');
$('#dialog').dialog({
autoOpen: false,
hide: "puff",
show : "slide",
width: 800,
modal: true
});
$( "#dialog" ).dialog( "open" );
$.ajax({
url: 'info.php',
data: {patient_id: id},
type: 'POST',
dataTyoe: 'JSON',
success:function(res2)
{
$("#name_upd").val(res2['patient_name']);
$("#phone_upd").val(res2['phone']);
$("#dob_upd").val(res2['dob']);
$("#address_upd").val(res2['address']);
},
error:function(res2)
{
console.log("Error");
}
});
$("#upd_info").on('click', function()
{
var upd_name = $("#name_upd").val();
var upd_dob = $("#dob_upd").val();
var upd_phone = $("#phone_upd").val();
var upd_address = $("#address_upd").val();
$.ajax({
url: 'upd_patient.php',
data: {upd_id: id, n: upd_name, d: upd_dob, p:upd_phone, a:upd_address},
type: 'POST',
dataType: 'JSON',
success:function(res3)
{
$( "#dialog" ).dialog( "close" );
},
error:function(res3)
{
console.log("Error Updating info");
}
});
});
});
});
And this is the dialog:
Now after successfully updating the information, I need to change the data of this specific row, without refreshing the page.
The file upd_patient.php script:
$sql = "UPDATE patient_info SET patient_name = :n, patient_address = :a, phone = :p, dob = :d WHERE id = :id AND id_logged = :idl";
$stmt = $conn->prepare($sql);
$stmt->bindValue(":n", $name);
$stmt->bindValue(":a", $address);
$stmt->bindValue(":p", $phone);
$stmt->bindValue(":d", $dob);
$stmt->bindValue(":id", $id);
$stmt->bindValue(":idl", $id_logged);
$exec = $stmt->execute();
$res3 = array("patient_name"=>$name, "dob"=>$dob, "phone"=>$phone, "address"=>$address);
}
catch(PDOException $e)
{
echo $e->getMessage();
}
echo json_encode($res3);
So my question, how to append the new updated information that are added into array res3 into the updated row in my table without refreshing the page.
<?php
while ($row = mysqli_fetch_array($query,MYSQLI_BOTH))
{
$id= $_POST['tran_no'];;
?>
<tbody>
<tr id=<?php echo $row['trans_no']?>>
<td><?php echo $row['trans_no']?></td>
<td><?php echo $row['obj_code']?></td>
<td><?php echo $row['div_no']?></td>
<td><?php echo $row['check_no']?></td>
<td><?php echo $row['payee']?></td>
<td><?php echo $row['payment']?></td>
<td><?php echo $row['add']?></td>
<td><?php echo $row['amount']?></td>
<td><?php echo $row['amountw']?></td>
<td>
<img src="image/remove.png">
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".delete").click(function(){
var element = $(this);
var del_id = element.attr("trans_no");
var info = 'trans_no=' + del_id;
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(){
}
});
$(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>
My problem is the ajax code doesnt seem to delete the row i dont know if the ajax code is executed or not. help would be much need, and please give me an insight as to what is the problem with my code or if i have to add something. heres the delete.php
<?php
$con = mysqli_connect("localhost","root"," ","dole") or die("Could not connect database");
if($_POST['trans_no'])
{
$id=$_POST['trans_no'];
$delete = "DELETE FROM table_no WHERE trans_no = '$id'";
$res=mysqli_query($con,$delete);
}
?>
OPTION 1:
You are assigning id from database to id attribute and in AJAX, reading trans_no.
trans_no attribute is not set for the delete link.
That is why you are not getting it.
Change your HTML to
<img src="image/remove.png">
To make it HTML5 Compliant:
<img src="image/remove.png">
And change JS:
var del_id = element.attr("data-id");
OPTION 2
Just change the line:
var del_id = element.attr("trans_no");
To
var del_id = element.attr("id");
And use your existing code.
It will work.
Try the below code,
$(".delete").click(function(){
var element = $(this);
var del_id = this.id;// use this.id as your database id related to element id
var info = {trans_no : del_id};
if(confirm("Are you sure you want to delete this?")){
$.ajax({
type: "POST",
url: "delete.php",
data: info,
success: function(data){
if(data=='success'){
// hide only in case of successful deltion
element.parents(".show").animate({ backgroundColor: "#003" }, "slow")
.animate({ opacity: "hide" }, "slow");
} else {
alert('Error while deleting');
}
}
});
}
return false;
});
And in PHP return success or error like,
<?php
$con = mysqli_connect("localhost","root"," ","dole") or die("Could not connect database");
$status='error';
if(isset($_POST['trans_no']) && $_POST['trans_no']){
$id=$_POST['trans_no'];
$delete = "DELETE FROM table_no WHERE trans_no = '$id'";
$res=mysqli_query($con,$delete);
if($res){// only success in case of deleted.
$status='success';
}
}
echo $status;
?>
Try this:
$(function() {
$(".delete").click(function(){
var element = $(this);
var transNoVar = element.attr('id');
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
type: "POST",
url: "delete.php",
data: {
trans_no: transNoVar
},
success: function(data){
// delete.php return 1 on success 0 otherwise, check it here
if(data=='1') {
// on success hide the tr
// add class="show" to the tr
$(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
.animate({ opacity: "hide" }, "slow");
} else {
alert('Error deleting your record');
}
}
});
}
return false;
});
});
There is a div element :
...
<div id="liste_secteurs"></div>
...
<script type="text/javascript">
$(document).ready(function() {
rechercheSecteursEtProduits(0); // setting the div's content
$('#btnSupprimer').click(function() { // btnSupprimer = button generated from an ajax called inside previous function "rechercheSecteursEtProduits"
if ($(':checkbox[id^="prod_"]:checked').length > 0) {
var msg = "Do you want to remove these records ?";
if (confirm(msg)) {
$(':checkbox[id^="prod_"]:checked').each(function(){
var type = "",id="";
if($(this).val() == "") { // delete secteur
type = "secteur";
var tabIdx = $(this).attr("id").substr(5);
id = $("#secteur_"+tabIdx).val();
} else { // delete produit
type = "produit";
id = $(this).val();
}
$.ajax({
data: "type="+type+"&id="+id,
type: "POST",
url: "<?php echo HTTP_AJAX ?>service/SupprimerSecteursProduitsUserAjax.php", // deleting database row
async: false
});
});
rechercheSecteursEtProduits(0); // this causes the bug : the "delete" button does not work anymore after this code is called !
}
}
});
});
function rechercheSecteursEtProduits(pn){
var user = "<?php echo $_SESSION[CODE_USER]; ?>";
var html = $.ajax({
data: "id_user="+user,
type: "POST",
url: "<?php echo HTTP_AJAX ?>service/ListerProduitsUserParSecteursAjax.php?pn=" + pn,
async: false
}).responseText;
$('#liste_secteurs').html(html); // this is the div element
}
</script>
Code of ListerProduitsUserParSecteursAjax.php :
<?php
... // getting database data
?>
<p>Total : <?php echo $nr; ?></p>
<div><img src="<?php echo HTTP_ICON.'plus.png'; ?>" /></div>
<?php echo $paginationDisplay; ?>
<table id="table" class="data display " >
<thead style="background-color:#CCC">
<tr>
<th><?php echo _getText("service.produit.form.secteur_activite");?></th>
<th><?php echo _getText("service.produit.form.titre");?></th>
<th></th>
<th><?php if($data["secteur"]["cnt"] > 0){ ?><input type="checkbox" id="check_all"><?php }?></th>
</tr>
</thead>
<tbody style="background-color:#FFF">
<?php
if($data["secteur"]["cnt"] > 0){
for($i=0;$i<$data["secteur"]["cnt"];$i++){?>
<tr class="odd gradeX">
<td><?php echo $data["secteur"][$i]["secta_lib_fr"] ?></td>
<td><?php echo $data["secteur"][$i]["produit_lib"] ?></td>
<td align="center" style="vertical-align:middle"><img src="<?php echo HTTP_ICON.'edit.png'; ?>" alt="<?php echo _getText('main.btn.modifier'); ?>" style="height:10px;width:10px;" /></td>
<td align="center" style="vertical-align:middle"><input type="checkbox" id="prod_<?php echo $i; ?>" value="<?php echo $data['secteur'][$i]['id_user_produit']; ?>"><input type="hidden" id="secteur_<?php echo $i; ?>" value="<?php echo $data['secteur'][$i]['id_user_secteur']; ?>"></td>
</tr>
<?php } ?>
<?php
}
else{
?>
<tr class="odd gradeX">
<td colspan="4" align="center"><b><?php echo _getText('main.liste.no_data'); ?></b></td>
</tr>
<?php }?>
</tbody>
</table>
<?php if($data["secteur"]["cnt"] > 0){ ?>
<div align="right"><input name="btnSupprimer" id="btnSupprimer" type="button" value="<?php echo _getText("main.btn.delete"); ?>" class="btn btn-blue"/></div>
<?php } ?>
<?php echo $paginationDisplay; ?>
When the page loads for the first time then the delete button works fine : the selected rows are deleted , and the list reappears accordingly to new database data. But later when I want to delete other rows then the alert does not show when I check some checkboxes and clicking the delete button !
So what is wrong in my approach ?
From what I am reading you are having problems with the row that are added from the database.
What could be the problem is when you execute this peace of code:
$('#btnSupprimer').click(function() { // btnSupprimer = button generated from an ajax called inside previous function "rechercheSecteursEtProduits"
When you call the $.click() function you add a event to all the existing DOM object that have a id of 'btnSupprimer', however this doesn't update if you add a new DOM object. So what you should do is call this function every time you add a new row. you would get something like this:
function rechercheSecteursEtProduits(pn){
var user = "<?php echo $_SESSION[CODE_USER]; ?>";
var html = $.ajax({
data: "id_user="+user,
type: "POST",
url: "<?php echo HTTP_AJAX ?>service/ListerProduitsUserParSecteursAjax.php?pn=" + pn,
async: false
}).responseText;
$('#liste_secteurs').html(html);
$('#btnSupprimer').click(addClickHandler()); // this is the div element
}
function addClickHandler(){
if ($(':checkbox[id^="prod_"]:checked').length > 0) {
var msg = "Do you want to remove these records ?";
if (confirm(msg)) {
$(':checkbox[id^="prod_"]:checked').each(function(){
var type = "",id="";
if($(this).val() == "") { // delete secteur
type = "secteur";
var tabIdx = $(this).attr("id").substr(5);
id = $("#secteur_"+tabIdx).val();
} else { // delete produit
type = "produit";
id = $(this).val();
}
$.ajax({
data: "type="+type+"&id="+id,
type: "POST",
url: "<?php echo HTTP_AJAX ?>service/SupprimerSecteursProduitsUserAjax.php", // deleting database row
async: false
});
});
rechercheSecteursEtProduits(0); // this causes the bug : the "delete" button does not work anymore after this code is called !
}
}
}
I hope it helps
Try using on instead of click as below
$('#btnSupprimer').on("click","#liste_secteurs",function() { // btnSupprimer = button generated from an ajax called inside previous function "rechercheSecteursEtProduits"
if ($(':checkbox[id^="prod_"]:checked').length > 0) {
var msg = "Do you want to remove these records ?";
if (confirm(msg)) {
$(':checkbox[id^="prod_"]:checked').each(function(){
var type = "",id="";
if($(this).val() == "") { // delete secteur
type = "secteur";
var tabIdx = $(this).attr("id").substr(5);
id = $("#secteur_"+tabIdx).val();
} else { // delete produit
type = "produit";
id = $(this).val();
}
$.ajax({
data: "type="+type+"&id="+id,
type: "POST",
url: "<?php echo HTTP_AJAX ?>service/SupprimerSecteursProduitsUserAjax.php", // deleting database row
async: false
});
});
rechercheSecteursEtProduits(0); // this causes the bug : the "delete" button does not work anymore after this code is called !
}
}
});
Use the dynamic jquery selector instead of the regular 'click' event
$('#liste_secteurs').on('click', '#btnSupprimer', function() {});
// $("container").on("event", "button", function() {});
As from Caveman's answer I made some updates :
function rechercheSecteursEtProduits(pn) {
var user = "<?php echo $_SESSION[CODE_USER]; ?>";
var html = $.ajax({
data: "id_usermer="+user,
type: "POST",
url: "<?php echo HTTP_AJAX ?>service/ListerProduitsUserParSecteursAjax.php?pn=" + pn,
async: false
}).responseText;
$('#liste_secteurs').html(html);
$('#btnSupprimer').on('click',function(){
if ($(':checkbox[id^="prod_"]:checked').length > 0) {
if (confirm("Do you want to remove these records ?")) {
$(':checkbox[id^="prod_"]:checked').each(function(){
var type = "",id="";
if($(this).val() == "") { // delete secteur
type = "secteur";
var tabIdx = $(this).attr("id").substr(5);
id = $("#secteur_"+tabIdx).val();
} else { // delete produit
type = "produit";
id = $(this).val();
}
$.ajax({
data: "type="+type+"&id="+id,
type: "POST",
url: "<?php echo HTTP_AJAX ?>service/SupprimerSecteursProduitsUserAjax.php", // deleting database row
async: false
});
});
rechercheSecteursEtProduits(0);
}
}
});
}
And it works !
My function jQuery include on my head html
$(function() {
$(".deletePage").click(function() {
var pageId = $(this).attr("id");
$.ajax({
type: "post",
url: "delete_page.php",
cache: false,
data:'id=' + pageId,
success: function(response){
try{
if(response=='true'){
parent.slideUp('slow', function() {$(this).remove();});
}
}catch(e) {
alert('Exception while request..');
}
},
error: function(){
alert('Error while request..');
}
});
}
}
And my html with listPage
<table class="table table-hover">
<thead>
<tr>
<td><strong>title page</strong></td>
<td><strong>URL</strong></td>
<td><strong>Edit</strong></td>
<td><strong>Delete</strong></td>
</tr>
</thead>
<tbody>
<?php
while($row_Q = mysql_fetch_array($sql_Q)){
?>
<tr>
<td><?php echo $row_Q["title"]; ?></td>
<td><?php echo $row_Q["permalink"]; ?></td>
<td>
</td>
<td>
<button type="button" class="btn btn-danger">
<a class="deletePage" href="#">Delete</a>
</button>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
Why not working jQuery and not delete selected page?Any help me please?I want that click on the button "DELETE" the row its delete without going other page
thank you
You have an error. You're trying to get the page ID, but it doesn't exist in your HTML code.
Add the ID to your <a> and you're set.
I fix the problem :)
You said to me that add the Id to me and yes this is a one problem but I have more problems.
This is my new function in jQuery
$(function() {
$(".deletePage").click(function() {
var pageId = $(this).attr("id");
var parent = $(this).parent();
if(confirm("Delete me?")){
$.ajax({
type: "post",
url: "delete_page.php",
cache: false,
data: 'id=' + pageId,
dataType: "text",
success: function(response){
location.reload();
try{
if(response=='true'){
parent.slideUp('slow', function() {$(this).remove();});
}
}catch(e) {
alert('Exception while request..');
}
},
error: function(){
alert('Error while request..');
}
});
}
return false;
});
});
I have an HTML table generated by PHP querying from MySQL table.
<table>
<tr>
<th>Sl</th>
<th>ID</th>
<th>Article Name</th>
<th>Publish Status</th>
</tr>
<?php
$i = 1;
foreach ($obj->showAllFromTable('pattern') as $pattern) {
extract($pattern);
?>
<tr>
<td><?php echo $i++; ?></td>
<td><?php echo $id; ?></td>
<td><?php echo $pattern_name; ?></td>
<td id="publish_<?php echo $id; ?>" class="status_pattern">
<?php echo $publish; ?>
</td>
</tr>
<?php
}
?>
</table>
I want to change the status of any article by clicking on the 'publish' cell of the corresponding article row. I am trying to use ajax method of jquery for this purpose as shown in the following:
<script type="text/javascript">
$(document).ready(function(){
$('.status_pattern').click(function(){
var thisid = $(this).attr('id');
$.ajax({
url: "status_change_pattern.php",
data: {
id: thisid
},
success: function (response) {
alert(response);
}
});
});
});
</script>
In the "success" block, instead of "alert", I want to create a functionality to change the text of the specific cell which I clicked. The "status_change_pattern.php" has just a text "Hey Hey".
Can anyone help? Please.
Thanks.
You have to use closure to preserve the id.
<script type="text/javascript">
$(document).ready(function(){
$('.status_pattern').click(function(){
var thisid = $(this).attr('id');
$.ajax({
url: "status_change_pattern.php",
data: {
id: thisid
},
success: function (id) {
return function (response) {
$("#" + id).html(response);
}
}(thisid)
});
});
});
</script>
You need to write,
success: function (response) {
$(thisid).html(response);
}
Here in response, you need to get new status.
The solution provided by SajithNair works. Thanks to SajithNair. But it can also be done without using closure. As shown below:
$('.status_pattern').click(function() {
var thisid = $(this).attr('id');
$.ajax({
url : "status_change_pattern.php",
data : {
id : thisid
},
success : function(response) {
$('#' + thisid).html(response);
}
});
});
Thanks