<?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>