I'm trying to populate HTML table with filter(two dropdowns) from CSV file by using PHP, JS, and jQuery. When user open the page user will see below dropdown,
the options for this drop downs are file names in the dir.
<form name="form1" method="post">
<select class="form-control col-sm-5" onChange="document.forms['form1'].submit();" id="choosefile" name="choosefile">
<option value="" selected>Choose Term</option>
<?php
foreach ($files as &$value) {
echo '<option value="' . $value . '">' . $value . '</option>';
}
?>
</select>
</form>
when user submit the form below PHP code gets executed
<?php
if(isset($_POST['choosefile']) && !empty($_POST['choosefile'])) {
$t = $_POST["choosefile"];
$filepath = "uploads/$t";
$row = 0;
$the_big_array = [];
$unique_start_date = [];
$unique_ids = array();
if (($h = fopen("{$filepath}", "r")) !== false) {
while (($data = fgetcsv($h, 1000, ",")) !== false) {
$the_big_array[] = $data;
$unique_ids[] = $data[0];
$a unique_start_date[] = $data[1];
}
fclose($h);
}
//closing bracket for parent if statement is at the end of the file
?>
Below two dropdowns act as a filter
<select name="" id="session_id">
<option value="">[Select Session]</option>
</select>
<select name="" id="start_date">
<option value="">[Select Start Date]</option>
</select>
<table border="1" class="table" id="personDataTable">
<thead>
<tr>
<th scope="col">Session</th>
<th scope="col">Start Date</th>
</tr>
</thead>
<tbody id='tbody'>
</tbody>
</table>
<script>
var obj1 = <?php array_shift($the_big_array); echo json_encode($the_big_array); ?>;
var obj2 = <?php array_shift($unique_start_date); echo json_encode(array_unique($unique_start_date)); ?>;
var obj3 = <?php array_shift($unique_ids); echo json_encode(array_unique($unique_ids)); ?>;
var table = document.getElementById("personDataTable").getElementsByTagName("tbody")[0];
var temp,temp1 = {};
var row = 0;
$("#choosefile, #session_id, #start_date").on('change', function() {
var d1 = $( "#session_id" ).val();
var d2 = $( "#start_date" ).val();
$("#tbody").empty();
for (var i = 0; i < obj1.length; i++) {
if (d1 && obj1[i][0] !== d1 && row > -1) continue;
if (d2 && obj1[i][1] !== d2 && row > -1) continue;
row++;
newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][0]));
newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][1]));
}
});
</script>
<?php }?>
The problem I'm having is when user submit first dropdown(options with file name) table doesn't get generated or it does not call .on('change', function() under which table generator code is present.
I'm not able to trigger that .on('change', function() for first dropdown but when user click on filter dropdowns that part works well
This answer is an extent to my last comment, as example.
//Put it into a seperate named function:
function fillTable() {
var d1 = $( "#session_id" ).val();
var d2 = $( "#start_date" ).val();
$("#tbody").empty();
for (var i = 0; i < obj1.length; i++) {
if (d1 && obj1[i][0] !== d1 && row > -1) continue;
if (d2 && obj1[i][1] !== d2 && row > -1) continue;
row++;
newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][0]));
newTr.insertCell(-1).appendChild(document.createTextNode(obj1[i][1]));
}
}
// reference to that function here
$("#choosefile, #session_id, #start_date").on('change', fillTable);
// call when the page is loading:
fillTable();
Related
I'm performing multiple delete records operation using jQuery and php currently i'm able to delete single / multiple records by clicking on checkbox its working fine as of now but my page gets refreshed every time i delete record because im not using ajax.
I'm a beginner in ajax I want to perform this same operation using JQUERY/AJAX which will not make my page reload every time i delete my record so i want to use ajax for the same code so that i can handle my page reload.
Somebody help me out in achieving it Thanks!!
HTML/PHP
<form method="post" name="data_table">
<table id="table_data">
<tr>
<td>Name</td>
<td>Select All <input type="checkbox" id="check_all" value=""></td>
</tr>
<?php
$query = mysql_query("SELECT * FROM `products`");
while($row = mysql_fetch_array($query))
{
?>
<tr>
<td>
<?php echo $row['product_title']; ?>
</td>
<td>
<input type="checkbox" value="<?php echo $row['id'];?>" name="data[]" id="data">
</td>
</tr>
<?php
}
?>
</table>
<br />
<input name="submit" type="submit" value="Delete" id="submit">
</form>
JQuery
jQuery(function($)
{
$("form input[id='check_all']").click(function()
{
var inputs = $("form input[type='checkbox']");
for(var i = 0; i < inputs.length; i++)
{
var type = inputs[i].getAttribute("type");
if(type == "checkbox")
{
if(this.checked)
{
inputs[i].checked = true;
}
else
{
inputs[i].checked = false;
}
}
}
});
$("form input[id='submit']").click(function()
{ var inputs = $("form input[type='checkbox']");
var vals=[];
var res;
for(var i = 0; i < inputs.length; i++)
{
var type = inputs[i].getAttribute("type");
if(type == "checkbox")
{
if(inputs[i].id=="data"&&inputs[i].checked){
vals.push(inputs[i].value);
}
}
}
var count_checked = $("[name='data[]']:checked").length;
if(count_checked == 0)
{
alert("Please select a product(s) to delete.");
return false;
}
if(count_checked == 1)
{
res= confirm("Are you sure you want to delete these product?");
}
else
{
res= confirm("Are you sure you want to delete these products?");
}
if(res){
/*** This portion is the ajax/jquery post calling ****/
$.post("delete.php", {data:vals}, function(result){
$("#table_data").html(result);
});
}
});
});
PHP delete code
<?php
if(isset($_POST['data']))
{
$id_array = $_POST['data']; // return array
$id_count = count($_POST['data']); // count array
for($i=0; $i < $id_count; $i++)
{
$id = $id_array[$i];
$query = mysql_query("DELETE FROM `products` WHERE `id` = '$id'");
if(!$query)
{
die(mysql_error());
}
}?>
Please do the changes jquery as
jQuery(function($)
{
$("form input[id='check_all']").click(function()
{
var inputs = $("form input[type='checkbox']");
for(var i = 0; i < inputs.length; i++)
{
var type = inputs[i].getAttribute("type");
if(type == "checkbox")
{
if(this.checked)
{
inputs[i].checked = true;
}
else
{
inputs[i].checked = false;
}
}
}
});
$("form input[id='submit']").click(function()
{ var inputs = $("form input[type='checkbox']");
var vals=[];
var res;
for(var i = 0; i < inputs.length; i++)
{
var type = inputs[i].getAttribute("type");
if(type == "checkbox")
{
if(inputs[i].id=="data"&&inputs[i].checked){
vals.push(inputs[i].value);
}
}
}
var count_checked = $("[name='data[]']:checked").length;
if(count_checked == 0)
{
alert("Please select a product(s) to delete.");
return false;
}
if(count_checked == 1)
{
res= confirm("Are you sure you want to delete these product?");
}
else
{
res= confirm("Are you sure you want to delete these products?");
}
if(res){
/*** This portion is the ajax/jquery post calling ****/
$.post("delete.php", {data:vals}, function(result){
$("#table_data").html(result);
});
}
});
});
Delete.php as
<?php
if(isset($_POST['data']))
{
$id_array = $_POST['data']; // return array
$id_count = count($_POST['data']); // count array
for($i=0; $i < $id_count; $i++)
{
$id = $id_array[$i];
$query = mysql_query("DELETE FROM `test` WHERE `id` = '$id'");
if(!$query)
{
die(mysql_error());
}
}?>
<tr>
<td>ID</td>
<td>TITLE</td>
<td>Select All <input type="checkbox" id="check_all" value=""></td>
</tr>
<?php
$query = mysql_query("SELECT * FROM `test`");
while($row = mysql_fetch_array($query))
{
?>
<tr>
<td>
<?php echo $row['id']; ?>
</td>
<td>
<?php echo $row['name']; ?>
</td>
<td>
<input type="checkbox" value="<?php echo $row['id'];?>" name="data[]" id="data">
</td>
</tr>
<?php
} unset($row);
}
i have a form like this:
<?php
include '../db/baza.php';
?>
<?php include 'vrh.php' ?>
<div id="stranica">
<div id="stranicaOkvir">
<form action="dodaj_sliku_obrada.php" method="POST" enctype="multipart/form-data" id="upload" class="upload">
<fieldset>
<legend>Dodaj sliku</legend>
<?php $upit = "SELECT kategorija_ID, kategorija_naziv FROM kategorije ORDER BY kategorija_ID ASC";
$ispis = mysql_query($upit) or die(mysql_error());
$blok_ispis = mysql_fetch_assoc($ispis);
$ukupno = mysql_num_rows($ispis); ?>
<p><strong>Obavezno odaberite kategoriju kojoj slika pripada</strong></p>
<p> <select name="kategorija" id="kategorija">
<?php do { ?>
<option value="<?php echo $blok_ispis['kategorija_ID']; ?>"> <?php echo $blok_ispis['kategorija_naziv']; ?></option>
<?php } while ($blok_ispis = mysql_fetch_assoc($ispis)); ?>
<?php mysql_free_result($ispis);?>
</select>
</p>
<input type="file" id="file" name="file[]" required multiple>
<input type="submit" id="submit" name="submit" value="Dodaj sliku">
<div class="progresbar">
<span class="progresbar-puni" id="pb"><span class="progresbar-puni-tekst" id="pt"></span></span>
</div>
<div id="uploads" class="uploads">
Uploaded file links will apper here.
<script src="js/dodaj_Sliku.js"></script>
<script>
document.getElementById('submit').addEventListener('click',function(e){
e.preventDefault();
var f = document.getElementById('file'),
pb = document.getElementById('pb'),
pt = document.getElementById('pt');
app.uploader({
files: f,
progressBar: pb,
progressText: pt,
processor: 'dodaj_sliku_obrada.php',
finished: function(data){
var uploads = document.getElementById('uploads'),
uspjesno_Dodano = document.createElement('div'),
neuspjelo_Dodavanje = document.createElement('div'),
anchor,
span,
x;
if(data.neuspjelo_Dodavanje.length){
neuspjelo_Dodavanje.innerHTML = '<p>Nazalost, sljedece nije dodano: </p>';
}
uploads.innerText = '';
uploads.textContent = '';
for( x = 0; x < data.uspjesno_Dodano.length; x = x + 1){
anchor = document.createElement('a');
anchor.href = '../slike/galerija/' + data.uspjesno_Dodano[x].file;
anchor.innerText = data.uspjesno_Dodano[x].name;
anchor.textContent = data.uspjesno_Dodano[x].name;
anchor.target = '_blank';
uspjesno_Dodano.appendChild(anchor);
}
for( x = 0; x < data.neuspjelo_Dodavanje.length; x = x + 1){
span = document.createElement('span');
span.innerText = data.neuspjelo_Dodavanje[x].name;
span.textContent = data.neuspjelo_Dodavanje[x].name;
neuspjelo_Dodavanje.appendChild(span);
}
uploads.appendChild(uspjesno_Dodano);
uploads.appendChild(neuspjelo_Dodavanje);
},
error: function(){
console.log('Ne radi!');
}
});
});
</script>
<script>
</script>
</div>
</fieldset>
</form>
</div>
</div>
<?php include 'dno.php' ?>
The .js looks like this
var app = app || {};
(function(o){
"use strict";
//Privatne metode
var ajax, getFormData, setProgress;
ajax = function(data){
var xmlhttp = new XMLHttpRequest(), uspjesno_Dodano;
xmlhttp.addEventListener('readystatechange', function(){
if(this.readyState === 4){
if(this.status === 200){
uspjesno_Dodano = JSON.parse(this.response);
if(typeof o.options.finished === 'function'){
o.options.finished(uspjesno_Dodano);
}
} else {
if(typeof o.options.error === 'function'){
o.options.error();
}
}
}
});
xmlhttp.upload.addEventListener('progress', function(event){
var percent;
if(event.lengthComputable === true){
percent = Math.round((event.loaded / event.total) * 100);
setProgress(percent);
}
});
xmlhttp.open('post', o.options.processor);
xmlhttp.send(data);
};
getFormData = function(source){
var data = new FormData(), i;
for(i = 0; i < source.length; i = i + 1){
data.append('file[]', source[i]);
}
data.append('ajax', true);
data.append('kategorija', o.options.kategorija);
return data;
};
setProgress = function(value){
if(o.options.progressBar !== undefined){
o.options.progressBar.style.width = value ? value + '%' : 0;
}
if(o.options.progressText !== undefined){
o.options.progressText.innerText = value ? value + '%' : '';
o.options.progressText.textContent = value ? value + '%' : '';
}
};
o.uploader = function(options){
o.options = options;
if(o.options.files !== undefined){
ajax(getFormData(o.options.files.files));
}
}
}(app));
On the process.php part i want to listen the option value from select
"<select name="kategorija" id="kategorija">"
on the process.php when i
<?php
$kategorija = $_POST['kategorija'];
echo echo $kategorija;
?>
i alwasy get a 0 value, so what i am doing wrong? The file[] processing is working fine, but can't get it to work with a addtional variable.
You don't need to echo echo $kategorija; It should be echo $kategorija; If this causes an issue, which it might, try var_dump($kategorija) to view the contents of the variable.
Also, you're including your js throughout the page, this should be refactored and included properly in the head. The php should not be in the form of the document, it should be contained outside and included like you are doing with '../db/baza.php'; Finally, look into using PDO to connect to your db.
Hi Guys I have this search from that takes a search term matches it with a table.field and in php it searches all matching data.
I want to add autocomplete to it, can anyone PLEASE assist?
Here is the HTML FORM
<form action="'.$_SERVER['REQUEST_URI'].'" method="post">
<input type="text" id="searchThis" name="searchThis" placeholder="search" value="" size="14" />
<select name="searchItems" id="searchItems">
<optgroup value="Vehicles" label="Vehicles">Vehicles
<option value="vehicles.Make">Make</option>
<option value="vehicles.model">Model</option>
<option value="vehicles.RegNumber">Registration Number</option>
<option value="vehicles.licenseExpireDate">License Expire Date</option>
</optgroup>
<optgroup value="Owners" label="Owners">Clients
<option value="owners.OwnerName" label="" >Name</option>
<option value="owners.mobile">Mobile Number</option>
</optgroup>
</select>
<input type="submit" id="doSearch" name="Search" value="Search" />
</form>
<ul id="result">
</ul>
There is the JS
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
(function($j){
$j(document).ready(function (){
$j("#searchThis").keyup(function()
{
var searchThis = $j('#searchThis').val();
var searchItems = $j('#searchItems').val();
var dataString = {'searchThis': searchThis,'searchItems':searchItems};
if(searchThis!='')
{
$j.ajax({
type: "POST",
url: "doAutocomplete_search.php",
data: dataString,
dataType: "html",
cache: false,
success: function(data)
{
$j("#result").html(data).show();
}
});
}return false;
});
$j("#result").live("click",function(e){
var clicked = $j(e.target);
var name = clicked.find('.name').html();
var decoded = $j("<div/>").html(name).text();
$j('#searchThis').val(decoded);
});
$j(document).live("click", function(e) {
var clicked = $j(e.target);
if (! clicked.hasClass("search")){
$j("#result").fadeOut();
}
});
$j('#searchid').click(function(){
$j("#result").fadeIn();
});
});
})($j);
And the PHP
function implement($cxn,$searchThis, $field) {
$show = "";
//Item to be searched
$srchThis = strip_tags(trim($searchThis));
//[0]= table , [1]=field to search
$srchStack = explode('.',$field);
$gtData = "SELECT * FROM ".$srchStack[0]." WHERE ".$srchStack[1]." like '%|{$srchThis}|%'";
//or die(mysqli_error($cxn))
if($selectc = mysqli_query($cxn,"SELECT * FROM {$srchStack[0]} WHERE {$srchStack[1]} LIKE '{$srchThis}%' OR {$srchStack[1]} LIKE '%{$srchThis}%'")) {
$srchData = array();
$rows = mysqli_fetch_row($selectc);
echo $rows;
//if() {, MYSQL_ASSOC
//echo var_dump($srchData);
$show .= '
<table style="border:2px solid #0000">';
//foreach($srchData as $fields=>$data) {
for($s=0; $s < $rows && $srchData = mysqli_fetch_assoc($selectc);$s++) {
if($srchStack[0] == 'vehicles' && $fields == 'RegNumber') {
$dataItem = $data;
$editTbl = 'Vehicles';
$link = 'href="index.php?list=vehicles&&tbl='.$srchStack[0].'&&item='.$dataItem.'"';
} elseif($srchStack[0] == 'vehicles' && $fields == 'Make') {
$dataItem = $data;
$editTbl = 'vehicles';
$link = 'href="index.php?list=vehicles&&tbl='.$srchStack[0].'&&item='.$dataItem.'"';
}
$show .= '<tr><td><a '.$link.'>'.$data.'</a></td></tr>
';
}
$show .= '</table>';
return $show;
} else {
$show .= "There are no entries in the database...<br>".mysqli_error($cxn);
return $show;
}
//}
}
echo implement($cxn, $_POST['searchThis'], $_POST['searchItems']);
$cxn->close();
Hi Guys so i had to do some refactoring, realized it was more the PHP MySQL code.
Here is the refactored PHP code
//Item to be searched
$srchThis = strip_tags(trim($searchThis));
//[0]= table , [1]=field to search
$srchStack = explode('.',$field);
$gtData = "SELECT * FROM ".$srchStack[0]." WHERE ".$srchStack[1]." like '%|{$srchThis}|%'";
//or die(mysqli_error($cxn))
if($selectc = mysqli_query($cxn,"SELECT * FROM {$srchStack[0]} WHERE {$srchStack[1]} LIKE '{$srchThis}%' OR {$srchStack[1]} LIKE '%{$srchThis}%'")) {
//$srchData = array();
$rows = mysqli_num_rows(#$selectc) or die(mysqli_error($cxn).'<br>No Rows returned...');
if($rows > 0) {//, MYSQL_ASSOC
//$link = ''; $l_c = 0;
$show .= '<table style="border:2px solid #0000">';
for($c = NULL;$c != $rows && $srchData = mysqli_fetch_assoc($selectc); $c++) {
foreach($srchData as $fields=>$data) {
if($fields == $srchStack[1]) {
$dataItem = $data;
$editTbl = $srchStack[0];
$show .= '<tr><td>'.$dataItem.'</td></tr>';//$a_json_row($dataItem);
//$show .= $link[$c];$link[$c]
}
}
}
$show .= '</table>';
return $show;
} else {
$show .= "There are no entries in the database...<br>".mysqli_error($cxn);
return $show;
}
Of-course the JS code still needs some more work but this greatly improved the results...
Hope this help someone...
I was using the information from this site http://jsfiddle.net/Q6h5s/ to create a drop down menu of Cities and States. When the State is selected the Cities belonging to that state should be selected. However all cities are being loaded. I am not too familiar with Javascript so I can't figure out where I am making this mistake.
Here is my code
<script>
$("#state").change( function(){
if($(this).data('options') == undefined){
$(this).data('options',$('#city-name option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[state=' + id + ']');
$('#city-name').html(options);
});
</script>
State:
<select id="state">
<?php
$fs = new fsCreator();
$cityState = $fs->loadCityState();
$dbh = new DatabaseHandler();
echo '<option value="0">State</option>';
$temp = null;
$sep = ',';
$index = 0;
$max = sizeof($cityState);
for($i = 0; $i< $max; $i++){
if(!($temp == substr($cityState[$i], 0, strpos($cityState[$i], $sep)))){
$index++;
$temp = substr($cityState[$i], 0, (strpos($cityState[$i], $sep)));
echo '<option value="'.($index).'">'.(substr($cityState[$i], 0, strpos($cityState[$i], $sep))).'</option>';
}
}
?>
</select>
City:
<select id="city-name">
<?php
$index = 0;
$cityIndex = 0;
$temp = null;
for($i = 0; $i < $max; $i++){
if(!($temp == substr($cityState[$i], 0, strpos($cityState[$i], $sep)))){
$index++;
$temp = substr($cityState[$i], 0, strpos($cityState[$i], $sep));
}
$cityIndex++;
echo '<option state="'.($index).'value="'.($cityIndex).'">'.(substr($cityState[$i], (strpos($cityState[$i], $sep)) + 1)).'</option>';
}
?>
</select>
The state attribute isn't set properly, which is what you're using to filter by.
you're missing a " at the end of it.
echo '<option state="'.($index).'" value="'.($cityIndex).'">'.(substr($cityState[$i], (strpos($cityState[$i], $sep)) + 1)).'</option>';
^^
Also you are attempting to bind an event handler to an object before it is created.
There are different ways to solve this
Event delegation, bind the handler to the document
$(document).on("change","#state", function(){
if($(this).data('options') == undefined){
$(this).data('options',$('#city-name option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[state=' + id + ']');
$('#city-name').html(options);
});
Using the document load event
$(document).ready(function(){
$("#state").change( function(){
if($(this).data('options') == undefined){
$(this).data('options',$('#city-name option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[state=' + id + ']');
$('#city-name').html(options);
});
});
Putting the code after the element in the markup
State:
<select id="state">
...
</select>
<script>
$("#state").change( function(){
if($(this).data('options') == undefined){
$(this).data('options',$('#city-name option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[state=' + id + ']');
$('#city-name').html(options);
});
</script>
Can any one help how to sort the database results in php
i have pasted the my code below. it display the result but sorting cannot be done.
Any help in this regard
<script language="JavaScript" type="text/javascript">
<!--
var sortedOn = 0;
function SortTable(sortOn) {
var table = document.getElementById('results');
var tbody = table.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr');
var rowArray = new Array();
for (var i=0, length=rows.length; i<length; i++) {
rowArray[i] = rows[i].cloneNode(true);
}
if (sortOn == sortedOn) { rowArray.reverse(); }
else {
sortedOn = sortOn;
if (sortedOn == 0) {
rowArray.sort(RowCompareNumbers);
}
else if (sortedOn == 3) {
rowArray.sort(RowCompareDollars);
}
else {
rowArray.sort(RowCompare);
}
}
var newTbody = document.createElement('tbody');
for (var i=0, length=rowArray.length; i<length; i++) {
newTbody.appendChild(rowArray[i]);
}
table.replaceChild(newTbody, tbody);
}
function RowCompare(a, b) {
var aVal = a.getElementsByTagName('td')[sortedOn].firstChild.nodeValue;
var bVal = b.getElementsByTagName('td')[sortedOn].firstChild.nodeValue;
return (aVal == bVal ? 0 : (aVal > bVal ? 1 : -1));
}
function RowCompareNumbers(a, b) {
var aVal = parseInt(a.getElementsByTagName('td')
[sortedOn].firstChild.nodeValue);
var bVal = parseInt(b.getElementsByTagName('td')
[sortedOn].firstChild.nodeValue);
return (aVal - bVal);
}
function RowCompareDollars(a, b) {
var aVal = parseFloat(a.getElementsByTagName('td')
[sortedOn].firstChild.nodeValue.substr(1));
var bVal = parseFloat(b.getElementsByTagName('td')
[sortedOn].firstChild.nodeValue.substr(1));
return (aVal - bVal);
}
//-->
</script>
Php MySql Query
<?php
$job_id = $_GET['id'] ;
$sql="SELECT date, fullname, city, education from table_name
WHERE id = 'job_id'";
$result=mysql_query($sql); ?>
<table id="results" style="width:980px;">
<thead>
<tr>
<th style="width:60px;"><a onclick="SortTable(0);" href="javascript:;">Date</a></th>
<th style="width:150px;"><a onclick="SortTable(1);" href="javascript:;">Name</a></th>
<th style="width:70px;"><a onclick="SortTable(2);" href="javascript:;">City</a></th>
<th style="width:70px;"><a onclick="SortTable(3);"href="javascript:;">Education</a>
</th>
<?php while($rows=mysql_fetch_array($result)){
?>
<tbody>
<tr>
<td>1</td>
<td><? echo $fullname ; ?></td>
<td><? echo $city ; ?></td>
<td><? echo $b_education ; ?></td>
</tr>
</tbody>
<?
}
?>
</table>
$job_id = $_GET['id'] ;
$sql="SELECT date, fullname, city, education from table_name
WHERE id = 'job_id'";
will not work,
first it should id = '" . $job_id . "' (your WHERE condition search for the id "job_id" not the $job_id variable
2nd based on this lines, google the words "sql injection" ... thats a big security issue! (msyql_real_escape for example)
3rd, mysql provides ORDER functions... if you want client side order, build the result, convert it to json (json_encode) and handle it with javascript, but yours is crappy ^^
regards
Thomas