dialogo en jquery, problemas al abrirlo reiteradas veces

Lucieta86 · #1 (**permalink**) 21/05/2012, 06:38

Hola chicos,

Tengo un formulario en un script que se abre con ajax, este le pasa todos los valores por post, y muestra un dialogo.

El problema lo tengo cuando abro el formulario en reiteradas veces, ya que este me sigue manteniendo los valores anteriores siempre, es decir que no actualiza su valor.

He probado a quitar el código del dialogo, de modo que se abriera como una página nueva y si recoge bien los valores, y los actualiza con cada llamada, de modo que el problema reside en el código javascript del dialogo.

Os dejo el código:

Código HTML:

Ver original<!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>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
 
<?php
require "config.php";
require "connect_db.php";
require "functions.php";
?> 
 
<script type="text/javascript">
 
$(function(){
    $( "#dialog-form" ).dialog( "destroy" );
        
    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 600,
        width: 350,
        modal: true,
        buttons: {
            "Realizar Reserva": function() {
                $(this).dialog( "close" );
                
            },
            "Cancelar": function() {
                $( this ).dialog( "close" );
                
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });
    
        $( "#dialog-form" ).dialog( "open" );
        
});
</script>
    
<style type="text/css">
input.text, textarea, select  { margin-bottom:12px; width:90%; padding: .5em; }
fieldset { padding:10; border: 1px solid #9CF; border-radius:15px; margin-top:25px; width:83%; }
h1 { font-size: 1.2em; margin: .6em 0; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>    
    
</head>
 
<body>
<?php
//Recoge los valores que necesita
 
$feInicio=$_REQUEST["fIni"];
$feFin=$_REQUEST["fFin"];
$opcAulasRes=$_REQUEST["seleAulas"];
 
//Obtener los datos de los responsables
$datos_responsable=get_responsable();
$resp_list="";
    for ($i=0;$i<sizeof($datos_responsable);$i++)
    {
        $resp_list.= "<option value=\"".$datos_responsable[$i][1]. "\"";
        $resp_list.=">".$datos_responsable[$i][0]."</option>". chr(10);
    } 
 
 
//Pasar a array las aulas seleccionadas
$aulasRes=explode(',', $opcAulasRes);
 
?>
<form>
<div id="dialog-form" title="FORMULARIO RESERVA">
 
<fieldset>
        <legend>Datos selección</legend>
        <label for="fyhini">Fecha inicio: <?php echo $feInicio;?></label> <br/><br/>
        <label for="fyhfin">Fecha fin: <?php echo $feFin;?></label> <br/><br/>
        <label for="espacioSelec">Espacio Seleccionado: 
        
        <?php 
        //echo "VALORES".$opcAulasRes."-".$fechaInicio."-".$fechaFin;
        //die();
        for($aux=0; $aux<count($aulasRes); $aux++){
            if($aux==0) echo $aulasRes[$aux];
            else echo " - ".$aulasRes[$aux];
            }
        ?> 
        
        </label> 
    </fieldset>
        <br/><br/>
        <label for="name">Responsable*</label> <br/>
        <select id="name" class="text ui-widget-content ui-corner-all" name="name">
        <option  value:"-1" >---Seleccione responsable---</option><?php echo $resp_list; ?></select>
        <br/>
        <label for="email">Email*</label><br/>
        <input type="text" name="mailResp" id="mailResp" value="" class="text ui-widget-content ui-corner-all" />
        <br/>
        <input type="checkbox" id="enviarMail" name="enviarMail" value="mail"/> Enviar email
        <br/><br/>
        <label for="desc">Descripcion*</label>
        <input type="text" name="desc" id="desc" value="" class="text ui-widget-content ui-corner-all" />
         <br/>
        <label for="obser">Observaciones</label>
        <textarea name="obser" id="obser" value="" class="text ui-widget-content ui-corner-all" />
        <br/>
        <label for="comentario">* Campos obligatorios</label>
    
</div>
</form>   
 
</body>
</html>

Alguna idea?

Gracias

Lucieta86 · #2 (**permalink**) 31/05/2012, 03:30

Finalmete solucione el problema.

Dejo aquí la solución por si alguien mas la necesita:

En el close: function() añadir $(this).remove(); y en la funcion de dentro del ajax, tambien.

Pego el código final del código del dialogo:

Código Javascript:

Ver original$( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 600,
        width: 350,
        modal: true,
        buttons: {
            "Realizar Reserva": function() {
                
                //Llamar a otro formulario              
                var param="";
                
                var fIni= $("#fyhini").text();
                var fFin= $("#fyhfin").text();
                var aulas = $("#espacioSelec").text();
                var resp=$("#name").val();
                
                
                    param="fIni="+fIni+"&fFin="+fFin+"&aulas="+aulas+"&resp="+resp; 
                
                    $.ajax({
                        type: "POST",
                        url: "infoReserva.php",
                        data: param,
                        success: function(datos){
                            $(this).remove();
                            $("#cargarForm").html(datos);
                        }
                    });
                            
                    $( this ).dialog( "close" );
                        
            },
            "Cancelar": function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            $(this).remove();
 
        }
        });

Saludos