Como funciona jquery UI dialog()?

mayid · #1 (**permalink**) 29/10/2009, 11:17

Estuve visitando la pagina del UI:

http://jqueryui.com/demos/dialog/#modal-confirmation

E implemente las cosas como las entiendo:

Cargo jquery, ui.core, ui.draggable, etc.

Pongo el html tal como es el del ejemplo de la pagina:

Cita:

<div id="dialog" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
La foto se va a borrar!. Seguro?</p>
</div>

Llamo asi:

Cita:

$("#dialog").dialog();

Y no funciona. IE me dice "object don't support this property or method".

SoutlinK · #2 (**permalink**) 01/11/2009, 05:20

Prueba esto

Código javascript:

Ver original$("#dialog").dialog({autoOpen: true});

mayid · #3 (**permalink**) 01/11/2009, 09:25

Mil gracias por responder. A partir de leer tu respuesta, hice una pagina nueva para implementar dialog() y funcionó de la manera sencilla, aun sin autoOpen. Entonces no se porque el otro dia no anduvo en mi web, pero voy a tratar de que funcione y te cuento.

Dicho sea de pasp, recien encontre en la pagina de jquery mucha mas documentacion de la que tiene la propia ui.

mayid · #4 (**permalink**) 01/11/2009, 16:16

Me esta funcionando la ventanita, y ya incluso conecte esta interfaz a un plugin de ajax. Todo va bien navegando por ventanitas ajax.

El problema ahora es que solo puedo llamar a dialog() una solo vez. Cuando cierro la ventanita ya no puedo volver a abrirla:

Cita:

$("#llave").click(function(){
$("#dialog").html(datos).dialog({ resizable: false, draggable: false });
})

QUe sera?

Dejo link a la pagina.

guilleaer · #5 (**permalink**) 03/11/2009, 09:03

Yo lo utilizo asi.... Espero que te pueda ayudar

$(function(){
crearComportamientoDialog();
});

function crearComportamientoDialog{
$("#miDiv").dialog({
open: function(event, ui) {
},
close: function(event, ui) {
},
bgiframe: true,
autoOpen: false,
modal: true,
width: 500,
resizable: false,
draggable: false,
position: 'center',
buttons: {
'Aceptar': function() {
//lo que quieras hacer cuando se pulsa aceptar
},
'Cancelar': function() {
//hacemos lo que se quiera y cerramos el dialog
$(this).dialog('close');
}
}
});
}

function abrirDialog(){
$("#miDiv").dialog('open');
}

<input onclick="abrirDialog" ................/>

Si en las sucesivas veces ya no funciona será porque despues de una llamada ajax tienes que volver a darle el comportamiento de dialog, o bien asignar el evento de nuevo al boton. (con este ejemplo no hace falta hacer esto ultimo porque la fucion a ejecutar esta escrita en el propio boton)

Espero que sirva de algo

Suerte!

mayid · #6 (**permalink**) 03/11/2009, 09:11

Si me sirvio, gracias.

Hice un engendro: primero declaro que no es autoopen, pero seguidamente anexo una llamada .dialog('open') y ahora el boton funciona todas las veces :

$("#dialog").html(datos).dialog({ resizable: false, draggable: false, closeOnEscape: true, bgiframe: true, autoOpen: false, modal: true, position: 'center'}).dialog('open');

destor77 · #7 (**permalink**) 15/12/2009, 11:42

hola a todos,
para no abrir un nuevo tema ya que se trata del mismo jquery y efecto hago la consulta aca.
Como puedo hacer para que en mis links de mi mi aplicacion asi:

Código HTML:

Ver original<a class="delete" id="delete" href="index.php?modules=noticias&amp;opcion=borrar&amp;id=<? echo $noticia['id_noticia'];?>" title="Borrar Noticia">
                                    Borrar
                                </a>

se me abra el dialog para confirmar o no si quiero eliminar el registro y si hace click en aceptar me lo borre. Yo venia usando algo asi:

Código Javascript:

Ver original$("#dialog").dialog({
                bgiframe: true,
                autoOpen: false,
                resizable: false,
                height:140,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: {
                    'Si': function() {
                        /*var url =$('.delete').attr("href");
                        location.href=url;*/
                        return true;
                    },
                    'Cancelar': function() {
                        //$(this).dialog('close');
                        return false;
                    }
                }
            });                    
              
            $('#delete').click( function(e){
               $(this).click(function(){
                   $('#dialog').dialog('open');
                   return false;
                });                
                
            });

pero me borra siempre el primer registros por más que haga click en el segundo o en el último como puedo solucionarlo? La idea es que al hacer click en el link borrar me salga el dialog (para reemplazar el feo "alert" por defecto de js) y que me borre o no ese registro.

Desde ya muchas gracias

mayid · #8 (**permalink**) 16/12/2009, 07:29

No termino de entender el problema, pero recomiendo que si tenes mas de una funcion (borrar, etc) tengas tambien mas de un div para el dialog. Yo tuve problemas con eso de borrar al comartir un div.

Quedaria asi:

Cita:

$("#borrar").dialog({ ...

destor77 · #9 (**permalink**) 16/12/2009, 08:41

el problema esta en que si yo imprimo en un alert esta linea:

Código Javascript:

Ver originalvar url =$('.delete').attr("href");
alert(url);

me muestra la url del link al borrar, pero simpre es la misma si yo tengo estos links:

Código HTML:

Ver original<a class="delete" id="delete" href="index.php?modules=noticias&amp;opcion=borrar&amp;id=1" title="Borrar Noticia">
                                          Borrar
                                      </a>
<a class="delete" id="delete" href="index.php?modules=noticias&amp;opcion=borrar&amp;id=3" title="Borrar Noticia">
                                          Borrar
                                      </a>
<a class="delete" id="delete" href="index.php?modules=noticias&amp;opcion=borrar&amp;id=7" title="Borrar Noticia">
                                          Borrar
                                      </a>

si hago click en el primer link me sale el dialog y me eliminar el item 1, pero si hago click en cualquiera de los otros dos, me sigue queriendo borrar el link 1.
Entiendo lo que dices de no compartir un div para borrar, pero si tengo 20 links voy a tener que crear 20 divs ?

Actualmente lo tengo asi:

Código Javascript:

Ver originalfunction ask(obj){
    if (confirm("Seguro que quiere eliminarlo?"))
        return true;
    else
        return false;
}

y el html

Código HTML:

Ver original<a class="delete" id="delete2" onclick="if (ask()) window.location='index.php?modules=links&amp;opcion=borrar&amp;id=2'" href="#" title="Borrar Enlace">
 
                                    Borrar
                                </a>

como se podria reemplazar esa funcion de js por el dialog?

salu2

mayid · #10 (**permalink**) 16/12/2009, 11:38

Estas confundiendome con el html. Hiciste copy paste para publicar aqui? O es tu html original? Porque esta ok que utilices class name "delete", pero no que repitas el id, que tiene que ser unico.

Por otro lado, si cada link tuviera un id numerico unico, tu funcion podria definir el atributo sin que necesitaras repetir esto para cada item (veo que ya lo tenes resuelto, pero estoy pensando segun el codigo html original):

Cita:

index.php?modules=noticias&opcion=borrar&i d=7

Tendrias esto:

Cita:

<a class="delete" id="1" href="#" title="Borrar Noticia">
Borrar
</a>
<a class="delete" id="3" href="#" title="Borrar Noticia">
Borrar
</a>
<a class="delete" id="7" href="#" title="Borrar Noticia">
Borrar
</a>

SIendo que la funcion quedaria asi:

Cita:

var links = $(".delete");
links.each(function(){

$(this).click(function(){

ask();
window.location='index.php?modules=links&opcion=bo rrar&id=2
});

})

Quizas el origen de tu error sea el caracter & en la cadena url (de variables GET)

Cita:

&

Por que no sensillamente "&"? Quizas este todo bien con esa sintaxis, pero la desaconsejo.

Cita:

index.php?modules=noticias&opcion=borrar&id=1

anikore · #11 (**permalink**) 13/04/2011, 16:47

Amigos, mi problema era el del Dialog que solo se muestra una vez, el detalle era por el autoOpen que debe ir a false y hacer la llamada desde la funcion. Solo comento para agradecer que me ha servido su apoyo. Saludos

yo_machaquita · #12 (**permalink**) 03/08/2011, 10:59

Cita:

Iniciado por anikore

Amigos, mi problema era el del Dialog que solo se muestra una vez, el detalle era por el autoOpen que debe ir a false y hacer la llamada desde la funcion. Solo comento para agradecer que me ha servido su apoyo. Saludos

Hola,

Estoy teniendo problemas con el dialog() y creo q podrías ayudarme.

Lo que pretendo hacer es tener una lista de links y cuando pincho en uno de ellos abrir una ventana. El contenido que se mostrará en la ventana variará pero ahora mismo lo único que trato de hacer es q si pincho en uno de los links, me da igual en cual, me abra la ventana, pero sólo me la abro si pincho en el primer link.

Los links q utilizo son asi: <a href="#" id="opener">Open Dialog</a>

mi javascript es este:

<script type="text/javascript">
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "scale"
});

$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>

¿Necesito identificar de algun modo cada uno de los links?

Gracias de antemano!

mayid · #13 (**permalink**) 04/08/2011, 16:50

Me imagino que no le estas poniendo a todos los links el mismo id, no? Eso traería problemas con el uso de javascript.

yo_machaquita · #14 (**permalink**) 08/08/2011, 07:35

Cita:

Iniciado por mayid

Me imagino que no le estas poniendo a todos los links el mismo id, no? Eso traería problemas con el uso de javascript.

Hola, pues le pongo a todos lo de id="opener", con lo cual eso estaría mal, pero si le pongo distintos ids... ¿Cómo hago a la hora de llamar a esta función?

$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});

Es decir, ¿Cómo le paso el id que es en cada caso?

Estoy muy verde con javascript.

Muchas gracias.

mayid · #15 (**permalink**) 09/08/2011, 18:16

Y sabes de html? javascript nunca va en contra del html, así que tenes que no repitamos el mismo id para una misma pagina. Los id son UNICOS. Y si necesitas seleccionar un grupo, asignales un class name.

Luego, jQuery usar selectores muy similares a CSS. Por lo tanto #opener se refiere a un objeto, mientras que .opener a todos los objetos con ese class name. En fin, usa un selector por clase.

Podes documentarte sobre esto buscando un poco en la web.

Saludos!

yo_machaquita · #16 (**permalink**) 10/08/2011, 10:23

Cita:

Iniciado por mayid

Y sabes de html? javascript nunca va en contra del html, así que tenes que no repitamos el mismo id para una misma pagina. Los id son UNICOS. Y si necesitas seleccionar un grupo, asignales un class name.

Luego, jQuery usar selectores muy similares a CSS. Por lo tanto #opener se refiere a un objeto, mientras que .opener a todos los objetos con ese class name. En fin, usa un selector por clase.

Podes documentarte sobre esto buscando un poco en la web.

Saludos!

Gracias.