Question

I have a list of pages that are dynamically generated with a echo statment.
example:

<a href="<?php echo $action['href']; ?>"><span onclick="jQuery('#category_edit_dialog').dialog('open'); return false"><?php echo $action['text']; ?></a>

this is the code for making the jquery ui dialog window:

$.ui.dialog.defaults.bgiframe = true;
$(function() {
    $("#category_edit_dialog").dialog({
        width: 960,
        hide: 'slide',
        autoOpen: false,
    });

    $('#open_category_edit_dialog').click(function() {
        $('#category_edit_dialog').dialog('open');
        return false;
    });

});

what i want to achive is in the moment that links are clicked a jquery ui dialog will load the content. So the question is more likely how to load external links that are generated with php.

Answer 1

You have the HREF int he anchor, so all you have to do is use the jQuery load function to get the linked to HTML and put it on your page.

Assuming the following HTML for your links (that odd unclosed span in the anchor didn’t make sense to me):

<a href="<?php echo $action['href']; ?>" class="dialogLink"><?php echo $action['text']; ?></a>

You could modify your javascript to make it work as follows:

$.ui.dialog.defaults.bgiframe = true;
$(function() {
    $("#category_edit_dialog").dialog({
        width: 960,
        hide: 'slide',
        autoOpen: false
    });

    $('a.dialogLink').click(function() {
        var url = $(this).attr('href');
        $('#category_edit_dialog').load(url, function() {
            $('#category_edit_dialog').dialog('open');
        });
        return false;
    });
});

They key is the click event getting bound to the links with the class of dialogLink. It will get the URL it points to when clicked, load the content found at that URL into the dialog content div you already had on the page, and once it has the HTML it will open the dialog.