Solved

How to delete records on clicking an image in different rows in html table using ajax

Posted on 2015-02-03
20
141 Views
Last Modified: 2015-02-14
Hello there,

I am trying to delete a record based on the delete image at the end of each row in html5 table. I am just a beginner in ajax jQuery.  I think there is something wrong in the jquery part. The record is not deleting from the database, although on clicking the  "x" rounded button, it shows that the record is deleted Please Help
I am sending an image that will help you in solving and understanding my problem :
SampleFollowing is my code :
1. cart.php
<?php session_start(); ?>
<?php
include ("dbcon.php");
include("BrowserDetection.php"); 
include("included_functions.php"); 
?>
<!DOCTYPE html>
<html>
  <head>
  <title></title>
  <script type="text/javascript" src="js/modernizr.js"></script>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="js/fabric.js"></script>
  <link rel="stylesheet" type="text/css" href="css/dsgncnv.css">
  <script type="text/javascript">
    $("table#display td a.delete").click(function()	{
     if (confirm("Are you sure you want to delete this row?"))
     {
	var id =  $("td:nth-child(1)", this).text();
	var data = 'id=' + id ;
	var parent = $(this).parent().parent();
	$.ajax(
	{
	   type: "POST",
	   url: "delrow.php",
	   data: data,
	   cache: false,
	   success: function()
	   {
	     parent.fadeOut('slow', function() {$(this).remove();});
	   }
	});				
     }
    });
    $('table#display tr:odd').css('background',' #FFFFFF');
   });
  </script>
  </head>
<body>
  <div class="hdr-txt">
   <span class="spnid">SHOPPING CART</span>
  </div>
  <hr style="float:left; margin-left:5%; width:90%; height:1px; background-color:#D7D5D5; margin-bottom:10px" />

  <div class="disp_recs">
    <?php
        $var = trim($_SESSION['rahul@xys.com']);
	$query = "SELECT user_id FROM user_dtls where u_emailid = '{$var}'";
	$retrv = mysqli_query($connection, $query);
	$retrvarr = mysqli_fetch_array($retrv);
	if (!$retrvarr)
	{ die("Database Query failed." . mysqli_error($connection)); }
	else {$getid = $retrvarr[0];}

	//get details based on id
	$pickrecs = "SELECT t_ordid, DATE_FORMAT(tord_dt,'%d-%m-%Y') as label_date, file_path, file_name FROM utmp_orders where user_id = '{$getid}'";
	$result = mysqli_query($connection, $pickrecs); ?>
        <table id='display'>
          <thead>
	    <tr>
		<th>Labels</th>
		<th>Creation&nbsp;Date</th>
		<th>Total&nbsp;Price (&nbsp;&pound;&nbsp;)</th>
		<th></th>
            </tr>
	  </thead>
	  <?php while($resultarr = mysqli_fetch_assoc($result)){ ?>
	  <tbody>
	    <tr>
		<!--<td style="display:none;"><?php //echo $resultarr["t_ordid"] ?></td>-->
		<td><?php echo $resultarr["t_ordid"] ?></td>
		<td><?php echo $resultarr["label_date"] ?></td>
		<td><?php
		$pickrecs = "SELECT rt_qty, rt_cost FROM rate_mast order by rt_qty";
		$rtlist = mysqli_query($connection, $pickrecs); 
		echo "<select name='ratelist' value='' class='rdd'>";
		while($rtlistarr = mysqli_fetch_assoc($rtlist)){ 
		  echo "<option value = $rtlistarr[rt_qty] data-cost='" . $rtlistarr[rt_cost] . "'>$rtlistarr[rt_qty]</option>";
		}
		echo "</select>";
		?></td>
		<td><input type="text" name="i-cost" value="5.95" readonly class="icost"></td>
		<td><a href="#" class="delete" style="color:#FF0000;"><img src="images\cartidel.jpg" alt="" style="width:24px; height:24px"</a></td>					
	    </tr>
            <?php } ?>
         </table>
	 <?php 
	   mysqli_free_result($retrv);
	   mysqli_free_result($result);
	 ?>
      </div>
   </body>
</html>
<?php
	mysqli_close($connection);
?>

Open in new window


2. delrow.php
<?php session_start(); ?>
<?php
  include ("dbcon.php");
  if(isset($_REQUEST["id"])) 
  {
    $varid=$_REQUEST["id"];
    $query="delete * from utmp_orders where t_ordid ='{$varid}'";
    $result = mysqli_query($connection, $query); 
    if (!$result)
    { die("Database Query failed." . mysqli_error($connection)); }
    } else {
      echo '0';
    }
    exit;
?>
<?php
   mysqli_free_result($result);
   mysqli_close($connection);
?>

Open in new window

0
Comment
Question by:Suneet Pant
  • 9
  • 6
  • 3
  • +1
20 Comments
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 40588050
I realized that in your delrow.php file your query is:
$query="delete * from utmp_orders where t_ordid ='{$varid}'";

Open in new window

I think it must be:
$query="delete * from utmp_orders where t_ordid =$varid";

Open in new window


Without the brackets and the single quotations.

Also insure that your AJax call pass the id correctly by log the $query variable.
0
 

Author Comment

by:Suneet Pant
ID: 40588309
i have checked that but the same problem is coming again. data is not deleting from the table. Pls help
0
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 40588343
Did you log the "query" variable to ensure it's passed properly?
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:Suneet Pant
ID: 40588348
No. I actually don't know how to do that.
0
 

Author Comment

by:Suneet Pant
ID: 40588361
I tried to check using var_dump  :  echo var_dump($_REQUEST['id']); but nothing happened.

Also please see whether - var id =  $("td:nth-child(1)", this).text(); - is the correct syntax to get data from the hidden column.
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 40588482
Your ajax is not selecting the ID. This line here:

var id =  $("td:nth-child(1)", this).text();

Open in new window


Is trying to get the 1st TD within 'this', which is actually the <a> tag. Try this and see how you get on:

var currentRow = $(this).parents('tr');
var id =  $("td:nth-child(1)", currentRow).text();

Open in new window

0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 500 total points
ID: 40588483
Also, later in your code, you can use the currentRow variable to fade out:

currentRow.fadeOut('slow', function() {$(this).remove();});

Open in new window

0
 

Author Comment

by:Suneet Pant
ID: 40588597
Hi Chris. Thanks a million. I seriously now have started wondering how will you feel if I will ask for more help later on in the future.
Thank you very much for your timely help.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40588669
Hey Suneet.

No worries asking for more help. That's what we're here for. I don't always see new questions asked, so you can always comment on one I've already responded to and I'll get notified - just link to your new question and I should be able to take a look.

Don't forget to accept an answer and close off questions when you're done. Helps keep EE nice and clean :)
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40589703
greetings Suneet Pant, , as you are finding out, there is much more to using the javascript browser AJAX than you might think. You may should take some time to look at some ajax turorials to see some things that ARE NECESSARY to have a viable AJAX html page?

I will try and give you some suggestion about your PHP code in the  delrow.php  , your server side AJAX response.
Please consider, you CAN NOT use your OLD PHP web page thinking for an AJAX response page. You do NOT send back a full web page as you normally do in PHP.

you use this -
    if (!$result)
        { die("Database Query failed." . mysqli_error($connection)); }

you need to know that the AJAX receptor function you coded -
     success: function()
         {
           parent.fadeOut('slow', function() {$(this).remove();});
         }
Does not in any way check what the  delrow.php  sends back, so any success or failure of Database, or PHP page error will go unnoticed by this AJAX, this is incorrect AJAX programming, you need to at least be able to use-check the send back from delrow.php .

Your SQL syntax is not correct, a DELETE needs to be in this format -
     "DELETE FROM utmp_orders WHERE t_ordid=3"

It is vastly important to prevent SQL injection, so you MUST escape the  $varid  before you use it in a SQL string.

also, in your javascript, you are trying to "fish out" a ROW id value by getting the ROW and popping out the first <td> innerHTML, I find it easier and more efficient to add a "data-id" attribute to the <a> that is clicked, then you can just use the jquery   .data('id') on the this to get an ID to send up to AJAX server.
0
 

Author Comment

by:Suneet Pant
ID: 40590441
Hi Chris, I am here again. I have an Update Button over the top of the pic shown below :
PicNow please this time help me with the code as things are not coming in my mind how to do it. Lets say database table name is "cart", I want to update the contents of each row of the html table (as shown in the picture) to be saved in the "cart" table in one go using jquery and ajax. Rest of the code is same as above. Please help
0
 

Author Comment

by:Suneet Pant
ID: 40590460
Hi Chris, Sorry you solved my problem but by mistake I have given points to "Ahmed Merghani". This guy is of no help at all.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40590687
Hey Suneet,

No worries - I've unaccepted the answer so you can go ahead and re-accept it :)
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40590690
Don't quite understand your question about the update - the image doesn't show an update button. If you want to ask this as a new question, and just post a link to it here, I'll try and take a look.
0
 

Author Comment

by:Suneet Pant
ID: 40590860
Hi Chris. Thanks. Here is the link :
0
 

Author Comment

by:Suneet Pant
ID: 40590861
Sorry the link is here :
Link
0
 

Author Comment

by:Suneet Pant
ID: 40597983
I've requested that this question be deleted for the following reason:

My Subscription has ended so I removing my question
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40597984
The question was answered in full, so the OP should accept it - not delete the question!!
0
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 40598088
I think the thing that should be deleted is this kind of user like "Suneet Pant" who are manipulated!
There is no reason to delete this question at all. If the points will not be splitted as he mentioned
Hi Chris, Sorry you solved my problem but by mistake I have given points to "Ahmed Merghani". This guy is of no help at all.
at least "Chris Stanyon" must have all the points as he mentioned.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question