Foros del Web » Programando para Internet » Jquery »

Cómo hacer esto

Estas en el tema de Cómo hacer esto en el foro de Jquery en Foros del Web. Buenas, Tengo este archivo: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns = ...
  #1 (permalink)  
Antiguo 04/01/2013, 14:44
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 12 años, 10 meses
Puntos: 5
Exclamación Cómo hacer esto

Buenas,

Tengo este archivo:

Código Javascript:
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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Aircrafts</title>
  6.     <link rel="stylesheet" type="text/css" href="./css/style.css">
  7.     <link rel="stylesheet" href="./css/flick/jquery.ui.all.css">
  8.     <script src="./jquery.js"></script>
  9.     <script src="./ui/jquery.ui.core.js"></script>
  10.     <script src="./ui/jquery.ui.widget.js"></script>
  11.     <script src="./ui/jquery.ui.button.js"></script>
  12.     <script src="./ui/jquery.ui.core.js"></script>
  13.     <script src="./ui/jquery.ui.widget.js"></script>
  14.     <script src="./ui/jquery.ui.mouse.js"></script>
  15.     <script src="./ui/jquery.ui.button.js"></script>
  16.     <script src="./ui/jquery.ui.draggable.js"></script>
  17.     <script src="./ui/jquery.ui.position.js"></script>
  18.     <script src="./ui/jquery.ui.resizable.js"></script>
  19.     <script src="./ui/jquery.ui.dialog.js"></script>
  20.     <script src="./ui/jquery.ui.effect.js"></script>
  21.    
  22. <script>
  23.     $.fx.speeds._default = 1000;
  24.     $(function() {
  25.         $( "#dialog" ).dialog({
  26.             autoOpen: false,
  27.             show: "blind",
  28.             hide: "explode"
  29.         });
  30.  
  31.         $( "#insertaircraft" ).click(function() {
  32.             $( "#dialog" ).dialog( "open" );
  33.             return false;
  34.         });
  35.     });
  36. </script>
  37.  
  38. <div id="dialog" title="Basic dialog">
  39.      <?php include('./new_aircraft.php'); ?>
  40. </div>
  41.  
  42. <tr><td></td><td><input id="insertaircraft" type="submit" value="Insert Aircraft"/></td></tr>
  43.  
  44.  
  45. </head>
  46. <body>
  47.    
  48. </body>
  49. </html>

La idea es que cuando pulse el botón Insert Aircraft, se me abra en el dialog de JQuery el formulario que tengo hecho en new_aircraft.php. De la manera que puse arriba se ve el formulario ya sin pulsar el botón y fuera del cuadro. Pero sin embargo si sustituyo el include por texto, al pulsar el botón todo se abre correctamente.

Es posible hacer esto o necesito realizar el formulario dentro de este documento?
  #2 (permalink)  
Antiguo 04/01/2013, 14:58
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 12 años, 10 meses
Puntos: 5
Exclamación Respuesta: Cómo hacer esto

Ok, voy avanzando ya funciona a medias.

Os muestro los archivos:

Código Javascript:
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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Aircrafts</title>
  6.     <link rel="stylesheet" type="text/css" href="./css/style.css">
  7.     <link rel="stylesheet" href="./css/flick/jquery.ui.all.css">
  8.     <script src="./jquery.js"></script>
  9.     <script src="./ui/jquery.ui.core.js"></script>
  10.     <script src="./ui/jquery.ui.widget.js"></script>
  11.     <script src="./ui/jquery.ui.button.js"></script>
  12.     <script src="./ui/jquery.ui.core.js"></script>
  13.     <script src="./ui/jquery.ui.widget.js"></script>
  14.     <script src="./ui/jquery.ui.mouse.js"></script>
  15.     <script src="./ui/jquery.ui.button.js"></script>
  16.     <script src="./ui/jquery.ui.draggable.js"></script>
  17.     <script src="./ui/jquery.ui.position.js"></script>
  18.     <script src="./ui/jquery.ui.resizable.js"></script>
  19.     <script src="./ui/jquery.ui.dialog.js"></script>
  20.     <script src="./ui/jquery.ui.effect.js"></script>
  21.    
  22. <script>
  23.     $.fx.speeds._default = 1000;
  24.     $(function() {
  25.         $( "#dialog" ).dialog({
  26.             autoOpen: false,
  27.             show: "blind",
  28.             hide: "explode"
  29.         });
  30.  
  31.         $( "#insertaircraft" ).click(function() {
  32.             $( "#dialog" ).dialog( "open" );
  33.             return false;
  34.         });
  35.     });
  36. </script>
  37.  
  38. <div id="dialog" title="Basic dialog">
  39.      <?php include('./new_aircraft.php'); ?>
  40. </div>
  41.  
  42. <tr><td></td><td><input id="insertaircraft" type="submit" value="Insert Aircraft"/></td></tr>
  43.  
  44.  
  45. </head>
  46. <body>
  47.    
  48. </body>
  49. </html>

y el new_aircraft.php

Código Javascript:
Ver original
  1. <script>
  2.     $(function() {
  3.         $("#insertaircraft2")
  4.             .button()
  5.             .click(function(event) {
  6.             });
  7.     });
  8. </script>
  9.  
  10. <form action="new_aircraft_process.php" method="post" enctype="application/x-www-form-urlencoded">
  11.     <table>
  12.  
  13.     <tr><td class="forms">ICAO:</td><td><input maxlength="4" type="text" name="icao" size="30"/></td></tr>
  14.    
  15.     <tr><td class="forms">Name:</td><td><input type="text" name="name" size="30"/></td></tr>
  16.        
  17.     <tr><td class="forms">Weight Empty: </td><td><input type="text" name="weightempty" size="30"/></td></tr>
  18.        
  19.     <tr><td class="forms">Weight Full: </td><td><input type="text" name="weightfull" size="30"/></td></tr>
  20.        
  21.     <tr><td class="forms">Cargo Full: </td><td><input type="text" name="cargofull" size="30"/></td></tr>
  22.    
  23.     <tr><td class="forms">Cruise Speed: </td><td><input type="text" name="cruisespeed" size="30"/></td></tr>
  24.    
  25.     <tr><td class="forms">Range: </td><td><input type="text" name="range" size="30"/></td></tr>
  26.        
  27.     <tr><td class="forms">Price: </td><td><input type="text" name="price" size="30"/></td></tr>
  28.  
  29.     <tr><td class="forms">Number Classes:</td><td><select name="numberclasses" id="numberclasses">
  30.         <option value="0">Select Number of Classes</option>
  31.         <?php
  32.         echo '<option value="1">One Classes (Economy)</option>';
  33.         echo '<option value="2">Two Classes (Business & Economy)</option>';
  34.         echo '<option value="3">Three Classes (First, Business & Economy)</option>';
  35.         ?>
  36.     </select></td></tr>
  37.  
  38.  
  39.  
  40.     <tr><td class="forms">First Class:</td><td><input disabled="disabled" type="text" id="firstclassseats" name="firstclassseats" size="30"/></td></tr>
  41.    
  42.     <tr><td class="forms">Business Class:</td><td><input disabled="disabled" type="text" id="businessclassseats" name="businessclassseats" size="30"/></td></tr>
  43.    
  44.     <tr><td class="forms">Economy Class:</td><td><input disabled="disabled" type="text" id="economyclassseats" name="economyclassseats" size="30"/></td></tr>
  45.  
  46. <script type="text/javascript">
  47.  
  48. $("#numberclasses").change(function() {
  49. value = $(this).val();
  50.  
  51. $("div").text(value);
  52.  
  53. str = parseInt(value);
  54.  
  55. switch(str)
  56.   {
  57.     case 0:
  58.     $(document).ready(function() {
  59.         $("#firstclassseats").attr("disabled","disabled");
  60.         $("#businessclassseats").attr("disabled","disabled");
  61.         $("#economyclassseats").attr("disabled","disabled");
  62. });
  63.     break;
  64.    
  65.     case 1:
  66.     $(document).ready(function() {
  67.         $("#economyclassseats").removeAttr('disabled');
  68.         $("#firstclassseats").attr("disabled","disabled");
  69.         $("#businessclassseats").attr("disabled","disabled");
  70. });
  71.     break;
  72.    
  73.      case 2:
  74.     $(document).ready(function() {
  75.         $("#businessclassseats").removeAttr('disabled');
  76.         $("#economyclassseats").removeAttr('disabled');
  77.         $("#firstclassseats").attr("disabled","disabled");
  78. });
  79.     break;
  80.  
  81.     case 3:
  82.     $(document).ready(function() {
  83.         $("#firstclassseats").removeAttr('disabled');
  84.         $("#businessclassseats").removeAttr('disabled');
  85.         $("#economyclassseats").removeAttr('disabled');
  86. });
  87.     break;
  88.  
  89.   }
  90. });
  91.  
  92. </script>
  93.  
  94.     <tr><td></td><td><input id="insertaircraft2" type="submit" value="Insert Submit"/></td></tr>
  95.     </table>
  96. </form>

El problema es que cuando selecciono la respuesta del Select de new_aircraft cuando se está ejecutando en el dialog, al escoger la respuesta el dialog se cierra.

PD: Si en vez de las etiquetas <div> las cambio por <th>, el script no da problema pero ya aparece en la pantalla fuera de dialog.

Última edición por carlosuc99; 05/01/2013 a las 04:51
  #3 (permalink)  
Antiguo 05/01/2013, 05:23
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 12 años, 10 meses
Puntos: 5
Exclamación Respuesta: Cómo hacer esto

Arreglado,

Esta línea del new_aircraft.php sobraba:

Código Javascript:
Ver original
  1. $("div").text(value);

Etiquetas: formulario, html, input, js, php
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




La zona horaria es GMT -6. Ahora son las 02:50.