jQuery: cargar contenido de diálogo modal a través de Ajax

Actualmente mi Diálogo Modal es como este

       

Stuff here

jQuery( function() { jQuery("#dialog") .dialog( { bgiframe: true, autoOpen: false, height: 100, modal: true } ); jQuery('body') .bind( 'click', function(e){ if( jQuery('#dialog').dialog('isOpen') && !jQuery(e.target).is('.ui-dialog, a') && !jQuery(e.target).closest('.ui-dialog').length ){ jQuery('#dialog').dialog('close'); } } ); } ); Click to view

La div que está cargada se incluye en la misma página. ¿Cómo muevo ese div a una segunda página y cargo el contenido a través de Ajax cuando se muestra el cuadro de diálogo? ¿Y puedo reutilizar la secuencia de comandos para cargar diferentes contenidos según las necesidades?

Echa un vistazo a esta publicación de blog de Nemikor, que debe hacer lo que quieras.

http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

Básicamente, antes de llamar a ‘abrir’, primero ‘carga’ el contenido de la otra página.

 jQuery('#dialog').load('path to my page').dialog('open'); 

trata de usar este.

 $(document).ready(function(){ $.ajax({ url: "yourPageWhereToLoadData.php", success: function(data){ $("#dialog").html(data); } }); $("#dialog").dialog( { bgiframe: true, autoOpen: false, height: 100, modal: true } ); }); 
 $(function () { $('
').dialog({ modal: true, open: function () { $(this).load('Sample.htm'); }, height: 400, width: 400, title: 'Dynamically Loaded Page' }); });

http://www.devcurry.com/2010/06/load-page-dynamically-inside-jquery-ui.html

 var dialogName = '#dialog_XYZ'; $.ajax({ url: "/ajax_pages/my_page.ext", data: {....}, success: function(data) { $(dialogName ).remove(); $('BODY').append(data); $(dialogName ) .dialog(options.dialogOptions); } }); 

La solicitud Ajax carga el cuadro de diálogo, agréguelo al cuerpo de la página actual y abre el cuadro de diálogo.

Si solo quieres cargar el contenido, puedes hacer lo siguiente:

 var dialogName = '#dialog_XYZ'; $.ajax({ url: "/ajax_pages/my_page.ext", data: {....}, success: function(data) { $(dialogName).append(data); $(dialogName ) .dialog(options.dialogOptions); } }); 
   

puede ser este código puede darle una idea.

http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

 $(document).ready(function() { $('#page-help').each(function() { var $link = $(this); var $dialog = $('
') .load($link.attr('href')) .dialog({ autoOpen: false, title: $link.attr('title'), width: 500, height: 300 }); $link.click(function() { $dialog.dialog('open'); return false; }); }); });