Ayuda con buscador en ajax

Lizy94 · #1 (**permalink**) 27/01/2010, 13:05

Hola foro que tal, tengo este problema quiero realizar una búsqueda de colonias correspondientes a un codigo postal , el codigo postal lo introduzco en mi campo de texto, y las colonias las muestro en una lista con javascript y ajax,este es el código

código del js

Código PHP:

   
function codigoPostal() 
{ 
    // Obtengo el codigo postal 
    var CodigoPostal = document.getElementById("txtCodigoPostal").value; 
    var iCodigoPostal = CodigoPostal.value; 
     
    var idSelectDestino="selColonia"; 
    var selectDestino=document.getElementById(idSelectDestino); 
    var divSelectDestino=document.getElementById("divColonias"); 
     
    var botonBuscar=document.getElementById("btnBuscarColonia"); 
     
    var ajax=nuevoAjax(); 
     ajax.open("GET", "GeneraColonias.php?cp="+iCodigoPostal, true); 
     ajax.onreadystatechange=function() 
     { 
      
    if (ajax.readyState==1) 
         { 
     // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..." 
         /*selectDestino.length=0; 
         var nuevaOpcion=document.createElement("option"); 
         nuevaOpcion.value=0; 
         nuevaOpcion.innerHTML="Cargando..."; 
         selectDestino.appendChild(nuevaOpcion); 
         selectDestino.disabled=true; 
         botonBuscar.disabled=true;*/ 
         
         
         } 
  
     if (ajax.readyState==4) 
     { 
         //botonBuscar.disabled=false; 
         //$("divOtraCd").style.display = 'none'; 
      // if($("txtEstado") != null) document.getElementById("txtEstado").value = ''; 
       //else $("cboEdo").value = 0; 
         
        //if($("txtMunicipio") != null) document.getElementById("txtMunicipio").value = ''; 
         //else $("cboMunicipio").value = 0; 
 
        //if($("txtCiudad") != null) document.getElementById("txtCiudad").value = ''; 
        //else $("cboCiudad").value = 0; 
 
        //$("divColoniaTxt").style.display = 'none'; 
        //divSelectDestino.style.display = 'block'; 
        divSelectDestino.innerHTML=ajax.responseText; 
        //selectDestino.parentNode.innerHTML=ajax.responseText; 
 } 
 } 
 ajax.send(null); 
     
}

y los php

donde muestro los datos

Código PHP:

   
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title></title> 
<link rel="stylesheet" type="text/css" href="select_dependientes.css"> 
<script type="text/javascript" src="GeneraColonias.js"></script> 
</head> 
<body> 
 
<form name="form1" method="post" action=""> 
  <p> 
    <input type="text" name="txtCodigoPostal" id="txtCodigoPostal"> 
    <input type="button" name="btnBuscarColonia" id="btnBuscarColonia" value="Buscar Colonia" onclick="codigoPostal();"> 
  <div id="divColonias">  
   <select name="selColonia" id="selColonia"> 
       <option value="-1" selected="selected">Seleccione una colonia</option> 
    </select> 
   </div> 
  </p> 
  <p>&nbsp;</p> 
</form> 
</body> 
</html>

donde realizo mi consulta

Código PHP:

  
<?php 
include 'conexion1.php'; 
include 'GeneraColoniasForm.php'; 
 
$cp=$_GET['codigoPostal']; 
$txtCodigoPostal=$_GET['txtCodigoPostal']; 
 
 
 
      // $valorSeleccionado=mssql_query("SELECT asentamientoNombre FROM Asentamiento  WHERE MATCH(codigoPostal) AGAINST('txtCodigoPostal')";//ciudadID,ciudad  
    //$valorSeleccionado=mssql_query("SELECT asentamientoNombre FROM Asentamiento WHERE codigoPostal LIKE '%$txtCodigoPostal%' ");//ciudadID,ciudad  
     $valorSeleccionado=mssql_query("SELECT asentamientoNombre FROM Asentamiento  WHERE codigoPostal LIKE '$cp'"); 
 
 
  while($registro=mssql_fetch_row($valorSeleccionado)) 
    { 
        // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion 
        $registro[1]=htmlentities($registro[1]); 
        // Imprimo las opciones del select 
        echo "<option value='".$registro[0]."'>".$registro[1]."</option>"; 
    }             
 
 echo "</select>"; 
 
?>

pero lo que realiza es que cuando introduzco mi codigo postal y doy clic en el boton me cre otro campo de texto y aun no me aparecen las colonias, Gracias

ginitofl · #2 (**permalink**) 27/01/2010, 17:23

Hola como vas? bueno modifique un poco tu codigo y quedo de esta manera:

el formulario.php:

Código PHP:

  <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<link rel="stylesheet" type="text/css" href="select_dependientes.css">
<script type="text/javascript" src="GeneraColonias.js"></script>
</head>
<body>

<form name="form1" method="post" action="">
    <input type="text" name="txtCodigoPostal" id="txtCodigoPostal">
    <input type="button" name="btnBuscarColonia" id="btnBuscarColonia" value="Buscar Colonia" onClick="codigoPostal();">
      <div id="divColonias"> 
       <select name="selColonia" id="selColonia">
       <option value="-1" selected="selected">Seleccione una colonia</option>
    </select>
   </div>
</form>
</body>
</html>

el GeneraColonias.js:

Código PHP:

  function objetoAjax(){
    var xmlhttp=false;
    try{
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch (e){
        try{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (E){
            xmlhttp = false;
        }
    }
    
    if (!xmlhttp && typeof XMLHttpRequest!='undefined'){
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function codigoPostal(){
    divResultado  = document.getElementById('divColonias');
    txtCodigoPostal = document.getElementById('txtCodigoPostal').value; //region
    
    //referencia el objeto ajax, damos el metodo del objeto y el archivo
    ajax = objetoAjax();
    ajax.open("POST", "GeneraColonias.php", true);
    
    ajax.onreadystatechange = function(){
        if (ajax.readyState==4){
            divResultado.innerHTML = ajax.responseText
        }
    }
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //enviamos el valor correspondiente al archivo anteriormente referenciado
    ajax.send("txtCodigoPostal="+txtCodigoPostal)
}

y el GeneraColonias.php:

Código PHP:

  <?php
include("conexion.php");

$txtCodigoPostal=$_REQUEST['txtCodigoPostal'];

$sql = mysql_query("SELECT * FROM Asentamiento WHERE codigoPostal LIKE  '$txtCodigoPostal%' order by asentamientoNombre",$cn);
?> 
<select name="selColonia" id="selColonia">

<option value="-1" selected="selected">Seleccione una colonia</option>
<?php 
                while ($damefila=mysql_fetch_array($sql))
                {
                ?>
                <option value="<?php echo $damefila['id_asentamiento']; ?>"><?php echo htmlentities (trim($damefila['asentamientoNombre'])); ?></option>
                <?php }?>
</select>

Cualquier duda solo postea.

Saludos y espero te ayude en algo.

Atte.

GinoFL

Lizy94 · #3 (**permalink**) 28/01/2010, 10:31

pues despues de varios intentos no me ha salido, me base en tu codigo para realizar la consulta pero = no me realizaba la consulta, ya lo he checado varias veces y no le veo por donde podría estar mal, aqui te pogo el código por si me pudieses ayudar, gracias

archivo js

Código PHP:

  function nuevoAjax() 
{  
    /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por 
    lo que se puede copiar tal como esta aqui */ 
    var xmlhttp=false; 
    try 
    { 
        // Creacion del objeto AJAX para navegadores no IE 
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
    } 
    catch(e) 
    { 
        try 
        { 
            // Creacion del objet AJAX para IE 
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        catch(E) 
        { 
            if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest(); 
        } 
    } 
    return xmlhttp;  
} 
    // Obtengo el codigo postal 
    /*var CodigoPostal = document.getElementById("txtCodigoPostal").value; 
    var iCodigoPostal = CodigoPostal.value; 
     
    var idSelectDestino="selColonia"; 
    var selectDestino=document.getElementById(idSelectDestino); 
    var divSelectDestino=document.getElementById("divColonias"); 
    var divSelectDestino2=document.getElementById("selColonia"); 
     
    var botonBuscar=document.getElementById("btnBuscarColonia"); 
     
    var ajax=nuevoAjax(); 
    // ajax.open("GET", "GeneraColonias.php?cp="+iCodigoPostal, true); 
     ajax.open("GET", "GeneraColonias.php", true); 
     ajax.onreadystatechange=function() 
     {*/ 
function codigoPostal() 
{ 
 // Obtengo el codigo postal 
    var CodigoPostal = document.getElementById("txtCodigoPostal").value; 
         
    //Botn del submit 
    var botonBuscar=document.getElementById("btnBuscarColonia"); 
     
    //selecciono el select donde va a estar mi lista 
    //var idSelectDestino="selColonia"; 
    var selectDestino=document.getElementById("selColonia"); 
     
    //Obtengo el id del div 
    var divSelect = document.getElementById("divColonias"); 
   /* var divSelectDestino=document.getElementById("divColonias"); 
    var divSelectDestino2=document.getElementById("selColonia");*/ 
     
    var ajax=nuevoAjax(); 
    // ajax.open("GET", "GeneraColonias.php?cp="+iCodigoPostal, true); 
     ajax.open("GET", "GeneraColonias.php", true); 
     ajax.onreadystatechange=function()//onreadystatechange asigna la función que se ejecutará cada vez que readyState cambie de valor. 
    { 
         if (ajax.readyState==4) 
         { 
          
            divSelect.innerHTML = ajax.responseText; 
            //selectDestino.parentNode.innerHTML=ajax.responseText; 
         } 
     } 
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
     ajax.send("cp="+CodigoPostal); 
     
}

archivo.php

Código PHP:

  
<?php 
include 'conexion1.php'; 
//include 'GeneraColoniasForm.php'; 
 
$cp=$_GET['codigoPostal']; 
$txtCodigoPostal=$_GET['txtCodigoPostal']; 
 
 
     $valorSeleccionado=mssql_query("SELECT asentamientoNombre FROM asentamiento WHERE codigoPostal LIKE '$txtCodigoPostal'"); 
 
    echo "<select name='selColonia' id='selColonia'>"; 
    echo "<option value='0'>Seleccione una colonia</option>"; 
 
  while($registro=mssql_fetch_row($valorSeleccionado)) 
    { 
        // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion  $registro[1]=htmlentities($registro[1]); 
        // Imprimo las opciones del select  echo "<option value='".$registro['asentamientoNombre']."'</option>"; 
         
        echo '<option value='.$registro[0].'>'.$registro['asentamientoNombre'].'</option>'; 
        //echo '<td>'.$row["nombre"].'</td>';...  
         
    }     
 
    echo "</select>"; 
?> 
         
 
<?php

ginitofl · #4 (**permalink**) 28/01/2010, 19:04

Hola Lizy usa el js que te envie, en el que tu haces estas pasando por metodo GET y esta mal lo que estas haciendo ademas estas enviando la variale "cp=+CodigoPostal" y en tu archivo php esta recibiendo de esta manera: $cp=$_GET['codigoPostal']; es al reves. si gustas agregame al msn que esta en mi perfil, la solucion ya te la di.

Saludos.

Lizy94 · #5 (**permalink**) 29/01/2010, 02:02

disculpa tanta pregunta soy nueva en esto de ajax y tengo conocimientos básicos de php,el código q me pasaste traba mi navegador nose si sea por mi servidor o que y casi deje = el código que me diste excepto en la parte del fetch array, le modifique un poco q creo eso era lo que traba mi navegador, y ahora si me muestra mis colonias solo que muestra todas parece que no lee el operador LIKE y con respecto a "cp=+CodigoPostal aún no acabo de entender bien en ajax en la parte de send("como saber que va aqui"=txtCodigoPostal), pero lo he probado con los dos cp y txtCodigopostal, aunque me da el mismo resultado

asi quedó mi código

Código PHP:

  <?php 
include 'conexion1.php'; 
 
$cp=$_GET['codigoPostal']; 
$txtCodigoPostal=$_REQUEST['txtCodigoPostal']; 
$prueba='42083'; 
     //$valorSeleccionado=mssql_query("SELECT asentamientoNombre FROM asentamiento WHERE codigoPostal LIKE  '%".txtCodigoPostal."%'  %$txtCodigoPostal'"  '%"+txtCodigoPostal+"%'); 
     $resultado=mssql_query("SELECT asentamientoNombre FROM asentamiento WHERE codigoPostal LIKE '%".$txtCodigoPostal."%'"); 
     
    ?> 
    <select name="selColonia" id="selColonia" option="codigoPostal"> 
    <option value="0">Seleccione una colonia</option> 
  
 <?php while($registro=mssql_fetch_array($resultado)) 
  
    {        // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion  $registro[1]=htmlentities($registro[1]);echo '<option value="'.$registro['codigoPostal'].'" > '.$registro['asentamientoNombre'].'</option>'; 
    echo '<option value="'.$registro['codigoPostal'].'" > '.$registro['asentamientoNombre'].'</option>'; 
    }; 
      ?> 
 </select>

preguntando en el el foro de php me dijeron que me hacia falta obtener mi valor concatenando por eso lo puse así, si lo dejaba como me dijiste seguia sin aparecerme las colonias

Código PHP:

   $resultado=mssql_query("SELECT asentamientoNombre FROM asentamiento WHERE codigoPostal LIKE '%".$txtCodigoPostal."%'");

y en lo que se refiere al js, ya lo tengo asi en la parte del send

Código PHP:

  ajax.send("txtCodigoPostal="+txtCodigoPostal);

pero como te digo ahora me muestra todas las colonias, Gracias por la atención

Lizy94 · #6 (**permalink**) 29/01/2010, 14:26

perdon por tanta pregunta, ya he estado viendo unos errores que tenia, pero en esta pte de tu código no le entiendo bn

$sql = mysql_query("SELECT * FROM Asentamiento WHERE codigoPostal LIKE '$txtCodigoPostal%' order by asentamientoNombre",$cn);

la variable $cn supongo que es como el enlace, pero $cn que contiene???, gracias

ginitofl · #7 (**permalink**) 30/01/2010, 09:07

Hola Lizy

$cn es la variable de conexion, yo en este caso me conecto con Mysql de esta manera:

Código PHP:

  $cn=mysql_connect("localhost","root","tupassword"); 
mysql_select_db("basededatos");

al cual guardo en el archivo conexion.php

y lo llamo de esta manera:

Código PHP:

  include("conexion.php");

Atte.

GinoFL