JQuery dialog to open another page

Question

There is a transaction.html page

To open this page in a popup on another page, say show_transactions.html in the jquery dialog

$dialog.html() //open transaction.html in this dialog .dialog({ autoOpen: true, position: 'center' , title: 'EDIT', draggable: false, width : 300, height : 40, resizable : false, modal : true, }); alert('here'); $dialog.dialog('open'); 

This code is present in show_transactions.html

Thanks..

Answer 1

You can use the jQuery .load() method to load the page into the dialog, here's how:

 $("#dialog").dialog({ autoOpen: false, position: 'center' , title: 'EDIT', draggable: false, width : 300, height : 40, resizable : false, modal : true, }); $("#dialog_trigger").click( function() { $("#dialog").load('path/to/file.html', function() { $("#dialog").dialog("open"); }); }) 

This assumes that there is a dialog box identifier in the dialog box, and there is another element with the dialog_trigger identifier that is clicked to open it. You would put both of them in your finished document so that the dialog was done when the page loaded, if it wasn’t, this would lead to an easy but noticeable delay for the user, as he did.

Answer 2

You can also do this ...

Create dialogue page

 <div id="MyDialogID" title="My Dialog Title"></div> 

Create a link (clicking on this link will open a dialog)

 <a id="MyLinkToDialogID" href="Path to Dialog Page">Open My Dialog</a> 

Initialize a dialog (create an event between the link and the dialog box)

 $('#MyLinkToDialogID').each(function () { var $link = $(this); $.post($link.attr('href'), function (data) { var $dialog = $(data) .filter('#MyDialogID') .dialog({ autoOpen: false, resizable: false, height: 240, width: 370, modal: true }); $link.click(function () { $dialog.dialog("open"); $dialog.css("height", "240"); $dialog.css("width", "370px"); $dialog.dialog({ position: 'center' }); return false; }); }); });