jQuery UI dialog box - open external dynamic php file in dialog

Question

I was searching today for a few hours for an easy 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 particular row is shown(they are not all shown in table). Therefore i would like to make this easier for user. I would like that they can click on the link and the dialog window with content from 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, problem is that table is generated in javascript and i cannot add option of dialog window in there. If i write somewhere else on site: all info and click, everything will work.

Only solution that i can see is, with using "onclick" command, but i do not know how to use it?

so in table should be all info

Thank you for your help!

Traveling_Monk · Accepted Answer · 2011-03-10 19:02:37Z

1

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

answered Mar 10, 2011 at 19:02

Traveling_Monk

7882 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jan Demsar Over a year ago

Sorry, but i really dont know much javascript... Can you be more specific please? Thank you :)

Scoobler · Accepted Answer · 2011-03-11 02:35:43Z

0

Something like this should work, but its a little difficult as I am unable to test against 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",             
    });
});

edited Mar 11, 2011 at 2:35

answered Mar 10, 2011 at 20:18

Scoobler

9,7494 gold badges38 silver badges51 bronze badges

4 Comments

Jan Demsar Over a year ago

Wow!! Thank you very much, this works!!! I only have 1 more question. When i click on the link and the dialog box is shown, the link that i clicked dissapears. How can i prevent this? Thanks again!

Scoobler Over a year ago

Sorry about that, see the updated answer - basically change the line that was var obj = $(this); to var obj = $('#dialogPopup');. The first version, was turning what was the link into a dialog - instead of turning the <div> one of the first lines added!!

Jan Demsar Over a year ago

Before (with var obj = $(this);) it showed a dialog (300*80-have only 2 test words in file), now when i changed in var obj = $('#dialogPopup');, dialog 500*300 shows up, but nothing is inside(even no title)... If you know any simple solution for this i would be very thankful, otherwise i will use the one that dissapers :)

Scoobler Over a year ago

Sorry, another silly mistake on my part, I have updated the answer again. Basically when I changed the line, it was then using the new div as the dialog, but it was then trying to get the title and href from the div too instead of the link that was clicked. Now it should use the new div as the pop-up, but load the href and title from the link that was clicked.

Collectives™ on Stack Overflow

jQuery UI dialog box - open external dynamic php file in dialog

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related