Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
I have been making this script for about 2 days or something now. I only just learned Ajax so it is hard to try and get everything right. I have all the coding done for it, but when I run the .html file in the browser it doesn't show anything. I tried it in Google Chrome, Opera and Safari and it works fine. I tried it in Internet Explorer and Firefox 3, it didn't work. Nothing shows at all.
In the browsers that they do work. There is an error in the Ajax or MySQL, so the code is below so you can try to help :)
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>AJAX Suggestions</title> <script language="javascript" src="main.js" /> </head> <body> <p>AJAX Suggestions</p> <form method="GET"> <p> Programming Languages: <input type="text" id="pLan" onkeyup="ajaxFunction()" /> <br /> Type: <select id="type" onchange="ajaxFunction()"> <option>Programming</option> <option>Scripting</option> <option>Mark-Up</option> </select> <br /><br /> </p> <div id="suggestions"> </div> </form> </body> </html>
main.js
<!--
//Browser Support Code
function 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) {
// Browser doesn't support Ajax
alert("Get a new browser!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('suggestions');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var pLan = document.getElementById('pLan').value;
var type = document.getElementById('type').value;
var queryString = "?pLan=" + pLan + "&type=" + type;
ajaxRequest.open("GET", "results.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
results.php
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "lang";
//Connect to MySQL Server
mysql_connect("$dbhost", "$dbuser", "$dbpass");
//Select Database
mysql_select_db($dbname) or die(mysql_error());
//Retrieve the data from the form
$pLan = $_GET['pLan'];
$type = $_GET['type'];
//Prevent SQL Injection
$pLan = mysql_real_escape_string("$pLan");
$type = mysql_real_escape_string("$type");
//Start to build the query
if(((strlen($pLan)) == 0) && (!isset($type)))
$query = "SELECT * FROM languages";
else
$query = "SELECT * FROM languages WHERE";
if((strlen($pLan)) >= 0)
$query .= " lang = " . $pLan;
if(isset($type))
$query .= " AND type = " . $type;
//Execute query
$result = mysql_query($query) or die(mysql_error());
//Build Results
$display = "<table border='0'>";
$display .= "<tr>";
$display .= "<th>Language</th>";
$display .= "<th>Type</th>";
$display .= "</tr>";
while($row = mysql_fetch_array($result)) {
$display .= "<tr>";
$display .= "<td>" . $row[lang] . "</td>";
$display .= "<td>" . $row[type] . "</td>";
$display .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display .= "</table>";
echo $display;
?>
queries.sql The MySQL table and fields.
--
-- Table structure for table `languages`
--
CREATE TABLE IF NOT EXISTS `languages` (
`lang` varchar(40) NOT NULL,
`type` varchar(40) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Dumping data for table `languages`
--
INSERT INTO `languages` (`lang`, `type`) VALUES
('', ''),
('HTML', 'Mark-Up'),
('CSS', 'Scripting'),
('Javascript', 'Scripting'),
('XML', 'Mark-Up'),
('ASP', 'Programming'),
('C', 'Programming'),
('Actionscript', 'Scripting'),
('MySQL', 'Scripting'),
('Assembly', 'Programming'),
('Java', 'Programming');
What the code does is, you type something in and it shows a list of suggestions. Also to further that, you can choose what type of language you would like to see.
It seems to show this.
When the name is empty;
Quote
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'AND type = Programming' at line 1
Then when the name has a value;
Quote
Unknown column 'm' in 'where clause'
Any help is appreciated :)
UPDATE:
I have fixed some problems. I have changed the building the queries area of the code.
Here is the new code;
//Start to build the query if(((strlen($pLan)) == 0) && (!isset($type))) $query = "SELECT * FROM languages"; else $query = "SELECT * FROM languages WHERE"; if((strlen($pLan)) >= 0) $query .= " lang = '" . $pLan . "%'"; if(isset($type)) $query .= " AND type = '" . $type . "'";
This does not create any problems at all, but I have done this for a reason. The wildcard is apart of the $pLan. So this shows no errors at all, but it does not show any. And I know that, because I explained above. But if I move the wildcard out of the $pLan, it shows an error. New code;
//Start to build the query if(((strlen($pLan)) == 0) && (!isset($type))) $query = "SELECT * FROM languages"; else $query = "SELECT * FROM languages WHERE"; if((strlen($pLan)) >= 0) $query .= " lang = '" . $pLan . "'%"; if(isset($type)) $query .= " AND type = '" . $type . "'";
Error;
Quote
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'AND type = 'Programming'' at line 1
After "Programming" in the error it is actually 2 " ' " not a ".
Any ideas? Also still haven't got it fixed to work in Firefox 3.0 and Internet Explorer.
Once I get this working, I hope to make it into a tutorial :)
Back to top
