Solved

how on clicking a button content of each row of html table be updated in database table using ajax jquery in php

Posted on 2015-02-05
31
493 Views
Last Modified: 2015-02-08
Hi Chris please 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 data should be updated onto this table ie. "cart". When a user click on button image, data should be updated on the basis of first hidden column "id". Below is the image of the table Rest of the code is same as above. Please help
Pic
<?php session_start(); ?>
<?php
include ("dbcon.php");
?>
<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
   $(document).ready(function() {
    $("select[name='ratelist']").change(function() {
     var cost = $("option:selected", this).data('cost');
     var currentRow = $(this).parents('tr'); // get the <tr> that contains the changed <select>
     $("input[name='i-cost']", currentRow).val(cost); // set the value of 'i-cost' in the currentRow only
    });
   });
  </script>
 </head>
<body>
  <div class="hdr-div">
    <div class="btnupdt">	<!-- Update all records back to database -->
      <a href="#"><img src="images/btnupdtcart.jpg" alt="" class="shw_updtbtn" /></a>
  </div>				

  <div class="disp_recs">
    <?php
        $var = '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>
	    </tr>
            <?php } ?>
         </table>
	 <?php 
	   mysqli_free_result($retrv);
	   mysqli_free_result($result);
	 ?>
      </div>
   </body>
</html>
<?php
	mysqli_close($connection);
?>

Open in new window

HELP.JPG
0
Comment
Question by:Suneet Pant
  • 18
  • 12
31 Comments
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
OK Suneet,

Firstly, when you ask a question, try not to direct it to anyone specifically - we're all here to help, and someone will always be along to give you some advice.

Right - this is going to need to be broken down into different parts - you'll have the jQuery part to get the data and make an AJAX request to your server-side script. The server-side script will need to be PHP script to do the actual database update.

Here's a quick overview on how to do the jQuery bit:

$('.btnupdt a').click(function(e){
	e.preventDefault(); // prevent the A target from being followed
	var data = new Array(); // prepare some data storage
	
	//loop through each TR
	$('table#cart tr').each(function() {
		// get the ID from the first TD and the value from the SELECT 
		var idnum =  $("td:nth-child(1)", this).text();
		var value = $("select[name='ratelist']", this).val();
		// add the id and value to the data array
		data[data.length] = {id: idnum, value: value};
	});
	
	// make the AJAX request to the server 
	$.ajax({
		type:     'POST',
		url:     'data.php',
		data:     { records: data }
	})
	// let the use know it worked
	.done( function(data) {
		console.log(data);
	})
	// let the user know it failed
	.fail( function(jqXHR, textStatus, errorThrown) {
		console.log(textStatus);
	});
});

Open in new window


The data is POSTed to the data.php script as the 'records' key, so your PHP script would need to loop through that and update the database:

<?php
foreach ($_POST['records'] as $record) {
	// update your database, one record at a time:
	// for example: "UPDATE yourTable SET someColumn = {$record['value']} WHERE yourID = {$record['id']}"
	echo $record['id'] . "|" . $record['value'] . PHP_EOL;
}

Open in new window


You'll notice that in the jQuery script, I use console.log(). This will put the output from your PHP script into your browsers console, so you can see what's happening - makes debugging easier.
0
 

Author Comment

by:Suneet Pant
Comment Utility
Sorry for that. I will remember this.
0
 

Author Comment

by:Suneet Pant
Comment Utility
It means that this jQuery will call data.php to update the database table row by row.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Yeah, that's right.

The jQuery will loop through each TR in your HTML page and build an array of the data, containing the IDs and Values for each row. It then POSTs that data to a server-side PHP script (called data.php in my example). That script will then need to loop through the POSTed data, and call an UPDATE statement for each record it finds.

The preferred way to code your PHP script is to use PDO - this is a PHP extension that makes working with databases much easier and more secure. Once you've got the jQuery bit working, I can walk you through the PHP part if needed.
0
 

Author Comment

by:Suneet Pant
Comment Utility
in data.php , What do I need to mention in the code shown below in bold numbers ' 1 ' and ' 2 '
<?php
  include ("dbcon.php");
  foreach ($_POST['records'] as $record) {
// update your database, one record at a time:
// for example: "UPDATE yourTable SET someColumn = {$record['value']} WHERE yourID = {$record['id']}"
   $query="update utmp_orders set lbl_qty =' [b]1[/b] ' , lbl_prc=' [b]2[/b] ' where t_ordid = {$record['id']}";
   $result = mysqli_query($connection, $query); 
   if (!$result)
   { die("Selected Record Deletion Failed." . mysqli_error($connection)); }
   echo $record['id'] . "|" . $record['value'] . PHP_EOL;
  }
?>
<?php
  mysqli_free_result($result);
  mysqli_close($connection);
?>

Open in new window

0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
You need to build the data in your jQuery script, so whatever you need in your PHP script, you'll need to pass through from your jQuery. If you want Qty, Price and ID, then you'll need to get the correct info. Something like this:

var id =  $("td:nth-child(1)", this).text(); //get the ID from the 1st TD of the current row
var qty = $("select[name='ratelist']", this).val(); // get the qty from the value of the <select>
var price = $("select[name='ratelist'] :selected", this).data("cost"); // get the price from the data-cost attribute of the <select>
// add the id, qty and price to the data array
data[data.length] = {id: id, qty: qty, price: price};

Open in new window


Now in your PHP, your update statement will look something like this:

$query="UPDATE utmp_orders SET lbl_qty = {$record['qty']}, lbl_prc = {$record['price']} WHERE t_ordid = {$record['id']}";

Open in new window

0
 

Author Comment

by:Suneet Pant
Comment Utility
In this statement "$('.btnupdt a').click(function(e)",  is .btnupdt an image button or input type submit button.

B'cause I have taken an Image Button
<div class="btnupdt">	
    <a href="#"><img src="images/btnupdtcart.jpg" alt="" class="shw_updtbtn" /></a> 
</div>				

Open in new window

0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
The HTML you've just posted is neither an image button or an input type submit button - it's simply an Anchor <a> containing an image, all wrapped up in a div with a class of btnupdt

$('.btnupdt a').click()

This jQuery will bind the click() event to an <a> element that's contained in an element with a class of btnupdt, which is exactly what your HTML shows.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
FYI, this is the code for an Image button:

<input type="image" src="images/someImage.jpg" alt="Submit">

Open in new window


And this is the code for a Submit button

<input type="submit" value="Submit">

Open in new window


And of course, you have the standard button:

 <button type="button">Click Me!</button> 

Open in new window

0
 

Author Comment

by:Suneet Pant
Comment Utility
oh ok ok now i remember. sorry for giving you trouble. And thanks once again
0
 

Author Comment

by:Suneet Pant
Comment Utility
But html5 doesnot support input type="image". I have just checked that.
How can it be used with :

<a href="#"><img src="images/btnupdtcart.jpg" alt="" class="shw_updtbtn" /></a>
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
HTML5 does support the <input type="image">

Where did you check?? I think your information is wrong.
0
 

Author Comment

by:Suneet Pant
Comment Utility
No I am not wrong. You can check the following links :
Link 1
Link 2
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Sorry, but you are wrong. The first link shows the new INPUT types that have been added to HTML5. These are in addition to the ones that already exist in HTML4. The second link you posted clearly shows the image type. Those tagged with the little '5' icon are again those that are new to HTML5. Those not tagged with the little '5' icon still exist.
0
 

Author Comment

by:Suneet Pant
Comment Utility
Image button is not responding. Pls check my code may be there is something wrong in the code :
<div class="btnupdt">	
	<input type="image" id="btnupdt" src="images/btnupdtcart.jpg" alt="Submit">
</div>

Open in new window


CSS
 .btnupdt{ margin-left:48%; float:left; width: 17%; height: 38px 

Open in new window

0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Comment

by:Suneet Pant
Comment Utility
Pls reply
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Hey Suneet,

If you've  changed the <a> tag to use an input button instead then you'll also need to change your jQuery selector. You've given your input button an ID (btnupdt) so you can just use that to bind the click() event to:

$('#btnupdt').click(function(e) {
   ...
}

Open in new window

0
 

Author Comment

by:Suneet Pant
Comment Utility
Thanks for replying. It's still very confusing for me. Can you please send the working code for the query you have given to me for updating records. The change that you have seen was done just for testing. Otherwise what I have with me is not working at all. I would be very obliged if you can do this for me. Or if you say I can send to you full code to review.
0
 

Author Comment

by:Suneet Pant
Comment Utility
Please reply I have only one day left . Below is my code, which is not working :
<?php session_start(); ?>
<?php
   include ("dbcon.php");
?>
<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <script type="text/javascript">
    $(document).ready(function() {
       $('.btnupdt a').click(function(e){
          e.preventDefault(); // prevent the A target from being followed
          var data = new Array(); // prepare some data storage
          $('table#display tr').each(function() {
             var id =  $("td:nth-child(1)", this).text(); 
             var qty = $("select[name='ratelist']", this).val(); 
             var price = $("select[name='ratelist'] :selected", this).data("cost"); 
             data[data.length] = {id: id, qty: qty, price: price}
          });
          $.ajax({
            type: 'POST',
            url: 'updtdata.php',
            data: { records: data }
          })
          .done( function(data) {
            console.log(data);
          })
          .fail( function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
          });
       });
    });
  </script>
  </head>
  <body>
   <div class="btns">
     <div class="btnupdt">	<!-- Update all records back to database -->
        <a href="#"><img src="images/btnupdtcart.jpg" alt="" class="shw_updtbtn" /></a>
     </div>				
   </div>
   <div class="disp_recs">
    <?php
     ........
     ........
     ........
     ........
    <?php } ?>
    <?php 
      mysqli_free_result($retrv);
      mysqli_free_result($result);
    ?>
  </div>
 </body>
</html>
<?php mysqli_close($connection); ?>

Open in new window


From the code above :
<div class="btnupdt">      <!-- Update all records back to database -->
      <a href="#"><img src="images/btnupdtcart.jpg" alt="" class="shw_updtbtn" /></a>
 </div>

CSS
.btnupdt{ margin-left:48%; float:left; width: 17%; height: 38px }

.shw_imgbtn{ width: 100%; height: 38px; }

Open in new window


Please help....
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Hey Suneet,

I'll do what I can, but as we're all volunteers here, we can't always respond immediately. Not only do we have full-time jobs, we may also be in different time-zones (not to mention, it's the weekend!!)

As I think I mentioned earlier, there are several parts to getting this working. You indicated that the database update isn't working, but then you've posted the jQuery part - this won't update the database - it will just send the data to your PHP script, which will then do the database update.

Here's a PHP script that will update your database for you, based on PHPs PDO extension. For this to work, you'll need to make sure your jQuery is sending the data to the server correctly:

<?php 
// Turn on error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);
 
// Set your connection details
$hostname = 'localhost';
$username = 'yourUserName';
$password = 'yourPassword';
$database = "yourDatabase";

try {
	
	// Connect to your database
	$dbh = new PDO("mysql:host=$hostname;dbname=$database", $username, $password);
	$dbh->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_OBJ);
	$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

	// Prepare a parameterised UPDATE statement and bind the parameters to variables
	$stmt = $dbh->prepare("UPDATE utmp_orders SET lbl_qty = :qty, lbl_prc = :price WHERE t_ordid = :id");
	$stmt->bindParam(':id', $id);
	$stmt->bindParam(':price', $price);
	$stmt->bindParam(':qty', $qty);
	
	// Intialise a record tracker
	$recordsUpdated = 0;

	// Loop through the POSTed data
	foreach ($_POST['records'] as $record) {
		//Execute the prepared UPDATE statement
		$stmt->execute($record);
		
		// Update the record tracker
		$recordsUpdated++;
	}
	
	// Output a summary to the user
	printf("Records Updated: %d", $recordsUpdated);

} catch(PDOException $pdoEx) {
	// We have a problem
	die($pdoEx->getMessage());
}

Open in new window


When your jQuery script POSTs data to this script, if everything worked, your database will be updated and your jQuery script will receive the 'Records Updated' message back in the 'data' variable. You can then display that to the user.
0
 

Author Comment

by:Suneet Pant
Comment Utility
so sorry for troubling you. I would better be careful next time
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
No worries Suneet. It's no trouble. Just trying to explain how to get the best out of EE. We're always happy to help so keep asking questions - it's the best way to learn :)
0
 

Author Comment

by:Suneet Pant
Comment Utility
Thank you very much for replying. Thanks for the code but  I don't have any idea about using PDO so I am continuing with MySqli. After examining the code using console.log I found data is not transfering to the "data.php" file. Pls see the image attach :
Error
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
OK. Can you post your HTML file that contains the jQuery. Post it in full, along with your cart.php file. If you have this running on a webserver, also post a link to that so I can test it 'live'. I can't get any relevant information from the image you posted.

We'll get there :)
0
 

Author Comment

by:Suneet Pant
Comment Utility
cart.php itself has <html>....</html> in it. All the data is coming directly from the table
<?php session_start(); ?>
<?php
   include ("dbcon.php");
?>
<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/dsgncnv.css">
  <script type="text/javascript">
    $(document).ready(function() {
	
		$("select[name='ratelist']").change(function() {
			var cost = $("option:selected", this).data('cost');
			var currentRow = $(this).parents('tr'); // get the <tr> that contains the changed <select>
			$("input[name='i-cost']", currentRow).val(cost); // set the value of 'i-cost' in the currentRow only
		});
	
       $('.btnupdt a').click(function(e){
          e.preventDefault(); // prevent the A target from being followed
          var data = new Array(); // prepare some data storage
          $('table#display tr').each(function() {
             var id =  $("td:nth-child(1)", this).text(); 
             var qty = $("select[name='ratelist']", this).val(); 
             var price = $("select[name='ratelist'] :selected", this).data("cost"); 
             data[data.length] = {id: id, qty: qty, price: price}
          });
          $.ajax({
            type: 'POST',
            url: 'data.php',
            data: { records: data }
          })
          .done( function(data) {
            console.log(data);
          })
          .fail( function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
          });
       });
    });
  </script>
  </head>
  <body>
   <div class="btns">
     <div class="btnupdt">	<!-- Update all records back to database -->
       <a href="#"><input type="image" src="images/btnupdtcart.jpg" alt="Submit" class="shw_updtbtn" /></a>
     </div>				
   </div>
   <div class="disp_recs">
    <?php
      $var = '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, tord_dt FROM utmp_orders where user_id = '{$getid}'";
     $result = mysqli_query($connection, $pickrecs); 
	?>
    <table id='display'>
       <thead>
           <tr>
              <th>Creation&nbsp;Date</th>
              <th>Labels</th>
              <th>Total&nbsp;Price (&nbsp;&pound;&nbsp;)</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
                  $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>
			</tbody>
		<?php } ?>
	</table>
	<?php 
		mysqli_free_result($retrv);
		mysqli_free_result($result);
	?>
   </div>
  </body>
</html>
<?php
	mysqli_close($connection);
?>

Open in new window


data.php
<?php
	include ("dbcon.php");
	foreach ($_POST['records'] as $record) {
		// update your database, one record at a time:
		$query="UPDATE utmp_orders SET lbl_qty = {$record['qty']}, lbl_prc = '{$record['price']}' WHERE t_ordid = {$record['id']}";
		$result = mysqli_query($connection, $query); 
		if (!$result)
			{ die("Selected Record Updation Failed." . mysqli_error($connection)); }
		//echo $record['id'] . "|" . $record['value'] . PHP_EOL;
	}
?>
<?php
	mysqli_free_result($result);
	mysqli_close($connection);
?>

Open in new window


Sorry this site is not uploaded on the server yet.
Updated Image :
ErrorThis error comes when Update Cart is clicked.
0
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 500 total points
Comment Utility
OK Suneet. Your cart.php is a little bit of a mess and is making unnecessary calls to your database - the <SELECT> tag doesn't change from record to record, so there's no need to query the database every time.

You've wrapped the <tbody> tag inside the database loop, meaning your table will have lots of tbodys - there should really only be one, so move the <tbdy> outside of your while loop.

Your header row has 3 columns, but your body rows have 5 columns.

You've also changed your update button, so you now have a button wrapped in an A tag. For the button, do one of 2 things - wrap an img inside and A tag, or just use an <input type=image> button - don't mix the 2. Whichever you choose, make sure the jQuery selector matches.

Having said all that, the reason it's not working is because the selector in your jQuery is including the TR from the THEAD. Change the jQuery selector (line 22 of cart.php) to the following and try again.

$('table#display tbody tr').each(function() {

Open in new window


That will make sure only the TRs in the TBODY are being selected.

For the purpose of debugging, add this as the first line of your data.php

var_dump($_POST);

Open in new window


Then when you click on the Update button, you can check what was POSTed to your script by checking the browser's console. Once you know you're getting the correct data, you can remove it again.
0
 

Author Comment

by:Suneet Pant
Comment Utility
Thank you very much for all this. And really very sorry for disturbing you again and again.
0
 

Author Comment

by:Suneet Pant
Comment Utility
I am from India and just because of shortage of time I am in touch of you. right now here the time is  3:50 AM. Thank you once again.
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
greetings Suneet Pant, , I looked at all of the comments and code here, and you seem to be having problems. To me , you started out with some PHP and HTML for the <table> rows that were NOT good for the task that you want to do, You need to get three Things back to the sever by ajax, the total price, the quantity, and the Row number (ID). You put these all over the place in a table row, You can easily place ALL three in the select box Option value like -
echo "<option value='".$resultarr['t_ordid']."_".$rtlistarr['rt_qty']."_".$rtlistarr['rt_cost']."' >".$rtlistarr['rt_qty']."</option>";

Open in new window

and get all three in ONE operation for the select value -
$("#selt1").val();

Please look at this next code, I ran it on my server, and it works.
this is your cart.php -
<?php ini_set('display_errors', 1);
error_reporting(E_ALL);
session_start();
include ("dbcon.php");
?>
<!DOCTYPE html>
<html><head><title>Data AJAX</title>
<style>
body {background:#e3f7ff;
  }
.shw_updtbtn {width:106px; 
  height: 31px; 
  margin-bottom: 5px;
  margin-left: 9em;
  cursor: pointer;
  }
.dx, .px{width: 18px; 
  height:18px; 
  color: #fff; 
  background:#a00; 
  border-radius: 9px; 
  margin: 2px auto; 
  font-family:sans-serif; 
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  }
#dis {background: #eee; border:1px solid #000;}
#dis th {background:#666; color: #eee; padding:1px 5px;}
#dis td {text-align: center;}
.contin {position: relative;}
.pop {position: absolute; top: 2px; left: 2px; width:21em; background:#dfd; border:3px solid #090; display: none;}
.px {margin: 1px auto;}
#title {font-weight: bold; margin-bottom: 5px; padding: 2px; text-align: center; text-size: 120%;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>/* <![CDATA[ */
$(document).ready(function() {
	
$("select[name='ratelist']").change(function() {
	var id = $(this).prop("id");
	var cost = $(this).val();
	cost = cost.split("_");
	$("#in"+id).html(cost[2]);
    });

$('#updateBut').click(function(e){
var ajxOptions = {
    url: "ajaxpost.php",
    type: "POST",
    dataType: "text",
    timeout: 3500}

$("#display").css( "background-color", "#eee" );
var val = [];
$('#orders tr').each(function() {
	val[val.length] = $("#sel"+$(this).prop("id")).val();
    });
  // add the val array to the POST send data string
ajxOptions.data = {vals: val};

// get the Jquery AJAX in aj with $.ajax( )
  var aj = $.ajax(ajxOptions);
        
// the aj.done( ) method is the successful return of AJAX
  aj.done(function( received ) {
  if (received.charAt(0) == '~') { // the received server had no errors
  $('#title').html("Update Sucess for Order");
  var rAry = received.split("^");
  $('#sho').html("Updates for Quantity and Total Price were "+rAry[1]);
  $('#ajaxPop').show();
  $("#display").css( "background-color", "green" );
  }
    $('#ajaxRe').html(received);
	});
	
// the aj.fail( ) method is the UNsuccessful (error) return of AJAX	
  aj.fail(function(xhr, error1, err) {
// xhr is the XMLHttpRequest Object
// error1 is the Jquery guess at what the error was
// err is the reason for jquery ERROR
  if (xhr.status==404) alert("ERROR from Ajax as '404 status' the "+ajxOptions.url+
  " page was NOT on Server, \nCan NOT recover from this ERROR, This operation is NOT available!");
  else {
    alert("Ajax ERROR = \""+error1+"\", with server Status: "+xhr.status+", post-URL: "+ajxOptions.url+
	", \npost-Data: "+ajxOptions.data+", \nerror because: "+err);
    if (aj.responseText) {
    $('#ajaxRe').html(aj.responseText); 
    }else $('#ajaxRe').html("Ajax Received Text is empty");
  }
  });
});// $('#updateBut').click

$('.dx').click(function(e){
alert("this button does Nothing here");
});

$('#xx').click(function(e){
$('#ajaxPop').hide();
});

});// $(document).ready

/* ]]> */</script></head>
<body>
<img id="updateBut" src="images/btnupdtcart.jpg" alt="click me" class="shw_updtbtn" />
<div class="contin">
<?php
$var = 'a1@go.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)); 
$pickrecs = "SELECT t_ordid, DATE_FORMAT(tord_dt,'%d-%m-%Y') as label_date FROM utmp_orders where user_id = '{$retrvarr[0]}'";
$result = mysqli_query($connection, $pickrecs); ?>
<table id='dis'><thead>
  <tr>
    <th>Creation&nbsp;Date</th>
    <th>select Quantity</th>
    <th>Total Price (&nbsp;&pound;&nbsp;)</th>
    <th>delete row</th>
  </tr></thead><tbody id="orders"> 
<?php $tracNum = 0;
while($resultarr = mysqli_fetch_assoc($result)){ ?>
  <tr id="t<?php echo $tracNum ?>" data-oid="<?php echo $resultarr["t_ordid"] ?>">
    <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' id='selt".$tracNum."' class='rdd'>";
		$first ='';
		while($rtlistarr = mysqli_fetch_assoc($rtlist)){ 
		if(!$first) $first = $rtlistarr['rt_cost'];
		  echo "<option value='".$resultarr['t_ordid']."_".$rtlistarr['rt_qty']."_".$rtlistarr['rt_cost']."' >".$rtlistarr['rt_qty']."</option>";
		}
		echo "</select>";
		?></td>
    <td id="inselt<?php echo $tracNum; ?>"><?php echo $first ?></td>
    <td><p class="dx" id="lt<?php echo $tracNum; ?>">X</p></td>
  </tr>
<?php ++$tracNum; } 
mysqli_free_result($retrv);
mysqli_free_result($result);
mysqli_close($connection);
?>
</tbody></table>
<div id="ajaxPop" class="pop"><div id="title">Success from Ajax</div><span id="sho">Show this on success.</span>
<p class="px" id="xx">X</p></div>
</div>
<div id="ajaxRe" style="background: #fee;">Ajax Return shown here</div>
</body></html>

Open in new window

Please Notice that I have reduced your many unneeded elements, I have switched to a more robust element access using ID that are numerically advanced. These can be moved to other row locations in development, without changing the javascript to access them.
You have never, ever used any way to show the user any thing from your Ajax response, I show a success pop out.

next is my PHP for the server ajax -
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
// Change the Type to text/plain
header('Cache-Control: no-cache');
// In AJAX no page is returned just data as text
header('Content-Type: text/plain');

define("DEBUG", true);

include ("dbcon.php");
$sql = 'UPDATE utmp_orders SET lbl_qty = ? , lbl_prc= ? WHERE t_ordid = ?';
if ($stmt = mysqli_prepare($connection, $sql)) {
  mysqli_stmt_bind_param($stmt, "ssi", $qty, $prc, $id);// bind parameters to variables
$idin = '';
foreach ($_POST['vals'] as $vals) {
  $sets = explode("_", $vals);
  if (count($sets) != 3) exit('Post error number: erc7182');
  list($id, $qty, $prc) = $sets;
  $idin .= $id.',';
  mysqli_stmt_execute($stmt);// send variable data to MySQL
  }

mysqli_stmt_close($stmt);// close statement
} else 
  if (DEBUG) exit(mysqli_error($connection)); 
    else exit('Post error number: erp471');

$idin = substr($idin, 0, -1);
$query = 'SELECT t_ordid, lbl_qty , lbl_prc FROM utmp_orders WHERE t_ordid IN ('.$idin.')';
$re = mysqli_query($connection, $query);
$sendBack = '~<b>SUCCESS!</b><br/>';
while($row = mysqli_fetch_assoc($re)){
$sendBack .= 'New Update Row id='. $row['t_ordid'].' qty= '. $row['lbl_qty'].', prc= '. $row['lbl_prc'].'<br />';	
}
$sendBack .= '^made to rows ID of '.$idin;
echo $sendBack;
/*
$query="delete from utmp_orders where t_ordid ='{$varid}'";
	
$query="update utmp_orders set lbl_qty =' [b]1[/b] ' , lbl_prc=' [b]2[/b] ' where t_ordid = {$record['id']}";
*/
?>
Please notice That I have a slight bit of error control, IT is important when using Database contacts to have some type of error IF you query does NOT WORK.
I use the MySQLI prepare and execute for safety from SQL injections.

Please Run my code to see if it works for you.

Open in new window

0
 

Author Closing Comment

by:Suneet Pant
Comment Utility
Chris Stanyon is the best of all the experts I have encountered. Whatever asked he reply promptly and very efficiently. Thanks to him fore helping me lot.
0
 

Author Comment

by:Suneet Pant
Comment Utility
Hi , One last help :
Pop up box

{ Only one day left }
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

744 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now