0

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

  • Entiendo que la función getClientData() (que está en rellena.html) basa la consulta ajax en el contenido del campo que tiene el id "clientId". En el mismo rellena.html tienes un input text con ese id pero sin valor. Si no tiene valor, es lógico que al hacer la consulta no traiga nada de la base de datos. – javiertapia Jul 26 '17 at 17:58
  • Una sugerencia: solo muestra la parte necesaria del codigo para que se nos haga mas fácil analizarlo. No todo el mundo tiene el tiempo de leer todo ese codigo. – Einer Jul 26 '17 at 18:04
  • el primer error deberia solucionarse con esto [ ] luego de [ ] – Kevin Jul 26 '17 at 18:04
  • y para el segundo te falta un ciclo para imprimir el resultado de la consulta en el caso de que traiga mas de 1 fila – Kevin Jul 26 '17 at 18:06
  • @Kevin pero el php es quien hace esa funcion ¿no? al momento en que se ingrese un id en el input, hace la llamada y consulta a la base de datos y los imprime – Cesar Gutierrez Davalos Jul 26 '17 at 18:13
  • Si a imprimir te refieres el siclo es solo para recorrer el arreglo generado en la consulta sql – Kevin Jul 26 '17 at 18:18
  • me podrias orientar un poco mas por favor? – Cesar Gutierrez Davalos Jul 26 '17 at 18:21
  • Pregunta, ya probaste el archivo getClient.php, para ver si trae información? – Andrés Jul 28 '17 at 16:39
  • @Andrés si, pero mira, esta mejor en esta explicacion https://es.stackoverflow.com/questions/91211/mostrar-resultado-en-inputs-con-b%c3%basqueda-sql?noredirect=1#comment167943_91211 – Cesar Gutierrez Davalos Jul 28 '17 at 16:40

1 Answers1

0

Para recorrer el arreglo de la consulta puedes hacer lo siguiente:

if(isset($_POST['getClientId'])){  
  $res = mysql_query("select * from ajax_client where clientID='".$_POST['getClientId']."'") or die(mysql_error());
   while($row = 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"; 
   }
 }

de esta forma si la consulta trae mas de una fila las podrás imprimir. espero que te sirva saludos.

Kevin
  • 707
  • 9
  • 22