I’m trying to create a table dynamically based on users selects with jquery / ajax / php
I believe I am close but can’t nail down this last issue..
I am receiving a correct alert data but it will not write itself into the specified div layer.
I am not a jquery expert, so any help at newbie level would be very much appreciated.
THE HTML / Jquery
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<div class="formtaglong">
<input type="radio" value="both" name="buildings" class="small_radio" checked > <span class="checkboxText">Both</span>
<input type="radio" value="thunder" name="buildings" class="small_radio" > <span class="checkboxText">Thunderhawk</span>
<input type="radio" value="center" name="buildings" class="small_radio" > <span class="checkboxText">Center Drive</span>
</div>
<div class="formtaglong" id="checkall">
<input type="checkbox" value="All" id="sa" name="sa" class="small_radio" > <span class="checkboxText">All</span>
<?php
while($row = mysql_fetch_array($query)){
echo '<input type="checkbox" value="'.$row['operator'].'" name="users[]" class="small_radio"> <span class="checkboxText">' .$row['operator'] . '</span> ';
}
?>
</div>
<div class="formtaglong">
<input type="radio" id="alltime" value="alltime" name="daterange" class="small_radio" checked ><span class="checkboxText">All</span>
<input type="radio" id="today" value="today" name="daterange" class="small_radio" > <span class="checkboxText">Today</span>
<input type="radio" id="yesterday" value="yesterday" name="daterange" class="small_radio" > <span class="checkboxText">Yesterday</span>
<input type="radio" id="threedays" value="threedays" name="daterange" class="small_radio" > <span class="checkboxText">3 Days</span>
<input type="radio" id="thisweek" value="thisweek" name="daterange" class="small_radio" > <span class="checkboxText">This Week</span>
<input type="radio" id="thismonth" value="thismonth" name="daterange" class="small_radio" > <span class="checkboxText">This Month</span>
<input type="Submit" name="print" id="print" value="Submit" class="button">
</div>
<div class="results" id="results">
<!-- THE RESULTS SHOULD BE DYNAMICALLY POSTED HERE -->
</div>
<script>
$(document).ready(function(){
$("#checkall").click(function() {
//check radio buildings for selected value
var radBuild = $('input:radio[name=buildings]:checked').val();
//check radio daterange for selected value
var radDate = $('input:radio[name=daterange]:checked').val();
//create array for multiple possibilites from checkbox users
var chkUsers = [];
//loop through checkboxes appending values to array
$('#checkall :checked').each(function() {
chkUsers.push($(this).val());
});
//send the request
$.ajax({
url: "/inventory/pick-print-results.php",
type: "post",
data: "buildings=" + radBuild + "&daterange=" + radDate + "&users[]=" + chkUsers,
// callback for success
success: function(data, textStatus) {
$(".results").html(data); //No data here
alert(data); //Data here
}, //end success else...
//if failsauce success throw error
error: function() {
alert('Not OKay');
} //end error failsauce
}); //ends .ajax function
}); //end #checkall. click function
}); // ends ready function
</script>
The Alert Popup is returning valid html.. my popup on click has data like this..
<table border="1px" style="width: 761px;" cellspadding="0" cellspacing="0"><tr class="tr2center"><td>AS001-70S</td><td>10-9-12, 9:42 am</td><td>Don Ford </td><td>500</td><td>LOAD</td><td>09-28-2010</td><td>
<a href="picking.php?radiopart=1005">Mark Picked</a></td></tr><tr class="tr1center"><td>H-016-V75</td><td>10-9-12, 11:28 am</td><td>Don Ford </td><td>80</td><td>LOAD</td><td>09-05-2012</td><td>
<a href="picking.php?radiopart=4503">Mark Picked</a></td></tr></table>
My php processing page…
<?php
include 'connect_to_db.php';
if(isset($_POST['daterange'])){ $daterange = $_POST['daterange']; }else{$daternage='';}
if(isset($_POST['users'])) { $users=$_POST['users']; }else{ $users='';}
if(isset($_POST['buildings'])){ $buildings=$_POST['buildings']; }else{$buildings='';}
//Build Daterange AND statment for query
switch ($daterange) {
case "alltime":
$query_chunk_2='';
break;
case "today":
$query_chunk_2= 'AND pi.date_requested >= \'' . date('Y-m-d') . '\'';
break;
case "yesterday":
$query_chunk_2='AND pi.date_requested >= \'' . date('Y-m-d',strtotime('-1 days')) . '\'';
break;
case "threedays":
$query_chunk_2='AND pi.date_requested >= \'' . date('Y-m-d',strtotime('-3 days')) . '\'';
break;
case "thisweek":
$query_chunk_2='AND pi.date_requested >= \'' . date('Y-m-d',strtotime('-7 days')) . '\'';
break;
case "thismonth":
$query_chunk_2='AND pi.date_requested >= \'' . date('Y-m-d',strtotime('-30 days')) . '\'';
break;
default:
$query_date='';
}
//Build Building AND Statment for query
switch ($buildings) {
case "both":
$query_chunk_3='';
break;
case "center":
$query_chunk_3='AND l.building LIKE \'%Center%\'';
break;
case "thunder":
$query_chunk_3='AND l.building LIKE \'%Thunder%\'';
break;
default:
$query_chunk_3='';
}
//check if users is array
if(is_array($users)) {
//Deal With User Array
//IF ALL IS SET..... GET ALL USERS IGNORE OTHER SELECTIONS
if($_POST['users'][0]=='All' || $_POST['users'][0]=='All,') {
$query_chunk_4="AND o.operator NOT LIKE ' '";
} else {
//ELSE WE LOOP THROUGH EACH VALUE AND BUILD THE QUERY STATEMENT
//Chunk 4 segment 1
$query_chunk_4 ="AND o.operator IN(";
//Get Total Array Values To Properly Add Commas to the String
$i=0; // zero start value counter
$ar_count=count($_POST['users']); //total elments in array
foreach($_POST['users'] as $k=>$c)
{
$query_chunk_4.="'".$c."'";
if($i!=$ar_count && $i!=($ar_count-1)){
$query_chunk_4.=",";
}
$i++;
}
//Chunk 4 last segment
$query_chunk_4 .=")";
}
}else { //USERS IS NOT AN ARRAY
$query_chunk_4="AND o.operator NOT LIKE ' '";
}
//STATIC BEGINING OF QUERY
$query_chunk_1="SELECT pi.* , p.part_number, o.description, l.location, r.received_date
FROM picks AS pi
INNER JOIN parts AS p ON p.part_id = pi.part_id
INNER JOIN operators AS o ON o.operator_id = pi.operator_id
INNER JOIN locations AS l ON l.location_id = pi.location_id
INNER JOIN received AS r ON r.received_id = pi.received_id
WHERE pi.action_id = '11'";
//STATIC END OF QUERY
$query_chunk_last="ORDER BY pi.date_requested ASC";
//MERGE QUERY
$big_chunk_sql=$query_chunk_1 . ' ' . $query_chunk_2 . ' ' . $query_chunk_3 . ' ' . $query_chunk_4 . ' ' . $query_chunk_last;
$big_chunk_query=mysql_query($big_chunk_sql) or die(mysql_error());
//echo "<br> Big Chunk = ".$big_chunk_sql;
$i='';
echo '<table border="1px" style="width: 761px;" cellspadding="0" cellspacing="0">';
while($data=mysql_fetch_array($big_chunk_query)) {
if ($i%2 !=0)
$rowColor = 'tr1center';
else
$rowColor = 'tr2center';
$pendingdate= trim($data['received_date']);
$newpendingdate = date('m-d-Y',strtotime($pendingdate));
echo '<tr class="'.$rowColor.'"><td>'.$data['part_number'] . '</td><td>'.date("m-j-y, g:i a", strtotime($data['date_requested'])) .'</td><td>'
.$data['description'].'</td><td>'. $data['qty_requested'] . '</td><td>'. $data['location'].'</td><td>'. $newpendingdate . '</td><td>
<a href="picking.php?radiopart='.urlencode($data['org_transaction_id']) .'">Mark Picked</a></td></tr>';
if($data['notes_to_picker']!='') {
echo '<tr class="'.$rowColor.'" align="center"><td colspan="2"> </td><td align="right"><b>notes:</b></td><td colspan="4">' . $data['notes_to_picker'].'</td></tr>';
}
$i++;
}
echo '</table>';
?>
EDIT With Changing the $(‘.results’).html(data) to $(‘.results’).text(data) I get exactly this in my div, it looks like html code wrapped in pre tags exactly as it appears on this page..
<table border="1px" style="width: 761px;" cellspadding="0" cellspacing="0"><tr class="tr2center"><td>AS001-70S</td><td>10-9-12, 9:42 am</td><td>Don Ford </td><td>500</td><td>LOAD</td><td>09-28-2010</td><td> <a href="picking.php?radiopart=1005">Mark Picked</a></td></tr><tr class="tr1center"><td>H-016-V75</td><td>10-9-12, 11:28 am</td><td>Don Ford </td><td>80</td><td>LOAD</td><td>09-05-2012</td><td> <a href="picking.php?radiopart=4503">Mark Picked</a></td></tr></table>
Problem was with the original html not the result html.
my container had invalid html inside it, but removing that the html was displayed properly.