JQuery UI dialog box - open an external dynamic php file in a dialog box

Question

I searched a few hours today for simple solutions, but I did not find it.

I have a table (# example) with data in it and with a link to a page (allinfo.php), where all the data of a certain row is shown (they are not all shown in the table). Therefore, I would like to make it easier for the user. I would like them to be able to click on the link and a dialog box with the contents of allinfo.php is shown.

my script in:

$(document).ready(function() { $('#example a').each(function() { var $dialog = $('<div></div>') .append($loading.clone()); var $link = $(this).one('click', function() { $dialog .load($link.attr('href') + ' #content') .dialog({ title: $link.attr('title'), width: 500, height: 300 }); $link.click(function() { $dialog.dialog('open'); return false; }); return false; }); }); $('#example').dataTable( { "bProcessing": true, "bServerSide": true, "bJQueryUI": true, "sAjaxSource": "url.php", "fnServerData": fnDataTablesPipeline, "sPaginationType": "full_numbers", } ); } ); 

So the problem is that the table is created in javascript, and I cannot add a dialog there. If I write somewhere else on the site: all the information and click, everything will work.

The only solution I see is with the onclick command, but I don't know how to use it?

therefore, the table should contain all the information

Thanks for the help!

Answer 1

Something like this should work, but its a little tricky as I can't test anything:

 $(document).ready(function() { // As soon as the page loads, attach a div for showing content: $('body').append('<div id="dialogPopup"></div>'); // Setup the dialog: $('#dialogPopup').dialog({ width: 500, height: 300, autoOpen: false}); // Listen to ALL anchors in #example: $('#example a').live('click', function(e) { // Don't let the browser follow the link: e.preventDefault(); // Store a link to the link clicked: var obj = $(this); // Store a link to the dialog: var dia = $('#dialogPopup'); // Empty the content of the popup: dia.html(''); // Load the contents into the dialog: dia.load(obj.attr('href') + ' #content') // Set the title: .dialog({title: obj.attr('title')}) // Open the dialog: .dialog('open'); }); $('#example').dataTable({ "bProcessing": true, "bServerSide": true, "bJQueryUI": true, "sAjaxSource": "url.php", "fnServerData": fnDataTablesPipeline, "sPaginationType": "full_numbers", }); }); 

Answer 2

I would use a combination of .live and $ (this) .attr ('href') and $ .ajax you can also use an event object Function (event)