migroo Posted March 18, 2010 Share Posted March 18, 2010 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. Link to comment Share on other sites More sharing options...
jeffman Posted March 18, 2010 Share Posted March 18, 2010 What exactly is the problem/question? Link to comment Share on other sites More sharing options...
migroo Posted March 18, 2010 Author Share Posted March 18, 2010 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 More sharing options...
ShadowMage Posted March 18, 2010 Share Posted March 18, 2010 Try using innerHTML instead of value on this line:ajaxDisplay.value = ajaxRequest.responseText;Divs don't have a value property. Link to comment Share on other sites More sharing options...
migroo Posted March 18, 2010 Author Share Posted March 18, 2010 That worked now I have access denied but that is my fault and easy to fix THANK YOU!!! Link to comment Share on other sites More sharing options...
migroo Posted March 21, 2010 Author Share Posted March 21, 2010 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 More sharing options...
ShadowMage Posted March 22, 2010 Share Posted March 22, 2010 I just tried to add the name search field and now it isn't sending the name info to the php page.You forgot your '=' sign:"&name=" + name Link to comment Share on other sites More sharing options...
migroo Posted March 22, 2010 Author Share Posted March 22, 2010 Thank you very very much it works perfectly now and boy do I feel dumb. Link to comment Share on other sites More sharing options...
ShadowMage Posted March 22, 2010 Share Posted March 22, 2010 No worries! I do stuff like that all the time. Link to comment Share on other sites More sharing options...
migroo Posted March 24, 2010 Author Share Posted March 24, 2010 Glad I am not the only one. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.