Problema con $.post de jQuery

[SymarCs]

Hola que tal.

Estoy haciendo el clasico "select dependiente" o "combos dependientes", con jQuery.

Tengo solo dos combos, el problema es que al cambiar la seleccion del primer combo el segundo no cambia cuando se supone debe hacerlo. El codigo lo tengo en 3 archivos.

formulario.php

Código PHP:

 //Incluyo jquery.js y mi script jquery.combo.js con <script ...> 
 
<form name="formulario1"> 
   <select name="com1" id="com1"> 
      <option value="0">Selecciona uno...</option> 
      <?php 
      //Se incluye y realiza la conexion la conexion 
      //Se muestran los datos del primer combo 
      ?> 
   </select> 
 
   <select name="com2" id="com2"> 
      <option value="0">Selecciona uno...</option>       
   </select> 
</form>  

jquery.combos.js

Código Javascript:

$(document).ready(function(){
    $("select").change(function(){
                    
        nombre_combo = $(this).attr("name"); //nombre del combo
        indice = $(this).val(); //indice (value) de la opcion seleccionada
 
        // Si el combo1 vuelve al valor por defecto, el combo2 tambien lo hara
        if(nombre_combo == 'com1' && indice == 0){
            $("#com2").html('<option value="0">Selecciona uno...</option>')
        }else{
            //SI el indice (value) no es el valor por defecto (0)
            if(valor != 0){
            // Se llama a la pagina combos.php donde estan las consultas sql
                $.post("combos.php",{
                       id:$(this).val() // Valor seleccionado
                       },function(data){
                           $("#com2").html(data); //Se debe llenar el segundo combo
de acuerdo a la opcion elegida del primero pero NO se llena
                })
            }
        }
    })
})
 

combos.php

Código PHP:

  <?php 
//Se incluye la conexion 
 
$sql = "select id_modulo,nombre_mod from modulos where numero_dis=".$_POST['id']; 
$conexion = conexion(); 
$res = mysql_query($sql,$conexion) or die(mysql_error()); 
while($row = mysql_fetch_array($res)){ 
    echo '<option value="'.$row['id_modulo'].'">'.$row['nombre_mod'].'</option>'; 
} 
?>   

Pues esos son los tres script que uso para hacerlo, solo he podido notar que no realiza las acciones desde $.post, antes de eso el script funciona lo note poniendo alert('mensaje').

Ya he estado mucho tiempo con esto y no veo el error, por favor necesito su ayuda :P gracias.

[caricatos]

Tema movido desde javascript

[Dany_s]

esta coma está mal ubicada y no especificaste la clave del callback

},function(data){

debe ser

Código Javascript:

$.post("combos.php",{
                       id:$(this).val(), // Valor seleccionado
                       success: function(data){
                           $("#com2").html(data); //Se debe llenar el segundo combo
de acuerdo a la opcion elegida del primero pero NO se llena
                })
 

cuando algo no funciona siempre fijate primero en la consola de errores de javascript que tiene firefox

[tredio]

como el lo estaba haciendo es una forma valida de ejecutar esa funcion, segun la api de jquery esta es la forma

jQuery.post( url, [data], [callback], [type] )

aca dejo el link http://docs.jquery.com/Post

[mayid]

Asegurate de que la respuesta solo contiene tags <option>. Si esta "contaminado" por otras cosas te va a romper tu <select>. Podes ver exactamente cual es la respuesta del servidor en la consola del Firebug.

Otra cosa: si queres podes usar load en vez de post...

Código Javascript:

$("form select#com2").load("combos.php", {id:$(this).val()});
 

[Dany_s]

Iniciado por tredio

como el lo estaba haciendo es una forma valida de ejecutar esa funcion, segun la api de jquery esta es la forma

jQuery.post( url, [data], [callback], [type] )

aca dejo el link http://docs.jquery.com/Post

jeje si, creo que cuando mire el código vi el método ajax en vez de post jeje igual si era .ajax no sé de donde saqué el parámetro id, ando cruzado

tu error esta en id:$(this).val() el this no está haciendo referencia al elemento del change

hace esto

en el parámetro id del post va
id : indice

[mayid]

Entonces quedarías $("select").val()?

Para evitar embigüedades, sugiero apliques el .change a un select con un id o name específico.

Por otro lado, no termino de visualizar la utilidad de este condicional:

Código Javascript:

if(nombre_combo == 'com1' && indice == 0){
            $("#com2").html('<option value="0">Selecciona uno...</option>')
        }
 

[Dany_s]

si, en realidad no creo que este bien darle un evento change a todos los elementos select

$("select"), mejor sería $('#miCombo') porque sino si tenes varios selects va a estar asignando el evento a todos

vi que ya estas guardando el valor del select en la variable 'indice' asi que envia el valor de id con esa variable
id:indice

tenés esto comentado
//SI el indice (value) no es el valor por defecto (0)
if(valor != 0){

pero en la variable 'valor' no veo que estes asignando algo, deberia comprobar con la variable 'indice' como lo tienes en el comentario

[SymarCs]

tu error esta en id:$(this).val() el this no está haciendo referencia al elemento del change

Gracias, si eso es lo que estaba pasando. No se mandaba ningun ID a mi script para llenar el segundo combo. Entonces use esto:

Entonces quedarías $("select").val()?

Para evitar embigüedades, sugiero apliques el .change a un select con un id o name específico.

En lugar de "this" utilice el id del combo1 y listo de esa forma si manda el indice o value que uso para generar la consulta SQL, y luego llenar el combo

----

Por otro lado, no termino de visualizar la utilidad de este condicional:

Código Javascript:

if(nombre_combo == 'com1' && indice == 0){
      $("#com2").html('<option value="0">Selecciona uno...</option>')
   }
 

Eso lo usaba para saber si el cambio (change) fue desde el combo1 (com1), y ademas si se eligio un opcion diferente al default (0 - Selecciona una opcion). Pero de la manera que ahora lo tengo (asignando el evento change solo al combo indicado) ya no es necesario esta parte.

tenés esto comentado
//SI el indice (value) no es el valor por defecto (0)
if(valor != 0){

pero en la variable 'valor' no veo que estes asignando algo, deberia comprobar con la variable 'indice' como lo tienes en el comentario

Si eso fue un error mio, en lugar de "valor" deberia haber sido "indice" :P

Ahora solo me quede con una duda, como le hago para:

Podes ver exactamente cual es la respuesta del servidor en la consola del Firebug.

No le entiendo muy bien.

Gracias todo fue de ayuda.

[tredio]

Mozilla Firefox tiene un complemento que te permite debuggear y ver errores en tu codigo javascritp, html, css, xml etc, muy recomendable en el desarrollo de aplicaciones web, google chrome tiene algo parecido pero ya esta incorporado en el navegador, para descargarte el firebug aca te dejo el link.

https://addons.mozilla.org/es-es/firefox/addon/1843/

esta demas decir que lo tienes que abrir con firefox. saludos.

[Dany_s]

es una extensión para firefox o chrome, tiene muchas herramientas como para ver errores javascript, tiempo de carga de paginas, script, imágenes, editar código html y ver resultados en el navegador, cabeceras, etc, etc

Cuando la tenés instalado podes activar y ver un panel abajo, y en respuestas ajax es bueno porque te figura los Encabezados, la respuesta, o sea pediste un html podés ver el código, si pediste un json o xml, hay veces que para ver hace alert(data) pero con firebugs lo podes ver en la consola, podes ver a la url que se hizo una petición y su código de respuesta

investigalo está bueno

[SymarCs]

Bueno me referia a como usarlo, por que si lo conosco pero hasta ahora solo lo utilizaba para ver el HTML y el CSS.

Ya lei un poco, no veia nada por que la consola la tenia desactivada, de todos modos gracias es una buena herramiente.

[Dany_s]

ah ok jeje la pudiste activar?
cuando abris la consola busca la pestaña red que tiene una flechita para abajo y ahi habilitas esa sección.

Ahora ya podes ver todas las cosas que carga tu página, supone que queres ver una peticion ajax, le das limipar para sacar todas las peticiones anteriores y cuando haces una llamada te sale la url en la consola, le das click y se despliega info y ahi busca la pestaña 'respuesta'