jQuery UI Diálogo modal solo centrado en SEGUNDA carga (contenido del archivo externo)?

El archivo que estoy cargando en el cuadro de diálogo modal puede variar en altura. Cuando se abre el primer enlace, la parte superior del cuadro de diálogo se centra horizontalmente (lo que significa que el cuadro de diálogo está demasiado bajo). Después de cerrar esto y volver a abrirlo, ya sea con el mismo botón de edición o uno diferente, la posición es mejor.jQuery UI Diálogo modal solo centrado en SEGUNDA carga (contenido del archivo externo)?

Parece que siempre está un paso atrás: la primera carga no puede determinar el ancho/alto del archivo que se está cargando, y en una carga posterior del mismo archivo, se posiciona perfectamente.

estoy usando el siguiente código como una edición modal para una tabla de datos:

$(".editMe").button({ 
    icons: { 
     primary: 'ui-icon-document' 
    }, 
    text: false 
}).click(function() { 
    var eventLink = $(this).attr("name"); 
    var dialogOpts = { 
     title: "Make Modifications or Delete This Event", 
     modal: true, 
     autoOpen: false, 
     height: "auto", 
     width: "auto", 
     open: function() { 
      //The height of the file below can vary, and in the 
      //JS Bin environment the dialog loads just fine blank 
      $("#modify").load("themes_edit.asp?id=" + eventLink); 
     }, 
     close: function() { 
      oTable.fnDraw(); 
     } 
    }; 
    $("#modify").dialog(dialogOpts).dialog("open"); 
    return false; 
});

Y aquí hay algo de HTML muestra (aunque el archivo cargado en #modify no está online). También configuré esto en JS Bin.

<html> 
    <head> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
     <button class="editMe" name="2810">edit</button> 
     <button class="editMe" name="2811">edit</button> 
     <button class="editMe" name="2812">edit</button> 
     <button class="editMe" name="2813">edit</button> 
     <div id="modify"></div> 
    </body> 
</html>

Fuente

2010-07-07 Paul

La 'un paso detrás 'será porque en su evento de diálogo abierto usted intenta cargar los datos. Entonces, cuando el diálogo muestra que mostrará el contenido anterior y de repente aparecerá el nuevo contenido.

Una forma de abordar esto es abrir el cuadro de diálogo pero primero borre el contenido existente y muestre un gif de carga mientras espera que la llamada ajax responda con los datos, que luego carga en el cuadro de diálogo.

NB Si usted está preocupado por el tirón de la pantalla cuando el diálogo se redimensiona a continuación, se puede poner la respuesta Ajax en un div que se coloca fuera de la pantalla a continuación, obtener las dimensiones, a continuación, animar muy bien el cambio de tamaño del cuadro de diálogo, mientras que la decoloración de el nuevo contenido.

var dialogOpts = { 
     title: "Make Modifications or Delete This Event", 
     modal: true, 
     autoOpen: false, 
     height: "auto", 
     width: "auto", 
     close: function() { 
      oTable.fnDraw(); 
     } 
}; 

var $editDialog = $('#modify').dialog(dialogOpts); 

$(".editMe").button({ 
    icons: { 
     primary: 'ui-icon-document' 
    }, 
    text: false 
}).click(function() { 

    var eventLink = $(this).attr("name"); 

    //clear existing dialog content and show an ajax loader 
    $editDialog.html('<div class="loading" />'); 

    //show the dialog 
    $editDialog.dialog("open"); 

    //get dynamic content and load it into the dialog and resize 
    $.get("themes_edit.asp?id=" + eventLink, function(response){ 

     //fade out ajax loader 
     $editDialog.find('div.loading').fadeOut(500, function(){ 

       $editDialog.html(response) 
         .dialog('option', 'position', 'center'); 

     }); 

    }); 

    return false; 

});

Fuente

2010-07-08 00:02:46 redsquare

Esto haría sin embargo, agregue un retraso de medio segundo innecesario a cada diálogo, no lo recomendaría para la mayoría de las aplicaciones, siempre visualice los datos lo antes posible, haga que la experiencia sea lo más rápida posible. –

@NickCraver El usuario no se daría cuenta, ya que actúa mucho más suave que el aspecto de bofetada rápida, especialmente porque la apertura del diálogo ui no es compatible con la animación abrir/cerrar x-browser + la operación menciona su disgusto por el parpadeo de las cosas;) – redsquare

el diálogo en sí mismo sería eso, recuerde que su solución aún adquirirá un nuevo tamaño y luego se desvanecerá (un retraso * después de * que se cargue, esa es la parte innecesaria, esta debería ser una duración mucho más corta si se usa), para mí esta combinación es más discordante que simplemente mostrar el contenido en el tamaño/posición correcta originalmente. - Para su edición: encuentro que los efectos funcionan bien en el navegador cruzado, por ejemplo, prefiero soltar para ocultar el diálogo. ¿Tienes otros problemas? –

Puede desencadenar una re-central una vez se ha cargado el contenido (lo que se conoce el tamaño), así:

var dialogOpts = { 
    title: "Make Modifications or Delete This Event", 
    modal: true, 
    autoOpen: false, 
    height: "auto", 
    width: "auto", 
    open: function() { 
     $("#modify").load("themes_edit.asp?id=" + eventLink, function() { 
      $(this).dialog('option', 'position', 'center'); 
     }); 
    }, 
    close: function() { 
     oTable.fnDraw(); 
    } 
};

Esto se utiliza para la devolución de llamada y .load() establece el position option, que desencadena un recentrado en el momento apropiado ... que es tan pronto como sabe cuál es el tamaño correcto.

Como nota al margen, ya que va a crear y luego abrir el diálogo, puede eliminar tanto la propiedad autoOpen: false, y .dialog("open"), el comportamiento predeterminado es abrir de inmediato :)

Fuente

2010-07-07 23:48:26

¡Gracias! en realidad, probé ese método antes, pero no me gustó el parpadeo del tamaño ¿Puede el diálogo estar oculto hasta después de la función de cambiar el tamaño abierto? – Paul

@Paul - Se puede ajustar toda la llamada '.dialog()' en '.load () 'devolución de llamada, en lugar de que' .load() 'esté dentro de la función abierta ... pero el diálogo parecería retrasarse para los usuarios, una imagen de carga sería un enfoque mejor/más informativo, creo. –

No estoy seguro de si me falta algo, pero así es como lo hice. Tengo un div dentro del cuadro de diálogo con una ID, cuando quiero abrir el cuadro de diálogo ejecuto una función que primero carga el contenido en el div dentro del cuadro de diálogo, luego, en la carga completa, abro el cuadro de diálogo. (por ejemplo: $ ("# foo"). load ("/ filepath.html", function() {$ ("# diálogo"). dialog ("abrir");});

Fuente

2012-08-11 01:32:23 Migs

jQuery UI Diálogo modal solo centrado en SEGUNDA carga (contenido del archivo externo)?

Respuesta

Cuestiones relacionadas