Foros del Web » Programando para Internet » Javascript »

Problema con menús dependendientes

 Estas en el tema de Problema con menús dependendientes en el foro de Javascript en Foros del Web. Buenas, Tengo esto: Código PHP: <form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">     <table>     <tr><td class=Forms>ICAO: </td><td><input type="text" value="" name="ICAO" /></td></tr>     <tr><td class=Forms>Name: </td><td><input type="text" value="Airbus A320" name="nombre" /></td></tr>     <tr><td class=Forms>Price: </td><td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td></tr>     <div id="dep">     <tr><td class=Forms>Number Classes: </td></td><td><select name="numberclasses" id="numberclasses" onchange="callAjax()">           <option>Select Number of Classes</option>            <?php            echo '<option value="1">One</option>' ;            ?>     </select></td></tr>     </div> <div id="classes"> </div> ...
  #1 (permalink)  
Antiguo 23/12/2012, 06:43
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 6 meses
Puntos: 5
Exclamación Problema con menús dependendientes
Buenas,

Tengo esto:

Código PHP:
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
    <table>
    <tr><td class=Forms>ICAO: </td><td><input type="text" value="" name="ICAO" /></td></tr>
    <tr><td class=Forms>Name: </td><td><input type="text" value="Airbus A320" name="nombre" /></td></tr>
    <tr><td class=Forms>Price: </td><td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td></tr>
    <div id="dep">
    <tr><td class=Forms>Number Classes: </td></td><td><select name="numberclasses" id="numberclasses" onchange="callAjax()">
          <option>Select Number of Classes</option>
          <?php
          echo'<option value="1">One</option>';
          ?>
    </select></td></tr>
    </div>


<div id="classes">
</div>

    <tr><td class=Forms>Capacidad: </td><td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td></tr>
    </table><br />
    <input type="submit" name="enviar" value="Insertar"/>
    </form>
Utilizo los menús dependientes de Ajax, y eso funciona. El problema es que al seleccionar Number Classes "One", se me muestra el archivo classes.php

Código PHP:
<html>
<link rel="STYLESHEET" type="text/css" href="./style.css">

<?php
$value = $_GET['Value'];

if($value == 1){


    ?>



    <tr><td class=Forms>First Class: </td><td><input maxlength="3" value="150" type="text" name="pax" /></td></tr>

    
<?php
}
  
?>
</html>
Pero en el resultado final First Classes se ve de 1ero, esa no es la orden estipulada en el 1er archivo y además se ve sin formato:



Cómo puedo hacer para que se acople bien?
  #2 (permalink)  
Antiguo 23/12/2012, 07:27
Avatar de David
Moderador
  
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 8 meses
Puntos: 839
Respuesta: Problema con menús dependendientes
El orden en que aparece dependerá del código Javascript que uses al recibir la respuesta a la petición Ajax. No deberías devolver la etiqueta <html>, ni siquiera ese <link /> si vas a inyectar directamente ese contenido en algún elemento del DOM.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 23/12/2012, 08:48
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 6 meses
Puntos: 5
Exclamación Respuesta: Problema con menús dependendientes
Os dejo los archivos completos, con lo que me has dicho no he sido capaz de arreglarlo:

new_aircraft.php

Código PHP:
<!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>
<link rel="STYLESHEET" type="text/css" href="./style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Insert Aircraft</title>
</head>
<body>
<script>
//Ajax Script
function require(){
    try{
    req = new XMLHttpRequest();
    }catch(err1){
        try{
        req = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(err2){
            try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(err3){
            req = false;
            }
        }
    }
return req;
}


var request = require();

function callAjax(){
var ramdom = parseInt(Math.random()*999999999);
valor = document.getElementById("numberclasses").value;
var url="classes.php?Value="+valor+"&r="+ramdom;
request.open("GET",url,true);
request.onreadystatechange = answerAjax;
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.send(null);
}

function answerAjax(){

    if(request.readyState==4){
        if(request.status==200){
        //alert(request.responseText);
        document.getElementById("classes").innerHTML=request.responseText;
        }else{
        alert("ha ocurrido un error"+request.statusText);
        }
    }
}

</script>
<?

$boton = $_POST['enviar'];
$nombre = $_POST['nombre'];
$precio = $_POST['precio'];
$pax = $_POST['pax'];
$ICAO = $_POST['ICAO'];

if($boton == 'Insertar')
{
    include('./db.inc.php');
    
    $ICAO = strtoupper($ICAO);        
    mysql_query("INSERT INTO flota(ICAO, nombre, precio, capacidad) VALUES('$ICAO', '$nombre', '$precio', '$pax')") or die('<h4 style="color: red;">Ha habido un problema con la insercion.</h4>');
    
    mysql_close();
    
    echo '<h3 style="color: green;">Aeronave adquirida correctamente.<h3/>';
}
else
{
    ?>
    <form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
    <table>
    <tr><td class=Forms>ICAO: </td><td><input type="text" value="" name="ICAO" /></td></tr>
    <tr><td class=Forms>Name: </td><td><input type="text" value="Airbus A320" name="nombre" /></td></tr>
    <tr><td class=Forms>Price: </td><td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td></tr>
    <div id="dep">
    <tr><td class=Forms>Number Classes: </td></td><td><select name="numberclasses" id="numberclasses" onchange="callAjax()">
          <option>Select Number of Classes</option>
          <?php
          echo'<option value="1">One</option>';
          ?>
    </select></td></tr>
    </div>


<div id="classes">
    <tr><td class=Forms>First Class: </td><td><input maxlength="3" value="150" type="text" name="classes" id="classes"/></td></tr>
</div>

    <tr><td class=Forms>Capacidad: </td><td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td></tr>
    </table><br />
    <input type="submit" name="enviar" value="Insertar"/>
    </form>
    <?
}
?>
</body>
</html>

classes.php

Código PHP:
<?php
$value = $_GET['Value'];

if($value == 1){


    ?>



    <tr><td class=Forms>First Class: </td><td><input maxlength="3" value="150" type="text" name="pax" /></td></tr>

    
<?php
}
  
?>
Ayuda por favor!
  #4 (permalink)  
Antiguo 23/12/2012, 15:00
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 6 meses
Puntos: 5
Respuesta: Problema con menús dependendientes
Por favor una ayuda!!
  #5 (permalink)  
Antiguo 23/12/2012, 15:47
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 6 meses
Puntos: 5
Exclamación Respuesta: Problema con menús dependendientes
Acabo de descubrir que si el archivo classes.php lo dejo así:

Código PHP:
<?php
$value = $_GET['Value'];

if($value == 1){


    ?>


<table>
    <tr><td class=Forms>First Class: </td><td><input maxlength="3" value="150" type="text" name="pax" /></td></tr>
    </table>

    
<?php
}
  
?>
El resultado es este:



El estilo mejora pero al crear su propia tabla no se acopla a la que debería. Y la posición sigue siendo incorrecta.
  #6 (permalink)  
Antiguo 23/12/2012, 17:46
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 6 meses
Puntos: 5
Exclamación Respuesta: Problema con menús dependendientes
Cita:
Iniciado por David Ver Mensaje
El orden en que aparece dependerá del código Javascript que uses al recibir la respuesta a la petición Ajax. No deberías devolver la etiqueta <html>, ni siquiera ese <link /> si vas a inyectar directamente ese contenido en algún elemento del DOM.
El código AJAX que utilizo para devolverlo es:

Código PHP:
function answerAjax(){

    if(request.readyState==4){
        if(request.status==200){
        //alert(request.responseText);
        document.getElementById("classes").innerHTML=request.responseText;
        }else{
        alert("ha ocurrido un error"+request.statusText);
        }
    }
} 
El resto del script AJAX que utilizo es:

Código PHP: 
Ver original
  1. <script>
  2. //Ajax Script
  3. function require(){
  4.     try{
  5.     req = new XMLHttpRequest();
  6.     }catch(err1){
  7.         try{
  8.         req = new ActiveXObject("Microsoft.XMLHTTP");
  9.         }catch(err2){
  10.             try{
  11.             req = new ActiveXObject("Msxml2.XMLHTTP");
  12.             }catch(err3){
  13.             req = false;
  14.             }
  15.         }
  16.     }
  17. return req;
  18. }
  19.  
  20.  
  21. var request = require();
  22.  
  23. function callAjax(){
  24. var ramdom = parseInt(Math.random()*999999999);
  25. valor = document.getElementById("numberclasses").value;
  26. var url="classes.php?Value="+valor+"&r="+ramdom;
  27. request.open("GET",url,true);
  28. request.onreadystatechange = answerAjax;
  29. request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  30. request.send(null);
  31. }
  32.  
  33. function answerAjax(){
  34.  
  35.     if(request.readyState==4){
  36.         if(request.status==200){
  37.         //alert(request.responseText);
  38.         document.getElementById("classes").innerHTML=request.responseText;
  39.         }else{
  40.         alert("ha ocurrido un error"+request.statusText);
  41.         }
  42.     }
  43. }
  44.  
  45. </script>
  #7 (permalink)  
Antiguo 23/12/2012, 19:47
Avatar de David
Moderador
  
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 8 meses
Puntos: 839
Respuesta: Problema con menús dependendientes
Pregunto, ¿qué parte de esa fila de la tabla es la que va a cambiar por cada elemento seleccionado? Te digo esto porque usar innerHTML y elementos que no sean filas como nodos primarios en una tabla te va a dar problemas. Te sugiero que tengas esa fila ya colocada en el HTML (oculta) y cuando recibas la respuesta de la petición solo cambies lo necesario y lo muestras.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #8 (permalink)  
Antiguo 24/12/2012, 04:33
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 6 meses
Puntos: 5
Exclamación Respuesta: Problema con menús dependendientes
Cita:
Iniciado por David Ver Mensaje
Pregunto, ¿qué parte de esa fila de la tabla es la que va a cambiar por cada elemento seleccionado? Te digo esto porque usar innerHTML y elementos que no sean filas como nodos primarios en una tabla te va a dar problemas. Te sugiero que tengas esa fila ya colocada en el HTML (oculta) y cuando recibas la respuesta de la petición solo cambies lo necesario y lo muestras.
Realmente no lo reemplazo por nada visible lo reemplazo por:

Código PHP: 
Ver original
  1. <tr><td id="classes" ></td></tr>

He modificado alguna cosa en los archivos y quedan así:

new_aircraft.php

Código PHP: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <link rel="STYLESHEET" type="text/css" href="./style.css">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Insert Aircraft</title>
  7. </head>
  8. <body>
  9. <script>
  10. //Ajax Script
  11. function require(){
  12.     try{
  13.     req = new XMLHttpRequest();
  14.     }catch(err1){
  15.         try{
  16.         req = new ActiveXObject("Microsoft.XMLHTTP");
  17.         }catch(err2){
  18.             try{
  19.             req = new ActiveXObject("Msxml2.XMLHTTP");
  20.             }catch(err3){
  21.             req = false;
  22.             }
  23.         }
  24.     }
  25. return req;
  26. }
  27.  
  28.  
  29. var request = require();
  30.  
  31. function callAjax(){
  32. var ramdom = parseInt(Math.random()*999999999);
  33. valor = document.getElementById("numberclasses").value;
  34. var url="classes.php?Value="+valor+"&r="+ramdom;
  35. request.open("GET",url,true);
  36. request.onreadystatechange = answerAjax;
  37. request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  38. request.send(null);
  39. }
  40.  
  41. function answerAjax(){
  42.  
  43.     if(request.readyState==4){
  44.         if(request.status==200){
  45.         //alert(request.responseText);
  46.         document.getElementById("classes").innerHTML=request.responseText;
  47.         }else{
  48.         alert("ha ocurrido un error"+request.statusText);
  49.         }
  50.     }
  51. }
  52.  
  53. </script>
  54. <?
  55.  
  56. $boton = $_POST['enviar'];
  57. $nombre = $_POST['nombre'];
  58. $precio = $_POST['precio'];
  59. $pax = $_POST['pax'];
  60. $ICAO = $_POST['ICAO'];
  61.  
  62. if($boton == 'Insertar')
  63. {
  64.     include('./db.inc.php');
  65.     
  66.     $ICAO = strtoupper($ICAO);      
  67.     mysql_query("INSERT INTO flota(ICAO, nombre, precio, capacidad) VALUES('$ICAO', '$nombre', '$precio', '$pax')") or die('<h4 style="color: red;">Ha habido un problema con la insercion.</h4>');
  68.     
  69.     mysql_close();
  70.     
  71.     echo '<h3 style="color: green;">Aeronave adquirida correctamente.<h3/>';
  72. }
  73. else
  74. {
  75.     ?>
  76.     <form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
  77.     <table>
  78.     <tr><td class=Forms>ICAO: </td><td><input type="text" value="" name="ICAO" /></td></tr>
  79.     <tr><td class=Forms>Name: </td><td><input type="text" value="Airbus A320" name="nombre" /></td></tr>
  80.     <tr><td class=Forms>Price: </td><td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td></tr>
  81.  
  82.     <tr><td class=Forms>Number Classes: </td></td><td><select name="numberclasses" id="numberclasses" onchange="callAjax()">
  83.         <option>Select Number of Classes</option>
  84.         <?php
  85.         echo'<option value="1">One</option>';
  86.         ?>
  87.     </select></td></tr>
  88.  
  89.  
  90. <tr><td id="classes" ></td></tr>
  91.  
  92.     <tr><td class=Forms>Capacidad: </td><td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td></tr>
  93.     </table><br />
  94.     <input type="submit" name="enviar" value="Insertar"/>
  95.     </form>
  96.     <?
  97. }
  98. ?>
  99. </body>
  100. </html>

classes.php

Código PHP: 
Ver original
  1. <?php
  2. $value = $_GET['Value'];
  3.  
  4. if($value == 1){
  5.  
  6.  
  7.     ?>
  8.  
  9.  
  10. <thead>
  11.     <td class=Forms>First Class: </td><td><input maxlength="3" value="150" type="text" name="pax" /></td>
  12. </thead>
  13.  
  14.     
  15. <?php
  16. }
  17.   
  18. ?>

Ahora se ve así:



Alguien sabe como lo puedo arreglar?
  #9 (permalink)  
Antiguo 24/12/2012, 06:57
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 6 meses
Puntos: 5
Exclamación Respuesta: Problema con menús dependendientes
Vale, ya he dado con el problema. El problem es que utilizo dos <td> en cada línea y estaba poniendo en el hueco de un <td> dos.

Etiquetas: html
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 19:31.