Estoy tratando de hacer un autocompletado ingresando solo el ID del cliente, vi un ejemplo y quise practicarlo para poder entenderl, solo que al momento de querer correrlo en la consola de FireFox me aparece el siguiente mensaje
La codificación de caracteres del documento HTML no fue declarada. El documento se mostrará con texto "basura" en algunas configuraciones de navegador si el documento contiene caracteres externos al rango US-ASCII. La codificación de caracteres de la página debe ser declarada en el documento o en el protocolo de transferencia.
SyntaxError: expected expression, got '<' rellena.html 2 (Llinea)
mi base de datos de ejemplo qu estoy usando es la siguiente
create table ajax_client(
clientID int not null primary key,
firstname varchar(255),
lastname varchar(255),
address varchautoar(255),
zipCode varchar(15),
city varchar(128),
country varchar(64));
insert into ajax_client(clientID,firstname,lastname,address,zipCode,city,country)values('1001','John','Alastname','Queens street 15','4000','STAVANGER','NORWAY');
insert into ajax_client(clientID,firstname,lastname,address,zipCode,city,country)values('1002','Mary','Something','Kings square 10','4070','RANDABERG','NORWAY');
insert into ajax_client(clientID,firstname,lastname,address,zipCode,city,country)values('1003','Peter','Jensen','Main road','5000','BERGEN','NORWAY');
insert into ajax_client(clientID,firstname,lastname,address,zipCode,city,country)values('1004','Laura','Olsson','','7000','TRONDHEIM','NORWAY');autoauto
mi fichero de rellena.html
es el siguiente
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
fieldset{
width:500px;
margin-left:10px;
}
</style>
<script type="text/javascript" src="ajax/ajax.js"></script>
<script type="text/javascript">
var ajax = new sack();
var currentClientID=false;
function getClientData()
{
var clientId = document.getElementById('clientID').value.replace(/[^0-9]/g,'');
if(clientId.length==4 && clientId!=currentClientID){
currentClientID = clientId
ajax.requestFile = 'getClient.php?getClientId='+clientId; // Specifying which file to get
ajax.onCompletion = showClientData; // Specify function that will be executed after file has been found
ajax.runAJAX(); // Execute AJAX function
}
}
function showClientData()
{
var formObj = document.forms['clientForm'];
eval(ajax.response);
}
function initFormEvents()
{
document.getElementById('clientID').onblur = getClientData;
document.getElementById('clientID').focus();
}
window.onload = initFormEvents;
</script>
</head>
<body>
<form name="clientForm" action="rellena.html" method="post">
<fieldset>
<legend>Client information</legend>
<table>
<tr>
<td><label for="clientID">Client ID:</label></td>
<td><input name="clientID" id="clientID" size="5" maxlength="4"></td>
</tr>
<tr>
<td><label for="firstname">First name:</label></td>
<td><input name="firstname" id="firstname" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="lastname">Last name:</label></td>
<td><input name="lastname" id="lastname" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input name="address" id="address" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="zipCode">Zipcode:</label></td>
<td><input name="zipCode" id="zipCode" size="4" maxlength="5"></td>
</tr>
<tr>
<td><label for="city">City:</label></td>
<td><input name="city" id="city" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td><input name="country" id="country" size="20" maxlength="255"></td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
mi fichero de getClient.php
<?php
/* Replace the data in these two lines with data for your db connection */
$connection = mysql_connect("localhost","root","");
mysql_select_db("auto",$connection);
if(isset($_GET['getClientId'])){
$res = mysql_query("select * from ajax_client where clientID='".$_GET['getClientId']."'") or die(mysql_error());
if($inf = mysql_fetch_array($res)){
echo "formObj.firstname.value = '".$inf["firstname"]."';\n";
echo "formObj.lastname.value = '".$inf["lastname"]."';\n";
echo "formObj.address.value = '".$inf["address"]."';\n";
echo "formObj.zipCode.value = '".$inf["zipCode"]."';\n";
echo "formObj.city.value = '".$inf["city"]."';\n";
echo "formObj.country.value = '".$inf["country"]."';\n";
}else{
echo "formObj.firstname.value = '';\n";
echo "formObj.lastname.value = '';\n";
echo "formObj.address.value = '';\n";
echo "formObj.zipCode.value = '';\n";
echo "formObj.city.value = '';\n";
echo "formObj.country.value = '';\n";
}
}
?>
y mi fichero de ajax.js
function sack(file) {
this.xmlhttp = null;
this.resetData = function() {
this.method = "POST";
this.queryStringSeparator = "?";
this.argumentSeparator = "&";
this.URLString = "";
this.encodeURIString = true;
this.execute = false;
this.element = null;
this.elementObj = null;
this.requestFile = file;
this.vars = new Object();
this.responseStatus = new Array(2);
};
this.resetFunctions = function() {
this.onLoading = function() { };
this.onLoaded = function() { };
this.onInteractive = function() { };
this.onCompletion = function() { };
this.onError = function() { };
this.onFail = function() { };
};
this.reset = function() {
this.resetFunctions();
this.resetData();
};
this.createAJAX = function() {
try {
this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
this.xmlhttp = null;
}
}
if (! this.xmlhttp) {
if (typeof XMLHttpRequest != "undefined") {
this.xmlhttp = new XMLHttpRequest();
} else {
this.failed = true;
}
}
};
this.setVar = function(name, value){
this.vars[name] = Array(value, false);
};
this.encVar = function(name, value, returnvars) {
if (true == returnvars) {
return Array(encodeURIComponent(name), encodeURIComponent(value));
} else {
this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
}
}
this.processURLString = function(string, encode) {
encoded = encodeURIComponent(this.argumentSeparator);
regexp = new RegExp(this.argumentSeparator + "|" + encoded);
varArray = string.split(regexp);
for (i = 0; i < varArray.length; i++){
urlVars = varArray[i].split("=");
if (true == encode){
this.encVar(urlVars[0], urlVars[1]);
} else {
this.setVar(urlVars[0], urlVars[1]);
}
}
}
this.createURLString = function(urlstring) {
if (this.encodeURIString && this.URLString.length) {
this.processURLString(this.URLString, true);
}
if (urlstring) {
if (this.URLString.length) {
this.URLString += this.argumentSeparator + urlstring;
} else {
this.URLString = urlstring;
}
}
// prevents caching of URLString
this.setVar("rndval", new Date().getTime());
urlstringtemp = new Array();
for (key in this.vars) {
if (false == this.vars[key][1] && true == this.encodeURIString) {
encoded = this.encVar(key, this.vars[key][0], true);
delete this.vars[key];
this.vars[encoded[0]] = Array(encoded[1], true);
key = encoded[0];
}
urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
}
if (urlstring){
this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
} else {
this.URLString += urlstringtemp.join(this.argumentSeparator);
}
}
this.runResponse = function() {
eval(this.response);
}
this.runAJAX = function(urlstring) {
if (this.failed) {
this.onFail();
} else {
this.createURLString(urlstring);
if (this.element) {
this.elementObj = document.getElementById(this.element);
}
if (this.xmlhttp) {
var self = this;
if (this.method == "GET") {
totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
this.xmlhttp.open(this.method, totalurlstring, true);
} else {
this.xmlhttp.open(this.method, this.requestFile, true);
try {
this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
} catch (e) { }
}
this.xmlhttp.onreadystatechange = function() {
switch (self.xmlhttp.readyState) {
case 1:
self.onLoading();
break;
case 2:
self.onLoaded();
break;
case 3:
self.onInteractive();
break;
case 4:
self.response = self.xmlhttp.responseText;
self.responseXML = self.xmlhttp.responseXML;
self.responseStatus[0] = self.xmlhttp.status;
self.responseStatus[1] = self.xmlhttp.statusText;
if (self.execute) {
self.runResponse();
}
if (self.elementObj) {
elemNodeName = self.elementObj.nodeName;
elemNodeName.toLowerCase();
if (elemNodeName == "input"
|| elemNodeName == "select"
|| elemNodeName == "option"
|| elemNodeName == "textarea") {
self.elementObj.value = self.response;
} else {
self.elementObj.innerHTML = self.response;
}
}
if (self.responseStatus[0] == "200") {
self.onCompletion();
} else {
self.onError();
}
self.URLString = "";
break;
}
};
this.xmlhttp.send(this.URLString);
}
}
};
this.reset();
this.createAJAX();
}
aparte de mi primer error, el problema es que no me trae nada de la base de datos, no rrellena los demas inputs automaticamente