I just want to ask your help about my table query, everytime when button is click, a new table will display. Instead of only a row will update to a table, an entire table display behind is the old table. Please help me review my code.Thanks
demo.insert.php
$dbHost = 'localhost'; // usually localhost
$dbUsername = 'root';
$dbPassword = 'thartpc';
$dbDatabase = 'hospital';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");
$sql_check = mysql_query("SELECT * FROM messages order by med_id desc");
if(isSet($_POST['content2'])){
$content2=$_POST['content2'];
$content3=$_POST['content3'];
mysql_query("insert into messages(medname, quantity) values ('$content2','$content3')");
$sql_in= mysql_query("SELECT * FROM messages order by med_id desc");
$r=mysql_fetch_array($sql_in);
}
?>
<?php
require_once 'config.php';
$query = mysql_query("SELECT * FROM messages order by med_id desc") or die ("could not search");
$count = mysql_num_rows($query);
?>
<div class="container">
<div class="panel panel-info">
<div class="panel-heading" class="panel-title">
<h7>Name</h7>
</div>
<div class="panel-body" style="padding-top:30px">
<?php
echo "
<table class='table table-hover';>
<tr>
<td style='border:1px solid; color:gray' align='center'> ID</td>
<td style='border:1px solid; color:gray' align='center'>Name</td>
<td style='border:1px solid; color:gray' align='center'>Quantity</td>
</tr>";
while($row = mysql_fetch_array($query)){
echo "
<tr>
<td style='border:1px solid; color:gray' align='center'>".$row['med_id']." </td>
<td style='border:1px solid; color:gray' align='center'>".$row['medname']." </td>
<td style='border:1px solid; color:gray' align='center'>".$row['quantity']."</td>
</tr> ";
}
echo " </table>";
?>
</div>
</div>
</div>
inserting.php
<?php
session_start();
if(isset($_POST['search'])){
$globalpid = $_POST['search'];
$_SESSION['search'] = "$globalpid";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap- theme.min.css">
<title>Insert Record with jQuery and Ajax</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#v").click(function(){
var element = $(this);
var test2 = $("#content2").val();
var test3 = $("#content3").val();
var dataString = 'content2='+ test2+'&content3='+ test3;
if(test2==''){
alert("Please Enter Some Text");
}else{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="http://tiggin.com/ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');
$.ajax({
type: "POST",
url: "demo_insert.php",
data: dataString,
cache: false,
success: function(html){
$("#display").after(html);
document.getElementById('content2').value='';
$("#flash").hide();
}
});
}
return false;
});
});
</script>
</head>
<body>
<?php
require_once 'pharmacyheader.php';
require_once 'pharmacysearch.php';
require_once 'patientquery.php';
?>
<div class="container">
<form method="post" name="form" action="">
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading"><h7>Name A - F</h7></div>
<div class="panel-body">
<select class="form-control" id="content2" name="content2">
<option id="0" style="width:100px"></option>
<?php
require_once 'config.php';
$medicine = mysql_query("SELECT * FROM medicine");
while ($row = mysql_fetch_array($medicine)) {
echo '<option id="' . $row['medicinename'] . '"';
echo ' value="' . $row['medicinename'] . '"';
if($row['brandid'] == $row['medicinename']) {
echo ' selected="selected"';
}
echo '>';
echo $row['medicinename'];
echo '</option>';
}
?>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading"><h7>Quantity</h7></div>
<div class="panel-body">
<select class="form-control" id="content3" name="content3">
<option id="0" style="width:100px"></option>
<?php
require_once 'config.php';
$quantity = mysql_query("SELECT * FROM quantity");
while ($row = mysql_fetch_array($quantity)) {
echo '<option id="' . $row['quantityname'] . '"';
echo ' value="' . $row['quantityname'] . '"';
if($row['quantityid'] == $row['quantityname']) {
echo ' selected="selected"';
}
echo '>';
echo $row['quantityname'];
echo '</option>';
}
?>
</select>
</div>
</div>
</div>
<div class="row"><br />
<div class="col-md-1">
<input type="submit" value="Add" id="v" name="submit" class="form-control" />
</div>
</div>
</form>
</div>
<div style="height:7px"></div>
<div id="flash" align="left" ></div>
<div id="display" align="left"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<script src="typeahead.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
</body>
</html>
Look at the below code,
echo "<table class='table table-hover';>
<tr>
<td style='border:1px solid; color:gray' align='center'> ID</td>
<td style='border:1px solid; color:gray' align='center'>Name</td>
<td style='border:1px solid; color:gray' align='center'>Quantity</td>
</tr>";
while($row = mysql_fetch_array($query))
{
echo "
<tr>
<td style='border:1px solid; color:gray' align='center'>".$row['med_id']." </td>
<td style='border:1px solid; color:gray' align='center'>".$row['medname']." </td>
<td style='border:1px solid; color:gray' align='center'>".$row['quantity']."</td>
</tr> ";
}
echo "</table>";I think this code is executed each and every time ajax call is made.
The butter solution is that put "table" tag where you made ajax call and only append tr content from ajax response.
This may help you out.
Let me know if you have any query
Thanks
</div>
OK, so when looking at your code I can see this :
You use ajax to retrieve a table with content
You have a .display element which is supposed to receive the ajax data
SO, each time you call your .ajax, you receive a new complete table in return (check your demo_insert.php). To put the new content in the ".display" item, you use jquery ".after" (you should check how it works btw http://api.jquery.com/after/ )
.after is supposed to ADD something AFTER something else. So, it sounds logical that your ajax return (complete table) is added AFTER ".display" since you ask jquery to do that.
What you should do is just REPLACE your ".display" content with the .ajax response...
$('#display').html(html);
for example, or something like this...