passing query on the same page AJAX - php

Question

i'm still fresh in using AJAX and i'm having hard time with it.can you please help me with this? i actually have a dropdown and when i select an item in that dropdown a table of queries should print to the tbody.here's my code:
the PHP code:
<select id="proj_id" name="proj_id" onchange="myFunction(this.value)">
<option value="none">---select project---</option>
<?php
//Projects
$r = #mysql_query("SELECT `proj_id`, `proj_name` FROM `projects`");
while($rows = mysql_fetch_assoc($r)) {
$proj_id = $rows['proj_id'];
$proj_name = $rows['proj_name'];
echo '<option value='.$proj_id.'>'.$proj_name.'</option>';
}
?>
</select>
<table>
<thead>
<tr>
<th>Project Name</th>
<th>Material Name</th>
<th>Quantity</th>
<th>Status</th>
</tr>
</thead>
<tbody id="project_estmat">
<?php
//Display Requests
$r = #mysql_query("SELECT `proj_name`, `mat_name`, `req_qty`, `stat_desc` FROM `requests` JOIN `projects` USING(`proj_id`) JOIN `materials` USING(`mat_id`) JOIN `status` ON(requests.stat_id = status.stat_id)");
while ($row = mysql_fetch_array($r)) {
echo '<tr>';
echo '<td>'.$row['proj_name'].'</td>';
echo '<td>'.$row['mat_name'].'</td>';
echo '<td>'.$row['req_qty'].'</td>';
echo '<td>'.$row['stat_desc'].'</td>';
echo '</tr>';
}
?>
</tbody>
</table>
jS CODE:
function myFunction(value){
if(value!="none")
{
$.ajax(
{
type: "POST",
url: 'content/admin/requests.php',
data: { proj_id: value},
success: function(data) {
$('#project_estmat').html(data);
}
});
}
else
{
$('#project_estmat').html("select an item");
}
}
and I have this PHP code that should be in the #project_estmat which is a table. And I think this is where the problem lies. Because everytime I select an item, nothing is printing in the table. It shows empty data.
<?php
if (isset($_POST['proj_id'])) {
$r = #mysql_query("SELECT `proj_name`, `mat_name`, `req_qty`, `stat_desc` FROM `requests` JOIN `projects` USING(`proj_id`) JOIN `materials` USING(`mat_id`) JOIN `status` ON(requests.stat_id = status.stat_id)");
if($r){
while ($row = mysql_fetch_array($r)) {
echo '<tr>';
echo '<td>'.$row['proj_name'].'</td>';
echo '<td>'.$row['mat_name'].'</td>';
echo '<td>'.$row['req_qty'].'</td>';
echo '<td>'.$row['stat_desc'].'</td>';
echo '</tr>';
}
}
exit;
}
?>

Answer 1

you have wrapped $.ajax function with, ${
it should be like the following, and try using change, and remove the inline function calling when you do this,
$('#proj_id').change(function() {
var value = $(this).val();
if(value!="none"){
$.ajax({
type: "POST",
url: 'content/admin/requests.php',
data: { proj_id: value},
success: function(data) {
$('#project_estmat').html(data);
alert(data);//check whats coming from the server side
}
});
}
});
tested out with a simplified php code to the server end such as the following,
<?php
if (isset($_POST['proj_id'])) {
echo '<tr>';
echo '<td>A</td>';
echo '<td>B</td>';
echo '<td>C</td>';
echo '<td>D</td>';
echo '</tr>';
}
?>

Answer 2

everything looks fine except you have a '$' extra in your if condition
if(value!="none")
${ //here
removing the '$' sign should work...

Answer 3

You shouldn't use the function mysql_query since its deprecated as of PHP 5.5.0 and will be removed (http://php.net/manual/en/function.mysql-query.php). You better use the PHP PDO class (http://php.net/manual/en/book.pdo.php).

Answer 4

Dont suppress your error using '#' error_compression operator. Remove the # symbol from mysql_query and try debugging your code.

Answer 5

Try building a string and sending it back.
$str = '';
if($r){
while ($row = mysql_fetch_array($r)) {
$str .= '<tr>';
$str .= '<td>'.$row['proj_name'].'</td>';
$str .= '<td>'.$row['mat_name'].'</td>';
$str .= '<td>'.$row['req_qty'].'</td>';
$str .= '<td>'.$row['stat_desc'].'</td>';
$str .= '</tr>';
}
return $str;
}
Then when the loop is done we can send the string back. While the dataType property .ajax() uses intelligent parsing to decide what type of data is being sent back and how to construct the returned object, you should just declare it.
$.ajax({
type: "POST",
url: 'content/admin/requests.php',
data: { proj_id: value},
dataType:'html',
success: function(data) {
$('#project_estmat').html(data);
}
});