Selectores múltiples con AJAX

agcforos · #1 (**permalink**) 31/10/2011, 09:40

Buenas tardes.
Estoy intentando hacer una selección múltiple con Ajax y el problema es que me carga los dos primeros selectores pero no entiendo porque no me presenta el último.
En el inicial presento el Select con una serie de valores. El segundo Select se carga correctamente al saltar el evento onchange, pero el tercero que tiene el mismo proceso que el segundo Select, no me salta el evento onchange cuando realizo alguna selección.
Agradecido si alguien me puede aclarar el porque no me sale.
Adjunto el fichero...

Código Javascript:

Ver original<?php
  include ('aprendetu_sc_fns.php');
 
  @session_start();
  
  ?>
  
        <LINK rel="stylesheet" type="text/css" href="cuerpo.css">
     
  <?php
  
  $usuario = $_SESSION['usuario'];
  $nivelUsuario = $_SESSION['nivelUsuario'];
  
  do_html_header("Bienvenido a Aprendetu Online");
  
  ?>
  
<script type="text/javascript">
    
    /*$(document).ready(function(){
        $("#contenidoCursos").load("servCursos.php?usuario="+usuario);   
    })*/
    
    function showAsignaturas(str){
        var xmlhttp;
        if (str==""){
            document.getElementById("priSelect").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest){
            xmlhttp = XMLHttpRequest();
        } else {
            xmlhttp = ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById("priSelect").innerHTML=xmlhttp.responseText;
            }          
        }
        xmlhttp.open("GET", "servAsignaturas.php?as="+str, true);
        xmlhttp.send();
    }
    
    function showTemas(str1){
        var xmlhttp1;
        if (str1==""){
            document.getElementById("segSelect").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest){
            xmlhttp1 = XMLHttpRequest();
        } else {
            xmlhttp1 = ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp1.onreadystatechange=function(){
            if (xmlhttp1.readyState==4 && xmlhttp1.status==200){
                document.getElementById("segSelect").innerHTML=xmlhttp1.responseText;
            }          
        }
        xmlhttp1.open("GET", "servTemas.php?tem="+str1, true);
        xmlhttp1.send();
    }
</script>
  
</head>
 
<body>
 
    <!--<div id="contenidoCursos" align="left"></div>-->
    
    <table>
    <tr>
    <td>
    <div id="sel">
        <select name="listaCursos" onchange="showAsignaturas(this.value)">
            <?php include "servCursos.php" ?>      
        </select>
    </div>
    </td>
    <td>
    <div id="priSelect">
        <select name="listaAsignaturas" onchange="showTemas(this.value)">
        </select>
    </div>
    </td>
    <td>
    <div id="segSelect">
        <select name="2">
        </select>  
    </div>
    </td>
    </tr>
    </table>
 
</body>
</html>

Gracias anticipadas y saludos.

rotabsamty · #2 (**permalink**) 31/10/2011, 09:57

Buenos días
Estoy iniciando y para poder iniciar bien me exigen que realice un sistema de chequera, no mas imaginense.

Quisiera ver si me puede ayudar con este codigo que intenta realizar una conexion a un ajax desde un archivo que se apoya con jQuery

<html>
<head>

<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>SAF- Solicitud de Cheques</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="javascript/divhide.js"></script>
<script src="javascript/jquery.tmpl.js"></script>
<script>
$(function(){
$('#query').live('keyup', function(){ // Obtiene la informacion conforme va tecleando la busqueda
//
var fecha= document.getElementById('fec').value; // Se toma la variable a concatenar fecha (No se si se deben de agregar 2 valores de fecha ini y fin)
var opcion= document.getElementById('opc').value; // Se crea variable para tomar informacion del combo, misma que sera unida al data
var data = 'query=' + opcion + $(this).val(); // Toma el valor de los datos, que viene del input
//alert(data); // Este echo es para validar que se despliegue la informacion de data y opcion
$.post('ajax.php',data, function(resp){ //Entra al Ajax para realizar las consultas conforme a la opcion seleccionada

alert(resp.response);
$('#proveedor').empty();
$('#tmpl_proveedor').tmpl(resp).appendTo('#proveed or'); // Checa el plugin de templating para Java, tomando los productos del script de abajo y
// los va colocando en la forma de la tabla
}, 'json'); // Json es una muy buena opcion
});
});
</script>
<script id="tmpl_proveedor" type="text/x-jquery-tmpl">
<tr>
{{if nomprov}}
<td>${folio}</td>
<td>${nomprov}</td>
<td>${falta}</td>
<td>${concepto}</td>
{{else}}
<td colspan="2">No existen resultados</td>
{{/if}}
</tr>
</script>
<style type="text/css">
.Estilo1 {
font-family: Arial;
font-size: 13px;
}
</style>
</head>
<body>
<div id="main">
<h1 class="Estilo1">Busqueda de Solicitudes de Cheque</h1>
<label>
<select name="opc" id="opc" onChange="ShowHidden()">
<option value="1">Número de Cheque</option>
<option value="2">Proveedor</option>
<option value="3" >Departamento</option>
<option value="4" >Concepto</option>
<option value="5">Por fechas</option>
</select>
</label>

<div align="left" id="NoCheques" style="z-index:1; position:absolute; width:302px; top: 85px; left: 397px; height: 21px;">
<input type="text" name="query" id="query" size="60" >
</div>


<div align="left" id="fecha" style="z-index:1; position:absolute; width:302px; top: 85px; left: 815px; height: 21px;">
Desde:
<input type="text" name="fecha1" id="fecha1" size="10">
Hasta:
<input type="text" name="fecha2" id="fecha2" size="10">
</div>
<table>
<thead>
<th>Folio</th>
<th>Proveedor</th>
<th>Fecha de alta</th>
<th>Concepto</th>
</thead>
<tbody id="proveedor" name='proveedor'>
<tr>
<td colspan="2">Encontrar Resultados</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Mi pregunta es, ¿como puedo concatenar 2 input que hacen referencia a fecini y fecfin y los pueda integrar en la busqueda de AJAX

agcforos · #3 (**permalink**) 31/10/2011, 09:58

Ya está visto.
El problema se estaba dando porque la respuesta de la segunda llamada Ajax ya venía desde servidor con las etiquetas Select completas y no estaba metiendo el onchange, con lo que no podía lanzar el evento.

Código PHP:

Ver original<?php
    include ('aprendetu_sc_fns.php');
    echo '<select name="asig" onchange="showTemas(this.value)">';
    $conn = db_connect();
    $query = "select * from asignaturas";
    $result = @mysql_query($query);
    echo "<option>Selecciona una asignatura</option>";
    while($fila = mysql_fetch_array($result)){
        if ($fila['idcurso'] == $_GET['as']){
            echo "<option value='".$fila['idasignatura']."'>".$fila['descasignatura']."</option>";
        }
    }
    mysql_close($conn);
    echo '</select>';
?>

Gracias y saludos.