Problema con 4 combox dependientes porajax

plasma_go · #1 (**permalink**) 31/07/2014, 11:46

Buenas tardes estoy haciendo una aplicacion y voy a ocupar 4 combos, la manera que la estoy implementando es la siguiente:

Tengo un ajax, donde mando a llamar el archivo que lo genera.
Cada combo tiene su propio archivo que lo genera, y sobre ese mismo combo llamo al otro que le sigue.

Todo va bien, cada combo, que esta en archivos separados, funciona mostrando su sucesor.

Pero cuando quiero unirlos,es decir juntar el a todos en un archivo, el primer combo manda al segundo, pero cuando seleciono el segundo, no aparece el combo que sige.

Supongo que estoy implementando mal, alguna sugerencia??

Alexis88 · #2 (**permalink**) 31/07/2014, 11:57

Muéstranos el código que has elaborado para ayudarte. No olvides usar el highlight respectivo.

Saludos

plasma_go · #3 (**permalink**) 31/07/2014, 12:10

Este es el archivo principal donde quiero que se muestre mis combos, el archivo se encuentra raiz

Código ASP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<script language="JavaScript" type="text/javascript" src="funciones/ajax.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<form id="form" name="form" method="post" action="funciones/login.asp">
<table width="100%" border="1">
  <tr>
    <td width="33%"><img src="imagenes/logocfe.jp.jpg" width="284" height="136" /></td>
    <td width="33%" align="center">CONFIGURACION MATRIX</td>
    <td width="33%">&nbsp;</td>
  </tr>
  <tr height="65">
    <td>
    <%
         conn_string = "Driver={MySQL ODBC 5.1 Driver};Server=localhost;Port=3306;Database=agenda_matrix;Uid=root;Pwd=123456"   
        Set conn = Server.CreateObject("ADODB.Connection")
        conn.Open (conn_string)      
         sqlString = "select idcatmatrix, idcatagencia from catmatrix where uso = '1'"
         Set RSC = conn.Execute(sqlString)
         rsc.MoveFirst()
         Response.Write("Id del matrix en uso: " & rsc("idcatmatrix") & "<br>de la agencia: " & rsc("idcatagencia"))
    %>
    </td>
    <td width="33%">&nbsp;</td>
    <td width="33%">&nbsp; </td>
  </tr>
  <tr>
    <td width="33%">Cambiar a:</td>
    <td width="33%">&nbsp;</td>
    <td width="33%">&nbsp;</td>
  </tr>
  <tr>
    <td width="25%">
    <select id="catdivision" onchange="clic()">  
<%
conn_string = "Driver={MySQL ODBC 5.1 Driver};Server=localhost;Port=3306;Database=agenda_matrix;Uid=root;Pwd=123456"    
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open (conn_string)      
sqlString = "select idcatdivision, division from catdivision"
Set RSC = conn.Execute(sqlString)
while (not rsc.EOF)
    response.write("<option value=" & rsc("idcatdivision") & ">" & rsc("idcatdivision") & " - " & rsc("division") & "</option>")        
    rsc.MoveNext()
wend
conn.close
set conn = nothing
%>
</select>
<div id="resultado"></div>
<div id="resultado1"></div>
    </td>
    <td width="25%"></td>
    <td width="25%"></td>
    <td width="25%"></td>            
  </tr>
</table>
</form>
<script>
function clic(){
    var division = document.getElementById("catdivision").value;
    MostrarConsulta('formularios/zona.asp?division=' + division);
}
</script>
<p>&nbsp;</p>
</body>
</html>

Este es el ajax, se encuentra en carpeta funciones/ajax.asp

Código Javascript:

Ver original$.ajaxSetup({cache: false});
function nuevoAjax()
{
    var xmlhttp=false;
    try 
    {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch (e) 
    {
        try 
        {   
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (E)
        {
            try
            {
                xmlhtp = new XDomainRequest();
            }
            catch (E)
            {
                xmlhttp = false;
            }
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
    {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
function MostrarConsulta(datos){
    var divResultado;
    divResultado = document.getElementById('resultado');
    ajax=nuevoAjax();
    ajax.open("POST",datos);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            divResultado.innerHTML = ajax.responseText
        }
    }
    ajax.send(null)
}   
 
function MostrarConsulta1(datos){
    var divResultado;
    divResultado = document.getElementById('resultado1');
    ajax=nuevoAjax();
    ajax.open("POST",datos);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            divResultado.innerHTML = ajax.responseText
        }
    }
    ajax.send(null)
}
function MostrarConsulta2(datos){
    var divResultado;
    divResultado = document.getElementById('resultado2');
    ajax=nuevoAjax();
    ajax.open("POST",datos);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            divResultado.innerHTML = ajax.responseText
        }
    }
    ajax.send(null)
}

Este es el 2 segundo combo, se encuentra de la carpeta raiz, formularios/zona.asp

Código ASP:

Ver original<script language="JavaScript" type="text/javascript" src="../funciones/ajax.js"></script> 
<form name="" method="post">
<select id="catzona" onchange="clic()">  
<%
Dim division
division = request.Querystring("division")
conn_string = "Driver={MySQL ODBC 5.1 Driver};Server=localhost;Port=3306;Database=agenda_matrix;Uid=root;Pwd=123456"    
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open (conn_string)      
sqlString = "select idcatzona, zona, idcatdivision from catzona where idcatdivision = '" & division & "'"
Set RSC = conn.Execute(sqlString)
while (not rsc.EOF)
    response.write("<option value=" & rsc("idcatzona") & ">" & rsc("idcatzona") & " - " & rsc("zona") & "</option>")        
    rsc.MoveNext()
wend
conn.close
set conn = nothing
%>
</select>
<div id="resultado1"></div>
</form>
<script>
function clic(){
    
    var zona = document.getElementById("catzona").value;
    MostrarConsulta1('../formularios/agencia.asp?zona=' + zona);
}
</script>

Este es el 3 combo, se ubica de raiz, carpeta formularios/agencia.asp

Código ASP:

Ver original<script language="JavaScript" type="text/javascript" src="../funciones/ajax.js"></script> 
<form name="" method="post">
<select id="catagencia" onchange="clic()">  
<%
Dim zona
zona = request.Querystring("zona")
conn_string = "Driver={MySQL ODBC 5.1 Driver};Server=localhost;Port=3306;Database=agenda_matrix;Uid=root;Pwd=123456"    
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open (conn_string)      
sqlString = "select idcatagencia, agencia from catagencia where idcatzona = '" & zona & "'"
Set RSC = conn.Execute(sqlString)
while (not rsc.EOF)
    response.write("<option value=" & rsc("idcatagencia") & ">" & rsc("idcatagencia") & " - " & rsc("agencia") & "</option>")       
    rsc.MoveNext()
wend
conn.close
set conn = nothing
%>
</select>
<div id="resultado2"></div>
</form>
<script>
function clic(){
    
    var agencia = document.getElementById("catagencia").value;
    MostrarConsulta2('../formularios/matrix.asp?agencia=' + agencia);
}
 
 
</script>

Y este es el ultimo, igual se encuentra en la carpeta formularios/matrix.asp

Código ASP:

Ver original<form name="" method="post">
<select name="catmatrix">  
<%
Dim agencia
agencia = request.Querystring("agencia")
conn_string = "Driver={MySQL ODBC 5.1 Driver};Server=localhost;Port=3306;Database=agenda_matrix;Uid=root;Pwd=123456"    
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open (conn_string)      
sqlString = "select idcatmatrix, idcatagencia, uso from catmatrix where idcatagencia = '" & agencia & "'"
Set RSC = conn.Execute(sqlString)
while (not rsc.EOF)
    response.write("<option value=" & rsc("idcatmatrix") & ">" & rsc("idcatmatrix") & "</option>")      
    rsc.MoveNext()
wend
conn.close
set conn = nothing
%>
</form>

Cada combo por separado, realiza su funcion, el problema es cuando lo quiero unir.

Alexis88 · #4 (**permalink**) 31/07/2014, 12:39

No he programado en ASP, pero por lo que he podido ver y entender, creo que podrías reutilizar código, usando una función para las peticiones asíncronas (Ajax) y otra para las consultas (ASP).

Algo como esto:

Código HTML:

Ver original<select id = "primero">Opciones</select>
<select id = "segundo">Opciones</select>
<select id = "tercero">Opciones</select>

Código ASP:

Ver originalfunction consultas(consulta)
    sqlString = consulta;
end function

Código Javascript:

Ver originalfunction ajax(id_del_combo){
    //Instrucciones
}

De esta manera, evitarás crear código similar una y otra vez. Cada vez que veas una estructura similar, intenta reutilizarla en lugar de repetirla.

Saludos

IsaBelM · #5 (**permalink**) 01/08/2014, 15:24

intentas evaluar código traído en la respuesta para lo cual necesitas leer este articulo

por otro lado con un sólo archivo .asp te sería suficiente si usas subrutinas