Intentare explicarlo un poco mejor!
Bueno
Tengo la página principal. index.html que contiene :
* Incluye el jquery.
* el Objeto XMLHTTPRequest.
* funciones ( aquí dentro está el código para los combobox dependientes).
* Contiene el código para ver el botón y al pincharlo muestra la tabla con los combobox.
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type='text/javascript' src='objetoXMLHTTPRequest.js'></script>
<!-- Elemental -->
<div id="botonCalibres"><button type='button' onClick="mostrarCriterioCalibres()">Mostrar Calibres
<img src="http://www.forosdelweb.com/f77/images/icons/listar.png" ></button></div>
<div id="mostrarComboBox"></div>
Hasta aquí todo va bien, si pincho el botón me muestra la tabla con los combobox.
Ahora mostrare la página donde está el código de los comobobox.
Código HTML:
Ver original
<table width="584" border="0" align="center" cellpadding="0" cellspacing="0">
<td width="584" height="28" align="center">
<form name="formularioCalibres" method="GET" >
<table border="0" align="center" cellpadding="0" cellspacing="0">
<td colspan="4" align="left" class="titulo">Criterio Calibres
</td>
<td class="titulo"><B>Especie:
</B></td>
<td colspan="4" class="alt" align="left">
<select name="especie" id="especie" style="width: 260px" onChange="pedirDatosCalibres()">
<option value="0" selected="selected">Seleccionar Especie
</option>
<?php
$res = mysql_query("SELECT DISTINCT(id_especie) FROM criterio_calibres");
$cant = mysql_num_rows($res);
if($cant>0){
while($rs = mysql_fetch_array($res)){
?>
<option value="<?php echo $rs["id_especie"]?>">
<?php echo $rs["id_especie"]?></option>
<?php
}
}
?>
<td class="titulo"><B>Variedad:
</B></td>
<td colspan="4" class="alt" align="left">
<select id="variedad" name="variedad" style="width: 260px" onChange="pedirDatosCalibres()">
<option value="0" selected="selected">Seleccionar Variedad
</option>
<td class="titulo"><B>Productor:
</B></td>
<td colspan="4" class="alt" align="left">
<select id="productor" name="productor" style="width: 260px" onChange="pedirDatosCalibres(),habilitarBotonAgregar(this.form),habilitarBotonEliminar(this.form)">
<option value="0" selected="selected">Seleccionar Productor
</option>
<td class="titulo"><B>Etapa:
</B></td>
<td class="alt" align="left">
<select id="etapa" name="etapa" style="width: 135px" onChange="pedirDatosCalibres()">
<option value="0" selected="selected">
<?php echo 'Seleccionar Etapa'; ?>
Bueno esto es lo que no funciona. Pero si lo dejo en la página principal, sin el botón.
Osea que al entrar al index.html me muestre los combobox. Sin el botón. Funciona bien.
Ahora muestro el código ajax de los combobox dependientes.
Código Javascript
:
Ver original$(document).ready(function(){
$("select").change(function(){
// Vector para saber cuál es el siguiente combo a llenar
var combos = new Array();
//productor //especie
//especie //variedad
//variedad //etapa
combos['especie'] = "variedad";
combos['variedad'] = "productor";
combos['productor'] = "etapa";
// Tomo el nombre del combo al que se le a dado el clic por ejemplo: especie
posicion = $(this).attr("name");
// Tomo el valor de la opción seleccionada
valor = $(this).val()
// Evaluó que si es productor y el valor es 0, vacié los combos de Especie, Variedad y Etapa
if(posicion == 'especie' || valor==0){
$("#variedad").html(' <option value="0" selected="selected" style="width: 148px">Seleccionar Variedad</option>')
$("#productor").html(' <option value="0" selected="selected" style="width: 148px">Seleccionar Productor</option>')
$("#etapa").html(' <option value="0" selected="selected" style="width: 148px">Seleccionar Etapa</option>')
$.post("consultasJS/criterioCalibres_js.php",{combo:$(this).attr("name"), id:$(this).val() },function(data){
$("#"+combos[posicion]).html(data);})
}
if(posicion == 'variedad' || valor==0){
$("#productor").html(' <option value="0" selected="selected" style="width: 148px">Seleccionar Productor</option>')
$.post("consultasJS/criterioCalibres_js.php",{combo:$(this).attr("name"), id:$(this).val() },function(data){
$("#"+combos[posicion]).html(data);})
}
if(posicion == 'productor' || valor==0){
$("#etapa").html(' <option value="0" selected="selected" style="width: 148px">Seleccionar Etapa</option>')
$.post("consultasJS/criterioCalibres_js.php",{combo:$(this).attr("name"), id:$(this).val() },function(data){
$("#"+combos[posicion]).html(data);})
}
})
})
Y la función pedirDatosCalibres()
Código Javascript
:
Ver originalfunction pedirDatosCalibres(etapaRecibida){
//Ocultamos el formulario de Ingresar Otro
ocultarCampos = document.getElementById('campos');
ocultarCampos.style.display='none'; // Con este script, logramos mostrar los campos nuevamente.
//Ocultamos el formuladio de Modificar
ocultarModificarVer = document.getElementById('modificar');
ocultarModificarVer.style.display='none';
//Donde se mostrará el resultado
divResultadoGrilla = document.getElementById('resultado');
//Tomamos el valor del Formulario Calibres
especie = document.formularioCalibres.especie.value;
variedad = document.formularioCalibres.variedad.value;
productor = document.formularioCalibres.productor.value;
etapa = document.formularioCalibres.etapa.value;
etapaRecibida = etapaRecibida; // Recibo True o underfined , o si fuera de listaCriterio* Envio un valor de Etapa
//Instanciamos el objetoAjax
ajax = objetoAjax();
// Creamos una variable donde guarde un valor aleatorio, que nos sirve para engañar las cookies del navegador.
var miAleatorio=parseInt(Math.random()*99999999);
//Usamos el metodo GET
//Archivo que realizará la operacion
//listaCriterioCalibre.php
url = "consultasJS/listaCriterioCalibre.php?productor=" + productor + "&especie=" + especie + "&variedad=" + variedad + "&etapa=" + etapa + "&etapaRecibida=" + etapaRecibida;
ajax.open("GET",url+ "&rand=" + miAleatorio,true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//Mostrar resultados en esta capa y lo convertimos en HTML dentro de un DIV
divResultadoGrilla.innerHTML = ajax.responseText.tratarResponseText();
}else{
//Aquí es el proceso de espera y dejamos una imagen simulando la espera o el progreso.
divResultadoGrilla.innerHTML = '<img src="http://www.forosdelweb.com/f77/images/icons/carga.gif">';
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//Enviamos el valor null ya que ocupamos el metodo GET
ajax.send(null)
}
Bueno decir que no entra al
Código Javascript
:
Ver original$("select").change(function(){
Al Seleccionar el primer combobox.
T_T
Eso es todo.
El script que me ha ofrecido Panino5001 funciona a la perfección, pero no entiendo porqué no funciona con el script de los combobox dependientes.
Espero que me hallan entendido :) Muchas gracias!