Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Select + Insert

 Estas en el tema de Select + Insert en el foro de Frameworks JS en Foros del Web. Hola a todos. Os cuento, tengo un select dónde hay un listado de paises (se hace mediante una función php, y los valores los recoge ...
  #1 (permalink)  
Antiguo 06/01/2010, 09:09
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 4 meses
Puntos: 0
Select + Insert
Hola a todos.
Os cuento, tengo un select dónde hay un listado de paises (se hace mediante una función php, y los valores los recoge de la base de datos). Una de las opciones es "agregar nuevo". Esta opcion hace aparecer un input text oculto que nos permite agregar un nuevo país.

El botón que deja añadir el país hace un insert a la base de datos, y después recarga el div dónde se encuentra el select.

El caso es, que aún refrescando el div después de hacer el insert, no aparece la nueva opción hasta recargar la página entera.

Puedo suponer que al ser asíncrono la recarga del div se hace antes de que el insert sea efectivo, pero desconozco cómo hacer que "se espere".

Código Javascript: 
Ver original
  1. function inesrtarPais(){
  2.     var pais = document.getElementById("paisNuevo").value; 
  3.     ajax = getXMLHttpRequest();
  4.     ajax.onreadystatechange = function() {
  5.         if(ajax.readyState == 4) {
  6.             cont.innerHTML = ajax.responseText;
  7.         }
  8.     }
  9.     ajax.open('GET', 'funciones/insertarPais.php?paisNuevo=' +pais , false);
  10.     ajax.send(null);                            
  11.     var valido=ajax.responseText;
  12.     alert(valido);
  13.     if (valido=="OK "){// "OK" es la respuesta de la función insertPais.php
  14.         $("#insertar_pais").hide();
  15.         $("#zonaPais").html("<?php menu_pais() ?>");
  16.                                         
  17.     }
  18. }
  #2 (permalink)  
Antiguo 06/01/2010, 09:20
Avatar de Vun
Vun
Colaborador
  
Fecha de Ingreso: agosto-2009
Ubicación: Benalmádena, España
Mensajes: 2.265
Antigüedad: 15 años, 3 meses
Puntos: 150
Respuesta: Select + Insert
Aqui encontre un metodo en javascript, en este caso para 5 segundos:

setTimeout( "terminar();", 5000);
function terminar() { }
  #3 (permalink)  
Antiguo 06/01/2010, 09:24
Avatar de bacdavi  
Fecha de Ingreso: junio-2006
Ubicación: http://localhost/
Mensajes: 351
Antigüedad: 18 años, 5 meses
Puntos: 7
Respuesta: Select + Insert
y si no te funciona lo que te han indicado con ajax proba con php:

Código PHP:
header ("Expires: Fri, 14 Mar 1980 20:53:00 GMT"); //la pagina expira en fecha pasada
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); //ultima actualizacion ahora cuando la cargamos
header ("Cache-Control: no-cache, must-revalidate"); //no guardar en CACHE
header ("Pragma: no-cache"); //PARANOIA, NO GUARDAR EN CACHE 
Nos comentas si te funciona!
  #4 (permalink)  
Antiguo 06/01/2010, 09:29
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Select + Insert
Esperé los 5 segundos con javascript y aún así no se carga correctamente...
Quizá el problema esté en caché (como se ha llamado anteriormente a la función, puede que tenga la respuesta cargada...)

bacdavi, no entiendo dónde poner el código php...


No hay alguna opcion de ajax para realizar una opcion onCallBack?
  #5 (permalink)  
Antiguo 06/01/2010, 09:35
Avatar de bacdavi  
Fecha de Ingreso: junio-2006
Ubicación: http://localhost/
Mensajes: 351
Antigüedad: 18 años, 5 meses
Puntos: 7
Respuesta: Select + Insert
eso ponelo en la primera linea de tu archivo.php si insertas los datos en otro arhivo.php tambien pones ese codigo dentro de tags <?php ?> y me comentas si te funciona!
  #6 (permalink)  
Antiguo 06/01/2010, 09:47
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Select + Insert
No da resultado..

vi este código por el foro:
Código Javascript: 
Ver original
  1. $.post('in.php',{nombre: 've'}, callback:function(data){
  2.   if(data == 'true'){
  3.     alert("todo ok");
  4.   }else{
  5.     alert("error");
  6.   } 
  7. });

Lo he intentado adaptar a mi código pero no me funciona ya que me da error de javascript

Código Javascript: 
Ver original
  1. $.POST('funciones/insertarPais.php', {paisNuevo: pais}, callback:function(data){
  2.                                 $("#insertar_pais").hide();
  3.                                 $("#zonaPais").html("<?php menu_pais() ?>");
  4.                             });
  #7 (permalink)  
Antiguo 06/01/2010, 09:51
Avatar de bacdavi  
Fecha de Ingreso: junio-2006
Ubicación: http://localhost/
Mensajes: 351
Antigüedad: 18 años, 5 meses
Puntos: 7
Respuesta: Select + Insert
eso es porque necesitas la librería jquery!
  #8 (permalink)  
Antiguo 06/01/2010, 09:52
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Select + Insert
la tengo, la tengo! el error segun firebug es:
'missing ) after argument list'
  #9 (permalink)  
Antiguo 06/01/2010, 09:54
Avatar de bacdavi  
Fecha de Ingreso: junio-2006
Ubicación: http://localhost/
Mensajes: 351
Antigüedad: 18 años, 5 meses
Puntos: 7
Respuesta: Select + Insert
tranquilo, tranquilo!!!
a ver, probaste el codigo php en tus archivos php??
  #10 (permalink)  
Antiguo 06/01/2010, 10:00
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Select + Insert
si, lo puse al principio de todo, y nada. aún así el error javascript no lo entiendo...
  #11 (permalink)  
Antiguo 06/01/2010, 10:02
Avatar de bacdavi  
Fecha de Ingreso: junio-2006
Ubicación: http://localhost/
Mensajes: 351
Antigüedad: 18 años, 5 meses
Puntos: 7
Respuesta: Select + Insert
a ver pone todo tu html, es decir el codigo fuente que muestra tu navegador!
otra cosa, que navegador estas utilizando??
  #12 (permalink)  
Antiguo 06/01/2010, 10:05
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Select + Insert
Estoy usando Firefox.
ahí va mi pastelada:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head lang="" xml:lang="">
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6. <title>PELITECA</title>
  7. <link  rel="stylesheet" type="text/css" href="css/basic.css" />
  8. <script type="text/javascript" src="Javascript/jquery-1.3.2.js"></script> 
  9. <script type="text/javascript" src="Javascript/funciones.js"></script> 
  10.  
  11.  
  12. </head>
  13. <body>
  14.     <div id="cabezera">
  15.     <div class="opaco" style="margin-top: 10px; margin-left: 35px;">
  16.  
  17.         <img width="25%;" title="PELITECA;" src="Imagenes/PELITECA.gif"  alt="PELITECA"/> 
  18.     </div>
  19.     <div class="transparente" style="border-bottom: solid 1px;">
  20.     </div>
  21. </div> 
  22.     <html xmlns="http://www.w3.org/1999/xhtml">
  23. <div id="menu">
  24.     <div class="opaco" style="padding-left:40px; width: 200px; float: left; height: 600px;">
  25.         <div class="link mt10"><a href="#;" title="Introducir película">NUEVA PELÍCULA</a></div>
  26.         <div class="link mt10"><a href="#;" title="Lista de películas">LISTADO DE PELÍCULAS</a></div>
  27.  
  28.     </div>
  29.     <div class="transparente" style="width: 20%; float: left; height: 600px; border-right: solid 1px;"></div>
  30. </div> 
  31.     <div id="contenido">
  32.         <div style="width: 79.9%; float: left; height: 600px;">
  33.             <div id="subtitulo" style="text-align:center; width:100%; text-indent:inherit" >
  34.                 <h1>Introducir Nueva Película<h1>
  35.             </div>
  36.             <div id="formulario" style="background-color:#CCCCCC; width:90%; margin-left:60px;">
  37.  
  38.                 <div style="padding:10px;">         
  39.                     <form id="introducir"  method="post" action="funciones/insertarPeli.php">
  40.                         <div class="filaForm">
  41.                             <div> <label for="titulo"> Título: </label>  </div>
  42.                             <div> <input type="text" maxlength="200" name="titulo"/> </div>
  43.                         </div>
  44.  
  45.                         <div class="filaForm">
  46.                             <div> <label for="anyo"> Año: </label>  </div>
  47.                             <div> <input type="text" maxlength="4" id="anyo" name="anyo"/> </div>
  48.                         </div>
  49.                         <div class="filaForm">
  50.                             <div> <label for="duracion"> Duración: </label>  </div>
  51.  
  52.                             <div> <input type="text" maxlength="4" id="duracion" name="duracion"/> </div>&nbsp;minutos
  53.                         </div>
  54.                         <div  class="filaForm">
  55.                             <div> <label for="pais"> País: </label>  </div>
  56.                             <div id="zonaPais"> 
  57.                                 <select style='float:left;'id= 'pais' name='pais' onchange='javascript:insertar_nuevo_pais()'><option value='-'>Escoje una opción</option><option value='00'>- Añadir otro país -</option><option selected value='11'>BACABURRRA<option selected value='12'>BACABURRRA2<option selected value='13'>BACABURRRA3<option selected value='14'>BACABURRRA4<option selected value='15'>BACABURRRA5<option selected value='17'>BACABURRRA6<option selected value='16'>BACABURRRA6<option selected value='4'>Catalunya<option selected value='3'>España<option selected value='6'>Francia<option selected value='8'>Francia<option selected value='7'>Francia<option selected value='5'>Italia<option selected value='9'>nexus<option selected value='1'>Portugal<option selected value='2'>USA<option selected value='10'>vivivivivivi</select>                          </div>  
  58.                             <div id="insertar_pais" style="margin-left:5px;float:left;display:none; width: 200px;"> 
  59.                                 <input type="text" id="paisNuevo" name="paisNuevo" />
  60.  
  61.                                 <button style= "float:none;margin-left:5px;" type="button" onclick="javascript:inesrtarPais()"> + </button>
  62.                             </div>
  63.                         </div>
  64.                         
  65.                         <script type="text/javascript">
  66.                         function insertar_nuevo_pais(){
  67.                                 if($("#pais").val()==00){
  68.                                     $("#insertar_pais").show();
  69.                                     $("#pais option:eq(0)").attr("selected", "selected");
  70.                                 }else {
  71.                                     $("#insertar_pais").hide();
  72.                                 }
  73.                             }
  74.                             
  75.                         function inesrtarPais(){
  76.                             var pais = document.getElementById("paisNuevo").value; // aqui esta la var nombre_div
  77.                             ajax = getXMLHttpRequest();
  78.                             ajax.onreadystatechange = function() {
  79.                                 if(ajax.readyState == 4) {
  80.                                     cont.innerHTML = ajax.responseText;
  81.                                 }
  82.                             }
  83.                             //ajax.open('GET', 'funciones/insertarPais.php?paisNuevo=' +pais , false);
  84.                             //ajax.send(null);      
  85.                             $.post('funciones/insertarPais.php', {'paisNuevo': pais}, callback:function(){
  86.                                 regarga();
  87.                                 
  88.                             });
  89.                                             
  90.                             //var valido=ajax.responseText;
  91.                             
  92.                         //  if (valido=="OK "){
  93.                                 
  94.                                 
  95.                                                                 
  96.                             //  }
  97.                                 
  98.                             /*  var getNuevoCombo=$("#paisNuevo").val();    
  99.                                 getNuevoCombo="<option value='XX' selected='true'>"+getNuevoCombo+"</option>";
  100.                                 $("#pais").append(getNuevoCombo);
  101.                                 $("#insertar_pais").hide();
  102.  
  103.                                 */}
  104.                             function recarga()  {
  105.                             $("#insertar_pais").hide();
  106.                                 $("#zonaPais").html("<select style='float:left;'id= 'pais' name='pais' onchange='javascript:insertar_nuevo_pais()'><option value='-'>Escoje una opción</option><option value='00'>- Añadir otro país -</option><option selected value='11'>BACABURRRA<option selected value='12'>BACABURRRA2<option selected value='13'>BACABURRRA3<option selected value='14'>BACABURRRA4<option selected value='15'>BACABURRRA5<option selected value='17'>BACABURRRA6<option selected value='16'>BACABURRRA6<option selected value='4'>Catalunya<option selected value='3'>España<option selected value='6'>Francia<option selected value='8'>Francia<option selected value='7'>Francia<option selected value='5'>Italia<option selected value='9'>nexus<option selected value='1'>Portugal<option selected value='2'>USA<option selected value='10'>vivivivivivi</select>");
  107.                                 
  108.                                 }
  109.                             
  110.                         </script>
  111.                         
  112.                         
  113.                         <button type="submit" value="Enviar"> Enviar </button>
  114.                         
  115.                     </form>         
  116.                 </div>
  117.  
  118.             </div>
  119.         </div>      
  120.     </div>  
  121. </body>
  122. </html>
  #13 (permalink)  
Antiguo 06/01/2010, 10:12
Avatar de bacdavi  
Fecha de Ingreso: junio-2006
Ubicación: http://localhost/
Mensajes: 351
Antigüedad: 18 años, 5 meses
Puntos: 7
Respuesta: Select + Insert
veo que en la linea 22 tenes declarado un html tag de nuevo,
cual es tu funcion recarga() en js?
  #14 (permalink)  
Antiguo 06/01/2010, 10:15
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Select + Insert
ya he eliminado el <html...

la función recarga está abajo:
Código Javascript: 
Ver original
  1. function recarga()  {
  2.     $("#insertar_pais").hide();
  3.     $("#zonaPais").html("<select style='float:left;'id= 'pais' name='pais' onchange='javascript:insertar_nuevo_pais()'><option value='-'>Escoje una opción</option><option value='00'>- Añadir otro país -</option><option selected value='11'>BACABURRRA<option selected value='12'>BACABURRRA2<option selected value='13'>BACABURRRA3<option selected value='14'>BACABURRRA4<option selected value='15'>BACABURRRA5<option selected value='17'>BACABURRRA6<option selected value='16'>BACABURRRA6<option selected value='4'>Catalunya<option selected value='3'>España<option selected value='6'>Francia<option selected value='8'>Francia<option selected value='7'>Francia<option selected value='5'>Italia<option selected value='9'>nexus<option selected value='1'>Portugal<option selected value='2'>USA<option selected value='10'>vivivivivivi</select>");
  4. }
  #15 (permalink)  
Antiguo 06/01/2010, 10:15
Avatar de GatorV
$this->role('moderador');
  
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años, 5 meses
Puntos: 2135
Tema movido desde PHP a AJAX
  #16 (permalink)  
Antiguo 06/01/2010, 10:34
 
Fecha de Ingreso: julio-2008
Mensajes: 21
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Select + Insert
me he dado cuenta que el error está en poner callback:function
sin eso no da error de javascript PEEEEERO sigue sin funcionar...
al final haré un refresh de la página, por cutre que quede...
  #17 (permalink)  
Antiguo 09/06/2010, 05:23
 
Fecha de Ingreso: junio-2010
Mensajes: 2
Antigüedad: 14 años, 5 meses
Puntos: 0
Respuesta: Select + Insert
Hola!, Conseguiste hacerlo funcionar? tengo el mismo problema que tu... Gracias

Etiquetas: ajax, insert, select
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

SíEste tema le ha gustado a 1 personas


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 00:16.