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

9
  • 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. Commented el 26 jul. 2017 a las 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
    Commented el 26 jul. 2017 a las 18:04
  • el primer error deberia solucionarse con esto [ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ] luego de [ <head> ]
    – Kevin
    Commented el 26 jul. 2017 a las 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
    Commented el 26 jul. 2017 a las 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 Commented el 26 jul. 2017 a las 18:13

1 respuesta 1

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.

7
  • he hecho lo que me indicaste pero sigue sin traerme informacion de hecho entro a getClient.php y hago un var_dump del query y no me trae nada Commented el 27 jul. 2017 a las 2:41
  • edité mi respuesta no habia visto que el formulario lo envias por post, y como recibes los valores por get siempre estan vacios
    – Kevin
    Commented el 27 jul. 2017 a las 12:47
  • por alguna razon no me funciona, ni siquiera me muestra en el var_dump la conexion Commented el 27 jul. 2017 a las 15:24
  • con que versión de de php estas trabajando?
    – Kevin
    Commented el 27 jul. 2017 a las 15:53
  • estoy trabajando con php 7 de hecho he cambiado la conexion a PDO Commented el 27 jul. 2017 a las 17:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.