[SOLUCIONADO] duda con un ejemplo jqueryUI

wilmer30 · #1 (**permalink**) 03/06/2013, 15:55

Hola:

Deseo aplicar los ejemplos del JQueryUI, en mi proyecto pero me encuentro con este problema, modifiqué el ejemplo de http://jqueryui.com/dialog/#animated así:

Código HTML:

Ver original<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            'Guardar': function(){
                alert('funciona');
                $.post("animated_reformuled.html",function(){
                        $("#contenido").load("#wtable");
                    })
                $( this ).dialog( "close" );
            },
            Cancel: function(){
                $(this).dialog("close");
            }
        }
    });
 
    $( "#opener" )
        .click(function() {
        $( "#dialog" ).load("anima_help.html #contenido").dialog( "open" );
    });
});
</script>
</head>
<body>
<div id="contenido">
    <div id="dialog" title="Basic dialog"></div>
    <div id="wtable">
        <button id="opener">Open Dialog</button>
    </div>
</div>
</body>
</html>

el anima_help.html es asi:

Código HTML:

Ver original<div id="contenido">
    <div id="wtable">
<p class="validateTips">All form fields are required.</p>
bla bla bla
</div>
</div>

el problema es que cuando intento abrir el dialogo por segunda ves simplemente no abre, en la primera ves me aparece un warning

Cita:

El uso de getAttributeNode() está desaprobado. Use en su lugar getAttribute().
[Parar en este error]
var attr = elem.getAttributeNode("type");

en la segunda ves que pulso el boton me da este error:

Cita:

Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
[Parar en este error]

throw new Error( msg );

Alguien me podria ayudar por favor?

fhederico · #2 (**permalink**) 04/06/2013, 11:22

Hola, consulta,

Porque no dejas el HTML, del dialogo en el mismo formulario pero oculto simplemente?

Lo otro, te recomiendo que el Dialog, lo instancies en el ready

Código:

var cuadroDialog = ""; //Queda global

$(document).ready(function()
			{
				cuadroDialog = $("#dialog-modal").dialog({
					autoOpen: false,
					width: 450,
					height: 280,
					modal: true,
					buttons: {
						"cerrar": function() {
							cerrar();
						}
					}
				});
});

function cerrar()
{
      //Lo puedes cerrar desde cualquier otra funcion
     cuadroDialog.dialog('close');
}


//Cargamos los datos en el Dialog
$("#dialog-modal").html('HOLAAA');
//Abrimos el cuador de dialogo desde cualquier funcion
cuadroDialog.dialog('open');

wilmer30 · #3 (**permalink**) 04/06/2013, 12:29

muchas gracias por contestar.

No puedo dejarlo oculto por que trabajo con ZF, estoy obligado a extraer trozos de diferentes paginas para trabajar en todo el proyecto, pero creo que resolvi el problema,

Código HTML:

Ver original<script>
$(function() {
    var name    = $( '#nombre' ),
        lastname = $( '#apellido' );
 
    $( "#dialog" ).dialog({
        autoOpen: false,
        modal: true,
        open: function(){
            $("#dialog").load("form.html #formu");
        },
        buttons: {
            "Guardar" : function(){
            alert($("#nombre").val());
                $.post("animated_reformuled.html #cont",function(){
                    //$( "#cont" ).load("animated_reformuled.html #opener");
                    $(location).attr("href","animated_reformuled.html");
                });
                $(this).dialog("close");
            },
            Cancel: function(){
                $(this).dialog( "close" );
            }
        }
    });
 
    $( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
    });
});
</script>
</head>
<body>
<div id="cont">
    <div id="dialog" title="Basic dialog"></div>
    <button id="opener">Open Dialog</button>
</div>
</div>
</body>

y el html al que llamo form.html es:

Código HTML:

Ver original<form id="formu">
Nombres: <input type="text" name="nombre" value="" id="nombre"></br>
apellido: <input type="text" name="apellido" value="" id="apellido"></br>
</form>

bueno obtengo los datos pero aun tengo un pequeño problema, si ven al enviar por post tengo dos sentencias, la primera realizo un load() del area que quiero que se refresque, pero al usar dicha sentencia me la opcion de mosatar el dialogo solo por una ves, a la segunda que deseo abrir el mismo dialogo no abre nada.
solucione esto con recargar la misma pñagina, quisisera saber si existe otra manera.

wilmer30 · #4 (**permalink**) 04/06/2013, 13:24

No entieneo bien, en tu ejemplo

Cita:

//Cargamos los datos en el Dialog
$("#dialog-modal").html('HOLAAA');

estas llamando a otr página?

fhederico · #5 (**permalink**) 04/06/2013, 14:09

Hola,

No, no estoy llamando a otra pagina, en mi pagina HTML, tengo un div asi

Código:

<div id="dialog-modal" title="TITULO DEL DIALOG"></div>

Como te daras cuenta no tiene nada, y mediante el atributo "html", lo lleno

Código:

$("#dialog-modal").html('HOLAAA');

O tambien podrai ser

Código:

$("#dialog-modal").html('<table id="datosCandCitado">'
+ '<tr><th colspan="2">NOMBRE</th><td>:</td><td colspan="2">' + nombre + '</td></tr>'
+ '<tr><th colspan="2">TITULO</th><td>:</td><td colspan="2">'+ titulo + '</td></tr>'
+ '<tr><th colspan="2">CARGO</th><td>:</td><td colspan="2">'+ cargo + '</td></tr>'
+ '<tr><td colspan="5">&nbsp;</td></tr></table>';

Me parece extraño lo que me mencionas, de que no puedas incluirlo.

Saludos

wilmer30 · #6 (**permalink**) 04/06/2013, 14:22

Gracias fhederico, por tus aclaraciones, debo resolver el problema del load(), pero lo hare con otro post puesto que lo que a este post se refiere ya fue resuelto

fhederico · #7 (**permalink**) 04/06/2013, 18:43

Oka estimado,

Favor marcar como "Solucionado".

Saludos