How do I refind mysql results using the combination of javascript and ajax? I know it’s a vague question…but the last few weeks all I’ve been getting are vague answers…lol
here is the part of the html which I would like to do the refining
[code]
P PC PF PT PR PM OGP[/code]
You pointed out that your question was vague, but unfortunately, it is a little too vague to be answered. I will try to help you out as much as possible.
What you have posted is a snippet of pure html. There isn’t a hint of javascript, ajax, php, or anything else. This represents a single drop down selection, which should be within an html form element.
You mentioned an ajax and javascript solution combined with a mysql query. One way to pursue this would be:
[ol][li]Build a complete html form containing the select[/li]
[li]Create a div to hold the results of your query[/li]
[li]Create an XMLHttpRequest object to facilitate communication between the browser and the server[/li]
[li]Create server side code to receive the value of the html select, query the database, and build an html response[/li]
[li]In the page with the form, tie the select to a javascript function. This can be done directly with the select with something like an onchange event or through an onsubmit event attached to the form[/li]
[li]Code the called javascript function to form your XMLHttpRequest, pass it to the server code, receive the response, and to set the div’s content to the response.[/li][/ol]
This answer is as specific as possible. If you have some working code that you would like to migrate to an ajax solution, please post it and we would be happy to help you try to do this. If you don’t, you will need to put together an initial html page with your complete form. You will also need to put together the server side code to query your mysql database. Once you have these, we can help you make everything work.
Thanks for the reply…here is the current code for the form:
<!DOCTYPE HTML>
<html>
<head>
<!--[if lte IE 8 ]>
<script>
document.createElement("footer");
document.createElement("header");
</script>
<![endif]-->
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.button
{
background-color: #0033ff;
color: #fff;
font-family: Verdana, Arial;
}
a:link {color:#0033FF;} /* unvisited link */
a:visited {color:#0033FF;} /* visited link */
a:hover {color:#0033FF;} /* mouse over link */
a:active {color:#0033FF;} /* selected link */
</style>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$("submitted").click(function() {
var url = "find_policy.inc.php";
$.ajax({
type: "POST",
url: url,
data: $("doublecombo").serialize(), // serializes the form's elements.
success: function(data)
{
// populate box or div with your result
}
});
return false; // avoid reload.
});
</script>
</head>
<body>
<form name="doublecombo" action="" method="POST">
<table border="1" cellpadding="10px" bgcolor="#CCCCCC">
<tr><td> <label for="status">Find in:</label>
<label for="current">
<input class="radio_style" id="current" checked="checked" name="status" type="radio" value="current">
Current
</label>
<label for="obsolete">
<input class="radio_style" id="obsolete" name="status" type="radio" value="obsolete">
Obsolete
</label>
<label for="both">
<input class="radio_style" id="both" name="status" type="radio" value="both">
Both
</label></td></tr>
<br />
<tr><td>
<label for="Category">By category:</label>
<select name="category" size="1" width="300" style="width: 300px" onChange="redirect(this.options.selectedIndex)">
<option value="null">Category</option>
<option value="asset management">Asset Management</option>
<option value="budget">Budget/Finance</option>
<option value="central office">Central Office</option>
<option value="client services/programs">Client Services/Programs</option>
<option value="cam">Customer Account Management</option>
<option value="dc">Design & Construction</option>
<option name="disposal" value="disposal">Disposal</option>
<option value="orm">Organization/Resource Management</option>
<option value="Procurement/Contracting">Procurement/Contracting</option>
<option value="real property acquisition">Real Property Acquisition</option>
<option value="real property management/lease administration">Real Property Management/Lease Administration</option>
</select>
<select name="subcategory" size="1"width="300" style="width: 300px" >
<option value="null">Sub-Category</option>
<option value="Portfolio">Portfolio</option>
<option value="Pricing">Pricing</option>
<option value="Valuation">Valuation</option>
<option value="Claims">Claims</option>
<option value="Financial Management">Financial Managementt</option>
<option value="Funding">Funding</option>
<option value="Internal Controls">Internal Controls</option>
<option value="Rent/Billling">Rent/Billling</option>
<option value="Central Office">Central Office</option>
<option value="Conferences">Conferences</option>
<option value="Child Care">Child Care</option>
<option value="Concessions">Concessions</option>
<option value="Delegations">Delegations</option>
<option value="Directives Management">Directives Management</option>
<option value="Historic Preservation">Historic Preservation</option>
<option value="Records Management">Records Management</option>
<option value="Reimbursable Services">Reimbursable Services</option>
<option value="Sustainable Design">Sustainable Design</option>
<option value="WorkPlace Programs">WorkPlace Programs</option>
<option value="Customer Account Management">Customer Account Management</option>
<option value="Accessibility">Accessibility</option>
<option value="Art in Architecture">Art in Architecture</option>
<option value="Border Stations">Border Stations</option>
<option value="Building Information Modeling">Building Information Modeling</option>
<option value="Courthouse Program">Courthouse Program</option>
<option value="Design Criteria and Guidelines">Design Criteria and Guidelines</option>
<option value="Design Excellence">Design Excellence</option>
<option value="Facilities Standards">Facilities Standards</option>
<option value="Fire Protection/Life Safety">Fire Protection/Life Safety</option>
<option value="Project Development">Project Development</option>
<option value="Project Management">Project Management</option>
<option value="Repairs and Alterations">Repairs and Alterations</option>
<option value="Security">Security</option>
<option value="Seismic">Seismic</option>
<option value="Urban Design">Urban Designt</option>
<option id="disposal" value="Disposal">Disposal</option>
<option value="Business Planning & Improvement">Business Planning & Improvement</option>
<option value="Communications/Branding">Communications/Branding</option>
<option value="External Relations and Inquiries">External Relations and Inquiries</option>
<option value="Correspondence Management">Correspondence Management</option>
<option value="Information Technology">Information Technology</option>
<option value="Management Controls">Management Controls</option>
<option value="Occupation Safety and Health">Occupation Safety and Health</option>
<option value="Telework">Telework</option>
<option value="Procurement">Procurement</option>
<option value="Procurement Instructional Bulletins">Procurement Instructional Bulletins</option>
<option value="Assignment & Utilization of Space">Assignment & Utilization of Space</option>
<option value="Lease Administration/Lease Policy">Lease Administration/Lease Policy</option>
<option value="Occupancy Services">Occupancy Services</option>
<option value="Site Acquisition">Site Acquisition</option>
<option value="Building Operations, Maintenance and Cleaning">Building Operations, Maintenance and Cleaning</option>
<option value="Emergency Preparedness">Emergency Preparedness</option>
<option value="Energy and Utilities">Energy and Utilities</option>
<option value="Enviroment">Enviroment</option>
<option value="Fire Protection/Life Safety">Fire Protection/Life Safety</option>
<option value="Health">Healtht</option>
<option value="Lease Administration">Lease Administration</option>
<option value="Naming Buildings">Naming Buildings</option>
<option value="Occasional Use of Public Space">Occasional Use of Public Space</option>
<option value="Recycling">Recycling</option>
<option value="Repairs and Alterations">Repairs and Alterations</option>
<option value="Security">Security</option>
</select>
<input name="submitted" class="button" type="submit" value="GO"></td></tr>
<br />
<tr><td>
By term:
<input type="text" name="find" placeholder="Search Term" />
<Select NAME="field">
<Option id="searchon" VALUE="null">Search On</option>
<Option id="title" VALUE="title">Title</option>
<Option id="poc" VALUE="poc">POC</option>
<Option id="purpose" VALUE="purpose">Purpose</option>
</Select>
<input type="hidden" name="searching" value="yes" />
<input name="submitted" class="button" type="submit" value="GO"><br />
<select name="office">
<option value="p" >P</option>
<option value="pc" >PC</option>
<option value="pf" >PF</option>
<option value="pt" >PT</option>
<option value="pr" >PR</option>
<option value="pm" >PM</option>
<option value="ogp" >OGP</option>
</select>
<input name="submitted" class="button" type="submit" value="GO"><br />
</td></tr>
</form>
</table>
<br /><br />
<script>
<!--
/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/
var groups=document.doublecombo.category.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=new Option("Sub Category")
group[1][0]=new Option("Portfolio")
group[1][1]=new Option("Pricing")
group[1][2]=new Option("Valuation")
group[2][0]=new Option("Claims")
group[2][1]=new Option("Financial Management")
group[2][2]=new Option("Funding")
group[2][3]=new Option("Internal Controls")
group[2][4]=new Option("Rent/Billing")
group[3][0]=new Option("Central Office")
group[3][1]=new Option("Conferences")
group[4][0]=new Option("Child Care")
group[4][1]=new Option("Concessions")
group[4][2]=new Option("Delegations")
group[4][3]=new Option("Directives Management")
group[4][4]=new Option("Historic Preservation")
group[4][5]=new Option("Records Management")
group[4][6]=new Option("Reimbursable Services")
group[4][7]=new Option("Sustainable Design")
group[4][8]=new Option("WorkPlace Programs")
group[5][0]=new Option("Customer Account Management")
group[6][0]=new Option("Accessibility")
group[6][1]=new Option("Art in Achitecture")
group[6][2]=new Option("Border Stations")
group[6][3]=new Option("Building Information Modeling")
group[6][4]=new Option("Courthouse Program")
group[6][5]=new Option("Design Criteria and Guidelines")
group[6][6]=new Option("Design Excellence")
group[6][7]=new Option("Facilities Standards")
group[6][8]=new Option("Fire Protection/Life Safety")
group[6][9]=new Option("Project Development")
group[6][10]=new Option("Project Management")
group[6][11]=new Option("Repairs and Alterations")
group[6][12]=new Option("Security")
group[6][13]=new Option("Seismic")
group[6][14]=new Option("Urban Design")
group[7][0]=new Option("Disposal")
group[8][0]=new Option("Business Planning & Improvement")
group[8][1]=new Option("Communications/Branding")
group[8][2]=new Option("External Relations and Inquires")
group[8][3]=new Option("Correspondence Management")
group[8][4]=new Option("Information Technology")
group[8][5]=new Option("Management Controls")
group[8][6]=new Option("Occupation Safety and Health")
group[8][7]=new Option("Telework")
group[9][0]=new Option("Procurement")
group[9][1]=new Option("Procurement Instructional Bullentins")
group[10][0]=new Option("Assignment & Utilization of Space")
group[10][1]=new Option("Lease Administration/Lease Policy")
group[10][2]=new Option("Occupancy Services")
group[10][3]=new Option("Site Acquisition")
group[11][0]=new Option("Building Operations, Maintenance and Cleaning")
group[11][1]=new Option("Emergency Preparedness")
group[11][2]=new Option("Enviroment")
group[11][3]=new Option("Fire Protection/Life Safety")
group[11][4]=new Option("Health")
group[11][5]=new Option("Lease Administration")
group[11][6]=new Option("Naming Buildings")
group[11][7]=new Option("Occasional Use of Public Space")
group[11][8]=new Option("Recycling")
group[11][9]=new Option("Repairs and Alterations")
group[11][10]=new Option("Security")
var temp=document.doublecombo.subcategory
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
And here is the PHP code:
[php]
"; $res = mysql_query("SELECT * FROM material WHERE status='$status' AND category='$category' ORDER BY `material`.`title` ASC "); while ($row = mysql_fetch_assoc($res)) { echo '
"; $res = mysql_query("SELECT * FROM material WHERE status='$status' AND category='$category' ORDER BY `material`.`title` ASC "); while ($row = mysql_fetch_assoc($res)) { echo '
"; $res = mysql_query("SELECT * FROM material WHERE status1='both' AND category='$category' ORDER BY `material`.`title` ASC "); while ($row = mysql_fetch_assoc($res)) { echo '
";
//If they did not enter a search term we give them an error
if ($find == "")
{
echo "Clear Search";
echo '
';
echo '
';
echo '';
exit;
}
// We preform a bit of filtering
$find = strtoupper($find);
$find = strip_tags($find);
$find = trim ($find);
//Now we search for our search term, in the field the user specified
if($status=='current'){
$data = mysql_query("SELECT * FROM material WHERE status='$status' AND lower($field) LIKE'%$find%' ORDER BY `material`.`title` ASC ");
while ($row = mysql_fetch_assoc($data)) {
echo '
[/php]
and the live link is here…am working on it as I type so it changes frequently
http://www.halfwayenterprises.com/find_policy.php
I was playing with the “go” buttom for the “office” but I would like it to be a dropdown which to my understanding is where the Ajax comes in. I have very little live experience with Ajax
I made a few changes to the form page.
The ajax component was never triggering in the original script. You have three submit buttons, so it seems to be a better approach to trap the form’s submit, as compared to each individual submit button. I also believe there was an issue with the placement of the ajax script. It was positioned before the appropriate form and div elements were being created so it was failing to bind (I believe). I also created a div to hold the results of the query with an id of “ajaxResult.”
After making these changes, I can confirm that the php script is receiving the post data and that the output of the script is being displayed in the targeted div. I cannot; however, confirm that the actual php script is functioning, as it relies on external components (database and includes) that I cannot test.
Let me know what happens when you try it.
See if this gets us anywhere:[php]
Untitled Document .button { background-color: #0033ff; color: #fff; font-family: Verdana, Arial; } a:link { color:#0033FF; } /* unvisited link */ a:visited { color:#0033FF; } /* visited link */ a:hover { color:#0033FF; } /* mouse over link */ a:active { color:#0033FF; } /* selected link */| Find in: Current Obsolete Both |
| By category: Category Asset Management Budget/Finance Central Office Client Services/Programs Customer Account Management Design & Construction Disposal Organization/Resource Management Procurement/Contracting Real Property Acquisition Real Property Management/Lease Administration Sub-Category Portfolio Pricing Valuation Claims Financial Managementt Funding Internal Controls Rent/Billling Central Office Conferences Child Care Concessions Delegations Directives Management Historic Preservation Records Management Reimbursable Services Sustainable Design WorkPlace Programs Customer Account Management Accessibility Art in Architecture Border Stations Building Information Modeling Courthouse Program Design Criteria and Guidelines Design Excellence Facilities Standards Fire Protection/Life Safety Project Development Project Management Repairs and Alterations Security Seismic Urban Designt Disposal Business Planning & Improvement Communications/Branding External Relations and Inquiries Correspondence Management Information Technology Management Controls Occupation Safety and Health Telework Procurement Procurement Instructional Bulletins Assignment & Utilization of Space Lease Administration/Lease Policy Occupancy Services Site Acquisition Building Operations, Maintenance and Cleaning Emergency Preparedness Energy and Utilities Enviroment Fire Protection/Life Safety Healtht Lease Administration Naming Buildings Occasional Use of Public Space Recycling Repairs and Alterations Security |
|
By term:
Search On
Title
POC
Purpose
P PC PF PT PR PM OGP |
Thanks for you assistance. However the original searchbox is duplicated in the results div.
I just went to http://www.halfwayenterprises.com/find_policy.inc.php and it is the serach box, not the code you previously posted. Could it have gotten inadvertently replaced?
http://halfwayenterprises.com/find_policy2.php
I think I changed it up whilst you were working on it. the above link would be the ideal situation, where after the user get the initial results, they would be able to “refine” said with result with those dropdown boxes. Sorry for any confusion 