Foros del Web » Programando para Internet » Javascript »

no funciona los archivos de ajax

 Estas en el tema de no funciona los archivos de ajax en el foro de Javascript en Foros del Web. buenas a todos. tengo una duda espero que me la puedan aclarar. Tengo 2 archivos de listas desplegables de 3 niveles y 1 de 2 ...
  #1 (permalink)  
Antiguo 11/03/2012, 11:48
 
Fecha de Ingreso: febrero-2009
Mensajes: 61
Antigüedad: 15 años, 2 meses
Puntos: 1
no funciona los archivos de ajax
buenas a todos.

tengo una duda espero que me la puedan aclarar. Tengo 2 archivos de listas desplegables de 3 niveles y 1 de 2 niveles, cada uno de estos archivos tiene otros archivos(procesa y el archivo de ajax) sus datos se llenan de los datos de una base de datos, estos archivos individualmente funciona bien. Entonces puse en una archivo o pagina las 2 listas desplegables de 3 niveles y el 2 niveles, en ese mismo archivo inclui los tres archivos archivos de ajax y al ejecutar la pagina solo esta funcionando la ultima lista desplegable de 2 niveles, estuve haciendo algunas pruebas el primer archivo de ajax y funciona el primer select, quite el primer y ultimo archivo de ajax y me funciona el segundo select de 3 niveles.

entonces puse en un mismo archivo de ajax el contenido de los otros 2 archivos y tampoco funciona. les dejo el codigo que estoy utilizando.

prueba.php es el principal
select_dependientes_3_niveles_proceso.php--select_dependientes_3_niveles.js
extraproceso.php--extra.js
refproceso.php--ref.js

Código PHP:
<html>
<head>
<title>prueba de select dependientes</title>
</head>
<link href="estilo/fondo.css" rel="stylesheet" type="text/css" />
<link href="estilo/main.css" rel="stylesheet" type="text/css"/>
<script src="estilo/validacion_campo_vacio.js" type="text/javascript"></script>
<link href="estilo/Estilo_Error.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="select_dependientes_3_niveles.css">
<script type="text/javascript" src="select_dependientes_3_niveles.js"></script>
<script type="text/javascript" src="extra.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Registrar Cliente</title>
<style type="text/css">
<!--
.Estilo1 {color: #0066CC;
font-family: Papyrus;
}
.Estilo2 {font-family: Papyrus}
-->
</style>
<body>
<DIV class="TabbedPanelsContentGroup">
 <p>&nbsp;</p>
<table width="142%" border="0" align="center">
  <tr>
    <th background="images/cabezaven.gif"><p class="Estilo1"><font size="+2"><p>&nbsp;</p><font color=blue><p>&nbsp;</p></font></p><br/>
     </th>
  </tr>
</table>
<p>&nbsp;</p> 
<table width="88%" cellspacing="5" cellpadding="0"  align="center" bordercolor="#545454" border="3><center>
<tr>
  <th class="menumain"> 
  <th bgcolor="#8E2323"><font color="white"><center>Clave</font></center></th>
  <th bgcolor="#8E2323"><font color="white"><center>Tama&ntilde;o</font></center></th>
  <th bgcolor="#8E2323"><font color="white"><center>Precio</font></center></th>
  <th bgcolor="#8E2323"><font color="white"><center>Tipo Extra</font></center></th>
  <th bgcolor="#8E2323"><font color="white"><center>Opcion Extra</font></center></th>
  <th bgcolor="#8E2323"><font color="white"><center>Extra</font></center></th> 
  <th bgcolor="#8E2323"><font color="white"><center>Refresco</font></center></th>
  <th bgcolor="#8E2323"><font color="white"><center>Precio Refresco</font></center></th>
</tr>
<tr>
<th bgcolor="#E6E8FA"><label><?php
function generaSelect()
{
    include 'conexion.php';
    conectar();
    $consulta=mysql_query("SELECT id, opcion FROM select_1");
    desconectar();

    // Voy imprimiendo el primer select compuesto por los paises
    echo "<select name='select1' id='select1' onChange='cargaContenido(this.id)'>";
    echo "<option value='0'>Elige</option>";
    while($registro=mysql_fetch_row($consulta))
    {
        echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
    }
    echo "</select>";
}
?><?php generaSelect(); ?></label></th>
<th bgcolor="#E6E8FA"><label><select disabled="disabled" name="select2" id="select2">
                        <option value="0">Selecciona opci&oacute;n...</option>
                    </label></select></th>
<th bgcolor="#E6E8FA"><label><select disabled="disabled" name="select3" id="select3">
                        <option value="0">0</option>
                    </label></select></th>
    
<th bgcolor="#E6E8FA"><label><?php
function generaSelect2()
{
    mysql_connect("localhost", "root", "matrix");
    mysql_select_db("pizza");
    $consulta2=mysql_query("SELECT id, opcion FROM select_4");
    desconectar();

    // Voy imprimiendo el primer select compuesto por los paises
    echo "<select name='select4' id='select4' onChange='cargarcontenido(this.id)'>";
    echo "<option value='0'>Elige</option>";
    while($registro2=mysql_fetch_row($consulta2))
    {
        echo "<option value='".$registro2[0]."'>".$registro2[1]."</option>";
    }
    echo "</select>";
}
?><?php generaSelect2(); ?>
        </label></th>
<th bgcolor="#E6E8FA"><label><select disabled="disabled" name="select5" id="select5">
                        <option value="0">Selecciona opci&oacute;n...</option>
                    
    </label></select></th>
    <th bgcolor="#E6E8FA"><label><select disabled="disabled" name="select6" id="select6">
                        <option value="0">0</option>
                    
    </label></select></th>

<th bgcolor="#E6E8FA"><label><?php
function generaPaises()
{
    mysql_connect("localhost", "root", "matrix");
    mysql_select_db("pizza");
    $consulta3=mysql_query("SELECT id, opcion FROM select_7");
    desconectar();

    // Voy imprimiendo el primer select compuesto por los paises
    echo "<select name='select7' id='select7' onChange='cargaContenido(this.id)'>";
    echo "<option value='0'>Elige</option>";
    while($registro3=mysql_fetch_row($consulta3))
    {
        echo "<option value='".$registro3[0]."'>".$registro3[1]."</option>";
    }
    echo "</select>";
}
?><?php generaPaises(); ?>
</label></th>
<th bgcolor="#E6E8FA"><label><select disabled="disabled" name="select8" id="select8">
                        <option value="0">Selecciona opci&oacute;n...</option>
</label></select></th>
<p>
         <input type="submit" class="boot" name="guarda" value="GUARDAR VENTA" />
         <input name="limpiar" class="boot" type="reset" value=" LIMPIAR " />
       </p>
</center>
</form>
<center>
       
<p>
      <a href="realizarventa.php"><img src="images/back.png"> Ir Menu </a>
       </p>
       </center>
<p>&nbsp;</p>
</div>
</body>
</html>
  #2 (permalink)  
Antiguo 11/03/2012, 11:51
 
Fecha de Ingreso: febrero-2009
Mensajes: 61
Antigüedad: 15 años, 2 meses
Puntos: 1
Respuesta: no funciona los archivos de ajax
select_dependientes_3_niveles_proceso.php
Código PHP: 
Ver original
  1. <?php
  2. // Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
  3. $listadoSelects=array(
  4. "select1"=>"select_1",
  5. "select2"=>"select_2",
  6. "select3"=>"select_3"
  7. );
  8.  
  9. function validaSelect($selectDestino)
  10. {
  11.     // Se valida que el select enviado via GET exista
  12.     global $listadoSelects;
  13.     if(isset($listadoSelects[$selectDestino])) return true;
  14.     else return false;
  15. }
  16.  
  17. function validaOpcion($opcionSeleccionada)
  18. {
  19.     // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
  20.     if(is_numeric($opcionSeleccionada)) return true;
  21.     else return false;
  22. }
  23.  
  24. $selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];
  25.  
  26. if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
  27. {
  28.     $tabla=$listadoSelects[$selectDestino];
  29.     include 'conexion.php';
  30.     conectar();
  31.     $consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());
  32.     desconectar();
  33.     
  34.     // Comienzo a imprimir el select
  35.     echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
  36.     echo "<option value='0'>Elige</option>";
  37.     while($registro=mysql_fetch_row($consulta))
  38.     {
  39.         // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
  40.         $registro[1]=htmlentities($registro[1]);
  41.         // Imprimo las opciones del select
  42.         echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
  43.     }           
  44.     echo "</select>";
  45. }
  46. ?>

select_dependientes_3_niveles.js
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;
}

// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="select1";
listadoSelects[1]="select2";
listadoSelects[2]="select3";

function buscarEnArray(array, dato)
{
// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
var x=0;
while(array[x])
{
if(array[x]==dato) return x;
x++;
}
return null;
}

function cargaContenido(idSelectOrigen)
{
// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
var posicionSelectDestino=buscarEnArray(listadoSelects , idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrige n);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
if(opcionSeleccionada==0)
{
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelect s[x]);
selectActual.length=0;

var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opci&oacute;n...";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDest ino);
// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
var ajax=nuevoAjax();
ajax.open("GET", "select_dependientes_3_niveles_proceso.php?select= "+idSelectDestino+"&opcion="+opcionSeleccionad a, 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;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseTe xt;
}
}
ajax.send(null);
}
}
  #3 (permalink)  
Antiguo 11/03/2012, 11:57
 
Fecha de Ingreso: febrero-2009
Mensajes: 61
Antigüedad: 15 años, 2 meses
Puntos: 1
Respuesta: no funciona los archivos de ajax
select_dependientes_3_niveles_proceso.php
Código PHP: 
Ver original
  1. <?php
  2. // Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
  3. $listadoSelects=array(
  4. "select1"=>"select_1",
  5. "select2"=>"select_2",
  6. "select3"=>"select_3"
  7. );
  8.  
  9. function validaSelect($selectDestino)
  10. {
  11.     // Se valida que el select enviado via GET exista
  12.     global $listadoSelects;
  13.     if(isset($listadoSelects[$selectDestino])) return true;
  14.     else return false;
  15. }
  16.  
  17. function validaOpcion($opcionSeleccionada)
  18. {
  19.     // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
  20.     if(is_numeric($opcionSeleccionada)) return true;
  21.     else return false;
  22. }
  23.  
  24. $selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];
  25.  
  26. if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
  27. {
  28.     $tabla=$listadoSelects[$selectDestino];
  29.     include 'conexion.php';
  30.     conectar();
  31.     $consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());
  32.     desconectar();
  33.     
  34.     // Comienzo a imprimir el select
  35.     echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
  36.     echo "<option value='0'>Elige</option>";
  37.     while($registro=mysql_fetch_row($consulta))
  38.     {
  39.         // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
  40.         $registro[1]=htmlentities($registro[1]);
  41.         // Imprimo las opciones del select
  42.         echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
  43.     }           
  44.     echo "</select>";
  45. }
  46. ?>

select_dependientes_3_niveles.js
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;
}

// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="select1";
listadoSelects[1]="select2";
listadoSelects[2]="select3";

function buscarEnArray(array, dato)
{
// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
var x=0;
while(array[x])
{
if(array[x]==dato) return x;
x++;
}
return null;
}

function cargaContenido(idSelectOrigen)
{
// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
var posicionSelectDestino=buscarEnArray(listadoSelects , idSelectOrigen)+1;
// Obtengo el select que el usuario modifico
var selectOrigen=document.getElementById(idSelectOrige n);
// Obtengo la opcion que el usuario selecciono
var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
if(opcionSeleccionada==0)
{
var x=posicionSelectDestino, selectActual=null;
// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
while(listadoSelects[x])
{
selectActual=document.getElementById(listadoSelect s[x]);
selectActual.length=0;

var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opci&oacute;n...";
selectActual.appendChild(nuevaOpcion); selectActual.disabled=true;
x++;
}
}
// Compruebo que el select modificado no sea el ultimo de la cadena
else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
{
// Obtengo el elemento del select que debo cargar
var idSelectDestino=listadoSelects[posicionSelectDestino];
var selectDestino=document.getElementById(idSelectDest ino);
// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
var ajax=nuevoAjax();
ajax.open("GET", "select_dependientes_3_niveles_proceso.php?select= "+idSelectDestino+"&opcion="+opcionSeleccionad a, 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;
}
if (ajax.readyState==4)
{
selectDestino.parentNode.innerHTML=ajax.responseTe xt;
}
}
ajax.send(null);
}
}
  #4 (permalink)  
Antiguo 11/03/2012, 12:02
 
Fecha de Ingreso: febrero-2009
Mensajes: 61
Antigüedad: 15 años, 2 meses
Puntos: 1
Respuesta: no funciona los archivos de ajax
extraproceso.php

Código PHP: 
Ver original
  1. <?php
  2. // Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
  3. $listadoSelects=array(
  4. "select4"=>"select_4",
  5. "select5"=>"select_5",
  6. "select6"=>"select_6"
  7. );
  8.  
  9. function validasel($selectDestino)
  10. {
  11.     // Se valida que el select enviado via GET exista
  12.     global $listadoSelects;
  13.     if(isset($listadoSelects[$selectDestino])) return true;
  14.     else return false;
  15. }
  16.  
  17. function validaop($opcionSeleccionada)
  18. {
  19.     // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
  20.     if(is_numeric($opcionSeleccionada)) return true;
  21.     else return false;
  22. }
  23.  
  24. $selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];
  25.  
  26. if(validasel($selectDestino) && validaop($opcionSeleccionada))
  27. {
  28.     $tabla=$listadoSelects[$selectDestino];
  29.     include 'conexion.php';
  30.     conectar();
  31.     $consulta2=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());
  32.     desconectar();
  33.     
  34.     // Comienzo a imprimir el select
  35.     echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargarcontenido(this.id)'>";
  36.     echo "<option value='0'>Elige</option>";
  37.     while($registro2=mysql_fetch_row($consulta2))
  38.     {
  39.         // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
  40.         $registro2[1]=htmlentities($registro2[1]);
  41.         // Imprimo las opciones del select
  42.         echo "<option value='".$registro2[0]."'>".$registro2[1]."</option>";
  43.     }           
  44.     echo "</select>";
  45. }
  46. ?>

extra.js

Código Javascript: 
Ver original
  1. function nuevoAjax()
  2. { 
  3.     /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
  4.     lo que se puede copiar tal como esta aqui */
  5.     var xmlhttp=false;
  6.     try
  7.     {
  8.         // Creacion del objeto AJAX para navegadores no IE
  9.         xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  10.     }
  11.     catch(e)
  12.     {
  13.         try
  14.         {
  15.             // Creacion del objet AJAX para IE
  16.             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  17.         }
  18.         catch(E)
  19.         {
  20.             if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
  21.         }
  22.     }
  23.     return xmlhttp; 
  24. }
  25.  
  26. // Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
  27. var listadoSelects=new Array();
  28. listadoSelects[0]="select4";
  29. listadoSelects[1]="select5";
  30. listadoSelects[2]="select6";
  31.  
  32. function buscarEnArray(array, dato)
  33. {
  34.     // Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
  35.     var x=0;
  36.     while(array[x])
  37.     {
  38.         if(array[x]==dato) return x;
  39.         x++;
  40.     }
  41.     return null;
  42. }
  43.  
  44. function cargarcontenido(idSelectOrigen)
  45. {
  46.     // Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
  47.     var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
  48.     // Obtengo el select que el usuario modifico
  49.     var selectOrigen=document.getElementById(idSelectOrigen);
  50.     // Obtengo la opcion que el usuario selecciono
  51.     var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
  52.     // Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
  53.     if(opcionSeleccionada==0)
  54.     {
  55.         var x=posicionSelectDestino, selectActual=null;
  56.         // Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
  57.         while(listadoSelects[x])
  58.         {
  59.             selectActual=document.getElementById(listadoSelects[x]);
  60.             selectActual.length=0;
  61.             
  62.             var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opci&oacute;n...";
  63.             selectActual.appendChild(nuevaOpcion);  selectActual.disabled=true;
  64.             x++;
  65.         }
  66.     }
  67.     // Compruebo que el select modificado no sea el ultimo de la cadena
  68.     else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
  69.     {
  70.         // Obtengo el elemento del select que debo cargar
  71.         var idSelectDestino=listadoSelects[posicionSelectDestino];
  72.         var selectDestino=document.getElementById(idSelectDestino);
  73.         // Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
  74.         var ajax=nuevoAjax();
  75.         ajax.open("GET", "extraproceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
  76.         ajax.onreadystatechange=function() 
  77.         { 
  78.             if (ajax.readyState==1)
  79.             {
  80.                 // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
  81.                 selectDestino.length=0;
  82.                 var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
  83.                 selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;    
  84.             }
  85.             if (ajax.readyState==4)
  86.             {
  87.                 selectDestino.parentNode.innerHTML=ajax.responseText;
  88.             } 
  89.         }
  90.         ajax.send(null);
  91.     }
  92. }
  #5 (permalink)  
Antiguo 11/03/2012, 12:05
 
Fecha de Ingreso: febrero-2009
Mensajes: 61
Antigüedad: 15 años, 2 meses
Puntos: 1
Respuesta: no funciona los archivos de ajax
refproceso.php
Código PHP: 
Ver original
  1. <?php
  2. // Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
  3. $listadoSelects=array(
  4. "select7"=>"select_7",
  5. "select8"=>"select_8"
  6. );
  7.  
  8. function validaSelect($selectDestino)
  9. {
  10.     // Se valida que el select enviado via GET exista
  11.     global $listadoSelects;
  12.     if(isset($listadoSelects[$selectDestino])) return true;
  13.     else return false;
  14. }
  15.  
  16. function validaOpcion($opcionSeleccionada)
  17. {
  18.     // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
  19.     if(is_numeric($opcionSeleccionada)) return true;
  20.     else return false;
  21. }
  22.  
  23. $selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];
  24.  
  25. if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
  26. {
  27.     $tabla=$listadoSelects[$selectDestino];
  28.     include 'conexion.php';
  29.     conectar();
  30.     $consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());
  31.     desconectar();
  32.     
  33.     // Comienzo a imprimir el select
  34.     echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
  35.     echo "<option value='0'>Elige</option>";
  36.     while($registro=mysql_fetch_row($consulta))
  37.     {
  38.         // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
  39.         $registro[1]=htmlentities($registro[1]);
  40.         // Imprimo las opciones del select
  41.         echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
  42.     }           
  43.     echo "</select>";
  44. }
  45. ?>

ref.js

Código Javascript: 
Ver original
  1. function nuevoAjax()
  2. { 
  3.     /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
  4.     lo que se puede copiar tal como esta aqui */
  5.     var xmlhttp=false;
  6.     try
  7.     {
  8.         // Creacion del objeto AJAX para navegadores no IE
  9.         xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  10.     }
  11.     catch(e)
  12.     {
  13.         try
  14.         {
  15.             // Creacion del objet AJAX para IE
  16.             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  17.         }
  18.         catch(E)
  19.         {
  20.             if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
  21.         }
  22.     }
  23.     return xmlhttp; 
  24. }
  25.  
  26. // Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
  27. var listadoSelects=new Array();
  28. listadoSelects[0]="select7";
  29. listadoSelects[1]="select8";
  30.  
  31. function buscarEnArray(array, dato)
  32. {
  33.     // Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
  34.     var x=0;
  35.     while(array[x])
  36.     {
  37.         if(array[x]==dato) return x;
  38.         x++;
  39.     }
  40.     return null;
  41. }
  42.  
  43. function cargaContenido(idSelectOrigen)
  44. {
  45.     // Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
  46.     var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
  47.     // Obtengo el select que el usuario modifico
  48.     var selectOrigen=document.getElementById(idSelectOrigen);
  49.     // Obtengo la opcion que el usuario selecciono
  50.     var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
  51.     // Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
  52.     if(opcionSeleccionada==0)
  53.     {
  54.         var x=posicionSelectDestino, selectActual=null;
  55.         // Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
  56.         while(listadoSelects[x])
  57.         {
  58.             selectActual=document.getElementById(listadoSelects[x]);
  59.             selectActual.length=0;
  60.             
  61.             var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opci&oacute;n...";
  62.             selectActual.appendChild(nuevaOpcion);  selectActual.disabled=true;
  63.             x++;
  64.         }
  65.     }
  66.     // Compruebo que el select modificado no sea el ultimo de la cadena
  67.     else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
  68.     {
  69.         // Obtengo el elemento del select que debo cargar
  70.         var idSelectDestino=listadoSelects[posicionSelectDestino];
  71.         var selectDestino=document.getElementById(idSelectDestino);
  72.         // Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
  73.         var ajax=nuevoAjax();
  74.         ajax.open("GET", "refproceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
  75.         ajax.onreadystatechange=function() 
  76.         { 
  77.             if (ajax.readyState==1)
  78.             {
  79.                 // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
  80.                 selectDestino.length=0;
  81.                 var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
  82.                 selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;    
  83.             }
  84.             if (ajax.readyState==4)
  85.             {
  86.                 selectDestino.parentNode.innerHTML=ajax.responseText;
  87.             } 
  88.         }
  89.         ajax.send(null);
  90.     }
  91. }

estos son todos los archivos que utilizo para todos los select de 3 niveles y de 2 niveles.
ojala si me pueden orientar, saludos.

Etiquetas: ajax, funcion, html, input, js, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:59.