Jump to content

Ajax Help


migroo
 Share

Recommended Posts

Okay I am having a lot of trouble with AJAX. I read all the tutorials on w3schools several times and that helped some. But they are fairly short and don't get into the javascript side of it much. I don't know much javascript I am finding it to be one of if not the hardest web language to learn. The w3chools tutorial tells you how to create a single drop down menu and it will get that data. well I messed around with if for a bit and got it to work with my data base but it only had one input field and I have no idea how to build a second on. I went on line to another site and they had one that was supposed to work but I did exactly what they said and it didn't work. Here HTML is my code(Note: I do not have the correct header or a DTD on this because I am just using for testing):

<html><head><script language="javascript" type="text/javascript"><!-- //Browser Support Codefunction ajaxFunction(){ var ajaxRequest;  // The variable that makes Ajax possible!	 try{   // Opera 8.0+, Firefox, Safari   ajaxRequest = new XMLHttpRequest(); }catch (e){   // Internet Explorer Browsers   try{	  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");   }catch (e) {	  try{		 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");	  }catch (e){		 // Something went wrong		 alert("Your browser broke!");		 return false;	  }   } } // Create a function that will receive data  // sent from the server and will update // div section in the same page. ajaxRequest.onreadystatechange = function(){   if(ajaxRequest.readyState == 4){	  var ajaxDisplay = document.getElementById('ajaxDiv');	  ajaxDisplay.value = ajaxRequest.responseText;   } } // Now get the value from user and pass it to // server script. var age = document.getElementById('age').value; var wpm = document.getElementById('wpm').value; var ###### = document.getElementById('######').value; var queryString = "?age=" + age; queryString +=  "&wpm=" + wpm + "#####=" + ######; ajaxRequest.open("GET", "/ajax-example.php" + 							  queryString, true); ajaxRequest.send(null); }//--></script></head><body><form name='myForm'>Max Age: <input type='text' id='age' /> <br />Max WPM: <input type='text' id='wpm' /><br />######: <select id='######'><option value="m">m</option><option value="f">f</option></select><input type='button' onclick='ajaxFunction()' 							  value='Query MySQL'/></form><div id='ajaxDiv'>Your result will display here</div></body></html>

And here is my PHP code:

<?php$dbhost = "localhost";$dbuser = "username";$dbpass = "password";$dbname = "ajax_example";	//Connect to MySQL Servermysql_connect($dbhost, $dbuser, $dbpass);	//Select Databasemysql_select_db($dbname) or die(mysql_error());	// Retrieve data from Query String$age = $_GET['age'];$###### = $_GET['######'];$wpm = $_GET['wpm'];	// Escape User Input to help prevent SQL Injection$age = mysql_real_escape_string($age);$###### = mysql_real_escape_string($######);$wpm = mysql_real_escape_string($wpm);	//build query$query = "SELECT * FROM ajax_example WHERE ###### = '$######'";if(is_numeric($age))	$query .= " AND age <= $age";if(is_numeric($wpm))	$query .= " AND wpm <= $wpm";	//Execute query$qry_result = mysql_query($query) or die(mysql_error());	//Build Result String$display_string = "<table>";$display_string .= "<tr>";$display_string .= "<th>Name</th>";$display_string .= "<th>Age</th>";$display_string .= "<th>######</th>";$display_string .= "<th>WPM</th>";$display_string .= "</tr>";// Insert a new row in the table for each person returnedwhile($row = mysql_fetch_array($qry_result)){	$display_string .= "<tr>";	$display_string .= "<td>$row[name]</td>";	$display_string .= "<td>$row[age]</td>";	$display_string .= "<td>$row[######]</td>";	$display_string .= "<td>$row[wpm]</td>";	$display_string .= "</tr>";	}echo "Query: " . $query . "<br />";$display_string .= "</table>";echo $display_string;?>

I don't know if this is the write place to post this because it uses php html and javascript. If its not just tell me and I will delete and re-post in the correct place.Thanks and I hope some one knows what I am doing wrong.--Edit--For sum reason it seems to replace the word "s e x" with "####" so that is what the "####" are there for. It is an option for gender in my html and gets beeped out every where so sorry about that I didn't think about it when I posted and I don't want to mess the coding up by trying to change it.

Edited by migroo
Link to comment
Share on other sites

well it doesn't work it don't do anything. I put in the values that should get me a result and nothing happens when I click the little submit button.

Link to comment
Share on other sites

That worked now I have access denied but that is my fault and easy to fix THANK YOU!!!

Edited by migroo
Link to comment
Share on other sites

Hmmm now what am I doing wrong? I for sum reason my javascript isn't sending anything to my php page.

<html><head><script language="javascript" type="text/javascript"><!-- //Browser Support Codefunction ajaxFunction(){ var ajaxRequest;  // The variable that makes Ajax possible!	 try{   // Opera 8.0+, Firefox, Safari   ajaxRequest = new XMLHttpRequest(); }catch (e){   // Internet Explorer Browsers   try{	  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");   }catch (e) {	  try{		 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");	  }catch (e){		 // Something went wrong		 alert("Your browser broke!");		 return false;	  }   } } // Create a function that will receive data  // sent from the server and will update // div section in the same page. ajaxRequest.onreadystatechange = function(){   if(ajaxRequest.readyState == 4){	  var ajaxDisplay = document.getElementById('ajaxDiv');	  ajaxDisplay.innerHTML = ajaxRequest.responseText;   } } // Now get the value from user and pass it to // server script. var name = document.getElementById('name').value; var age = document.getElementById('age').value; var wpm = document.getElementById('wpm').value; var ###### = document.getElementById('######').value; var queryString = "?age=" + age; queryString +=  "&wpm=" + wpm + "#####=" + ###### + "&name" + name; ajaxRequest.open("GET", "/ajax-example.php" + 							  queryString, true); ajaxRequest.send(null); }//--></script></head><body><form name='myForm'>Max Age: <input type='text' id='age' /> <br />Max WPM: <input type='text' id='wpm' /><br />######: <select id='######'><option value="m">m</option><option value="f">f</option></select>Name: <input type="text" id="name" /><input type='button' onclick='ajaxFunction()' 							  value='Query MySQL'/></form><div id='ajaxDiv'>Your result will display here</div></body></html>

I just tried to add the name search field and now it isn't sending the name info to the php page.

Link to comment
Share on other sites

Thank you very very much it works perfectly now and boy do I feel dumb.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...