Menu
Currently my Modal Dialog is like 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> The Div that is loaded is included in the same page. How do I move that div to a second page and load the contents via Ajax when the dialog is shown? And can I reuse the script to load different contents as per need?
588
Just reload the header.
Check out this blog post from Nemikor, which should do what you want.
http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
Basically, before calling 'open', you 'load' the content from the other page first.
jQuery('#dialog').load('path to my page').dialog('open'); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
