Best IT Recipes

JQuery: Download Modal Dialog Contents via Ajax

Currently my modal dialogue is similar to this

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/humanity/jquery-ui.css" type="text/css" /> </head> <body> <div id="dialog" title="Title Box"> <p>Stuff here</p> </div> <script type="text/javascript"> 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'); } } ); } ); </script> <a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click to view</a> </body> </html>

Downloadable Div is included in the same page. How to transfer this div to the second page and load content via Ajax when displaying a dialog? And is it possible to reuse the script to load various content as needed?

+44
jquery ajax modal-dialog dialog
01 Oct '10 at 7:15
source share
6 answers

Check out this Nemikor blog post that should do what you want.

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

Basically, before calling open, you first load the content from another page.

 jQuery('#dialog').load('path to my page').dialog('open');
+71
01 Oct '10 at 7:24
source share

try using this one.

 $(document).ready(function(){ $.ajax({ url: "yourPageWhereToLoadData.php", success: function(data){ $("#dialog").html(data); } }); $("#dialog").dialog( { bgiframe: true, autoOpen: false, height: 100, modal: true } ); });
+14
Oct 01 '10 at 7:28
source share
 $(function () { $('<div>').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

+6
Feb 04 '13 at 19:10
source share
 var dialogName = '#dialog_XYZ'; $.ajax({ url: "/ajax_pages/my_page.ext", data: {....}, success: function(data) { $(dialogName ).remove(); $('BODY').append(data); $(dialogName ) .dialog(options.dialogOptions); } });

Ajax-Request loads the dialog box, adds it to the Body of the current page and opens the dialog box.

If you only want to download content you can do:

 var dialogName = '#dialog_XYZ'; $.ajax({ url: "/ajax_pages/my_page.ext", data: {....}, success: function(data) { $(dialogName).append(data); $(dialogName ) .dialog(options.dialogOptions); } });
+4
01 Oct '10 at 7:40
source share
 <button class="btn" onClick="openDialog('New Type','Sample.html')">Middle</button> <script type="text/javascript"> function openDialog(title,url) { $('.opened-dialogs').dialog("close"); $('<div class="opened-dialogs">').html('loading...').dialog({ position: ['center',20], open: function () { $(this).load(url); }, close: function(event, ui) { $(this).remove(); }, title: title, minWidth: 600 }); return false; } </script>
0
Apr 6 '13 at 8:40
source share

maybe this code may give you some 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 = $('<div></div>') .load($link.attr('href')) .dialog({ autoOpen: false, title: $link.attr('title'), width: 500, height: 300 }); $link.click(function() { $dialog.dialog('open'); return false; }); }); });
0
Jun 26 '14 at 12:43 on
source share


More articles:


All Articles