Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Problema con FORM para editar AJAX

 Estas en el tema de Problema con FORM para editar AJAX en el foro de Javascript en Foros del Web. Buenas, Tengo este form para editar, edita los datos de una tabla: el index.php @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original <! DOCTYPE html PUBLIC ...
  #1 (permalink)  
Antiguo 19/01/2013, 09:57
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 7 meses
Puntos: 5
Exclamación Problema con FORM para editar AJAX
Buenas,

Tengo este form para editar, edita los datos de una tabla:

el index.php

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="../../../lib/css/style.css">
  7.         <link rel="stylesheet" href="../../../lib/css/flick/jquery.ui.all.css">
  8.         <script src="../../../lib/js/jquery.js"></script>
  9.         <script src="../../../lib/js/ui/jquery.ui.button.js"></script>
  10.         <script src="../../../lib/js/ui/jquery.ui.core.js"></script>
  11.         <script src="../../../lib/js/ui/jquery.ui.widget.js"></script>
  12.         <script src="../../../lib/js/ui/jquery.ui.mouse.js"></script>
  13.         <script src="../../../lib/js/ui/jquery.ui.button.js"></script>
  14.         <script src="../../../lib/js/ui/jquery.ui.draggable.js"></script>
  15.         <script src="../../../lib/js/ui/jquery.ui.position.js"></script>
  16.         <script src="../../../lib/js/ui/jquery.ui.resizable.js"></script>
  17.         <script src="../../../lib/js/ui/jquery.ui.dialog.js"></script>
  18.  
  19.  
  20.     <script>
  21.     $(function() {
  22.         $( "#loadingdialog" ).dialog({
  23.             autoOpen: false,
  24.             width: 300,
  25.             height: 65
  26.         });
  27.  
  28.         $("#loadingdialog").dialog('widget').find(".ui-dialog-titlebar").hide();
  29.         $("#loadingdialog").dialog('widget').find(".ui-resizable-se").hide();
  30.  
  31.         $( "#editaircraftdialog" ).dialog({
  32.             autoOpen: false,
  33.             width: 425
  34.         });
  35.  
  36.         $("#editaircraftdialog").dialog('widget').find(".ui-resizable-se").hide();
  37.  
  38.  
  39.     });
  40.  
  41.         function refreshTable(callback){
  42.         $('#table').load('aircrafts_table.php', callback);
  43.  
  44.         }
  45.  
  46.         if (window.XMLHttpRequest)
  47.                 {
  48.                 ajax=new XMLHttpRequest();
  49.                 }
  50.             else
  51.                 {
  52.                 ajax=new ActiveXObject("Microsoft.XMLHTTP");
  53.                 }
  54.  
  55.  
  56.         function edit(str){
  57.  
  58.         var loading = $("#loadingdialog").dialog('open');
  59.         var aircraft = $("#editaircraftdialog");
  60.             aircraft.load("./edit_aircraft.php?icao="+str, function(){
  61.             loading.dialog('close');
  62.             aircraft.dialog('open');
  63.             });
  64.         }
  65.  
  66.         function editForm(){
  67.  
  68.             var icao = document.getElementById('icao').value;
  69.             var name = document.getElementById('name').value;
  70.             var weightempty = document.getElementById('weightempty').value;
  71.             var weightfull = document.getElementById('weightfull').value;
  72.             var cargofull = document.getElementById('cargofull').value;
  73.             var cruisespeed = document.getElementById('cruisespeed').value;
  74.             var range = document.getElementById('range').value;
  75.             var price = document.getElementById('price').value;
  76.             var firstclassseats = document.getElementById('firstclassseats').value;
  77.             var businessclassseats = document.getElementById('businessclassseats').value;
  78.             var economyclassseats = document.getElementById('economyclassseats').value;
  79.             ajax.open("POST","edit_aircraft_process.php",true);
  80.             ajax.onreadystatechange=function(){
  81.                 if(ajax.readyState==4)
  82.                 {
  83.                 refreshTable(function(){$("#loadingdialog").dialog('close');});
  84.  
  85.                 refreshTable(function(){$("#result").fadeIn(); document.getElementById("result").innerHTML=ajax.responseText;});
  86.                 setTimeout(function() { $("#result").fadeOut() }, 5000);
  87.                 }
  88.             }
  89.         ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  90.         ajax.send("icao="+icao+"&name="+name+"&weightempty="+weightempty+"&weightfull="+weightfull+"&cargofull="+cargofull+"&cruisespeed="+cruisespeed+"&range="+range+"&price="+price+"&firstclassseats="+firstclassseats+"&businessclassseats="+businessclassseats+"&economyclassseats="+economyclassseats);
  91.         $("#editaircraftdialog").dialog('close');
  92.         $("#loadingdialog").dialog('open');
  93.         }
  94. </script>
  95. </head>
  96. <body>
  97.  
  98. <div id="result"></div></br>
  99.  
  100. <div id="loadingdialog"><center><p><img src="http://www.forosdelweb.com/../lib/images/loading.gif"></center></p></div>
  101.  
  102. <?php
  103. require_once('../../config.php');
  104.  
  105. $query = "SELECT * FROM aircrafts ORDER BY ICAO ASC LIMIT";
  106.  
  107. $result = mysql_query($query);
  108. if (!$result)
  109. {
  110. die (mysql_error());
  111. }
  112.  
  113. echo "<table border='0' cellspacing='0'>";
  114. echo "<tr><th class=tabletitles>ICAO</th><th class=tabletitles>Edit</th></tr>";
  115.  
  116. while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
  117.     if($i++%2==0){
  118.        $color="#FFFFFF";
  119.     }else{
  120.        $color="#CCCCCC";
  121.     }
  122.  
  123.     ?>
  124.  
  125.     <tr bgcolor='<?php echo $color; ?>' onmouseover="this.style.background='#ABFB04';" onmouseout="this.style.background='<?php echo $color; ?>';">
  126.     <?php
  127.  
  128. echo "<td class=tablelist>";
  129.  
  130. echo $row["ICAO"] . '</td><td class=tablelist>';
  131.  
  132. echo "<img src=\"../../../lib/images/edit.png\" onclick=\"edit('".$row["ICAO"]."')\"></td><td class=tablelist>";
  133.  
  134. }
  135.  
  136. echo "</table>";
  137.  
  138. ?>
  139.  
  140. <div id="editaircraftdialog"></div>
  141.  
  142. </body>
  143. </html>

el edit_aircraft.php

Código PHP: 
Ver original
  1. <script>
  2.     $(function() {
  3.         $("#editaircraft")
  4.             .button()
  5.             .click(function editForm() {
  6.         });
  7.     });
  8. </script>
  9.  
  10. <?php
  11. require_once ('../../config.php');
  12. $icao = $_REQUEST["icao"];
  13.  
  14. $query = "SELECT * FROM aircrafts WHERE ICAO = '$icao'";
  15.  
  16. $result = mysql_query($query);
  17. if (!$result)
  18. {
  19. die (mysql_error());
  20. }
  21.  
  22. ?>
  23. <form action="javascript:editForm();" method="post" enctype="application/x-www-form-urlencoded"> 
  24. <?php
  25. echo '<table border="0">';
  26. while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){
  27.  
  28. echo '<tr><td class="forms">ICAO:</td><td><input type="text" id="icao" name="icao" size="30" value=';
  29. echo $row["ICAO"] . "></td></tr>";
  30.  
  31. echo '<tr><td class="forms">Name:</td><td><input type="text" id="name" name="name" size="30" value=';
  32. echo $row["Name"] . "></td></tr>";
  33.  
  34. echo '<tr><td class="forms">Weight Empty:</td><td><input type="text" id="weightempty" name="weightempty" size="30" value=';
  35. echo $row["WeightEmpty"] . "></td></tr>";
  36.  
  37. echo '<tr><td class="forms">Weight Full:</td><td><input type="text" id="weightfull" name="weightfull" size="30" value=';
  38. echo $row["WeightFull"] . "></td></tr>";
  39.  
  40. echo '<tr><td class="forms">Cargo Full:</td><td><input type="text" id="cargofull" name="cargofull" size="30" value=';
  41. echo $row["CargoFull"] . "></td></tr>";
  42.  
  43. echo '<tr><td class="forms">Cruise Speed:</td><td><input type="text" id="cruisespeed" name="cruisespeed" size="30" value=';
  44. echo $row["CruiseSpeed"] . "></td></tr>";
  45.  
  46. echo '<tr><td class="forms">Range:</td><td><input type="text" id="range" name="range" size="30" value=';
  47. echo $row["Range"] . "></td></tr>";
  48.  
  49. echo '<tr><td class="forms">Price:</td><td><input type="text" id="price" name="price" size="30" value=';
  50. echo $row["Price"] . "></td></tr>";
  51.  
  52. if($row["FirstClassSeats"] != NULL && $row["FirstClassSeats"] != 0){
  53. echo '<tr><td class="forms">First Class Seats:</td><td><input type="text" id="firstclassseats" name="firstclassseats" size="30" value=';
  54. echo $row["FirstClassSeats"] . "></td></tr>";}
  55.  
  56. if($row["BusinessClassSeats"] != NULL && $row["BusinessClassSeats"] != 0){
  57. echo '<tr><td class="forms">Business Class Seats:</td><td><input type="text" id="businessclassseats" name="businessclassseats" size="30" value=';
  58. echo $row["BusinessClassSeats"] . "></td></tr>";}
  59.  
  60. if($row["EconomyClassSeats"] != NULL && $row["EconomyClassSeats"] != 0){
  61. echo '<tr><td class="forms">Economy Class Seats:</td><td><input type="text" id="economyclassseats" name="economyclassseats" size="30" value=';
  62. echo $row["EconomyClassSeats"] . "></td></tr>";}
  63.  
  64. echo '<tr><td><input id="editaircraft" type="submit" value="Edit Aircraft"></td></tr>';
  65.  
  66. }
  67. echo "</table>";
  68. ?>
  69.  
  70. </form>

y el edit_aircraft_process.php

Código PHP: 
Ver original
  1. <?php
  2. include('../../config.php');
  3.  
  4. $icao = $_POST['icao'];
  5.  
  6. $name = $_POST['name'];
  7.  
  8. $weightempty = $_POST['weightempty'];
  9.  
  10. $weightfull = $_POST['weightfull'];
  11.  
  12. $cargofull = $_POST['cargofull'];
  13.  
  14. $cruisespeed = $_POST['cruisespeed'];
  15.  
  16. $range = $_POST['range'];
  17.  
  18. $price = $_POST['price'];
  19.  
  20. $firstclassseats = $_POST['firstclassseats'];
  21.  
  22. $businessclassseats = $_POST['businessclassseats'];
  23.  
  24. $economyclassseats = $_POST['economyclassseats'];
  25.  
  26.  
  27.     $query = "UPDATE aircrafts SET ICAO='$icao', Name='$name', WeightEmpty='$weightempty', WeightFull='$weightfull', CargoFull='$cargofull', CruiseSpeed='$cruisespeed', `Range`='$range', Price='$price', FirstClassSeats='$firstclassseats', BusinessClassSeats='$businessclassseats', EconomyClassSeats='$economyclassseats' WHERE ICAO='$icao'";
  28.  
  29.     $error = '<div class="ui-widget">
  30.                 <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
  31.                 <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
  32.                 <strong>An error has ocurred!</strong></p>
  33.                 </div>
  34.             </div>';
  35.  
  36.     mysql_query($query) or die($error);
  37.     echo $icao;
  38.     mysql_close();
  39.  
  40. ?>
  41. <div class="ui-widget">
  42.     <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
  43.         <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
  44.         <strong>Aircraft added correctly!</strong></p>
  45.     </div>
  46. </div>

El problema es que las variables con las que hago el UPDATE llegan con el valor 0 al edit_aircraft_process.php y eso es incorrecto. Por eso no edita nada.

PD: Acabo de descubrir que el error está en la función edit. El problema es que necesito esta función para obtener un valor y poder modificar los datos que cojo de la base de datos con ese valor.
Última edición por carlosuc99; 19/01/2013 a las 10:03
  #2 (permalink)  
Antiguo 19/01/2013, 12:59
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 7 meses
Puntos: 5
Exclamación Respuesta: Problema con FORM para editar AJAX
Vale, el problema está en que si realizo la función edit luego el Javascript no funciona, por lo que no es capaz de obtener los resultados con esto:

Código Javascript: 
Ver original
  1. var icao = document.getElementById('icao').value

Supongo que tendré que cambiar la función de AJAX para que se pueda leer el Javascript. Alguien sabe como lo debo hacer?
  #3 (permalink)  
Antiguo 19/01/2013, 15:24
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 7 meses
Puntos: 5
Exclamación Respuesta: Problema con FORM para editar AJAX
Vale, lógico, no se puede ejecutar Javascript dentro de un DOM. Cómo lo puedo solucionar?
  #4 (permalink)  
Antiguo 19/01/2013, 17:19
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 8 meses
Puntos: 834
Respuesta: Problema con FORM para editar AJAX
carlosuc99, te recomiendo que en este foro postees html, css y javascript: obtendrás mucha más ayuda ya que los que conocemos php muy probablemente no tengamos ganas de imaginar cuál será la salida luego de procesado el script en el servidor, y los que no conocen php difícilmente puedan ayudarte.
  #5 (permalink)  
Antiguo 20/01/2013, 04:36
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 7 meses
Puntos: 5
Exclamación Respuesta: Problema con FORM para editar AJAX
Código Javascript: 
Ver original
  1. <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="outline: 0px; z-index: 1012; position: absolute; height: auto; width: 425px; top: 119px; left: 424px; display: block;" tabindex="-1" role="dialog" aria-labelledby="ui-id-3"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-3" class="ui-dialog-title">&nbsp;</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div id="editaircraftdialog" style="width: auto; min-height: 100px; height: auto;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0"><form action="javascript:editForm();" method="post" enctype="application/x-www-form-urlencoded"> 
  2. <table border="0"><tbody><tr><td class="forms">ICAO:</td><td><input type="text" id="icao" name="icao" size="30" value="B787"></td></tr><tr><td class="forms">Name:</td><td><input type="text" id="name" name="name" size="30" value="B787-900"></td></tr><tr><td class="forms">Weight Empty:</td><td><input type="text" id="weightempty" name="weightempty" size="30" value="32767"></td></tr><tr><td class="forms">Weight Full:</td><td><input type="text" id="weightfull" name="weightfull" size="30" value="32767"></td></tr><tr><td class="forms">Cargo Full:</td><td><input type="text" id="cargofull" name="cargofull" size="30" value="32767"></td></tr><tr><td class="forms">Cruise Speed:</td><td><input type="text" id="cruisespeed" name="cruisespeed" size="30" value="390"></td></tr><tr><td class="forms">Range:</td><td><input type="text" id="range" name="range" size="30" value="90000"></td></tr><tr><td class="forms">Price:</td><td><input type="text" id="price" name="price" size="30" value="150000000"></td></tr><tr><td class="forms">First Class Seats:</td><td><input type="text" id="firstclassseats" name="firstclassseats" size="30" value="5"></td></tr><tr><td class="forms">Business Class Seats:</td><td><input type="text" id="businessclassseats" name="businessclassseats" size="30" value="16"></td></tr><tr><td class="forms">Economy Class Seats:</td><td><input type="text" id="economyclassseats" name="economyclassseats" size="30" value="251"></td></tr><tr><td><input id="editaircraft" type="submit" value="Edit Aircraft"></td></tr></tbody></table>
  3. </form>
  4.  
  5. </div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1000; display: none;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div></div>

Ese es el HTML. Es muy curioso porque no se ve el script. He probado a poner el script debajo del HTML generado pero tampoco funciona.
  #6 (permalink)  
Antiguo 20/01/2013, 13:53
 
Fecha de Ingreso: junio-2011
Mensajes: 342
Antigüedad: 13 años, 7 meses
Puntos: 5
Respuesta: Problema con FORM para editar AJAX
Arreglado con getElementByName funciona!

Etiquetas: ajax, html, input, jquery, js, php, variables
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 22:35.