jquery ui dialogs and loading external content

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.

Answer 2

Using jQuery you can use the load() function to make an AJAX call to the server for the content to be loaded. If you want to have all this happen on a click event then you can do something like this:

HTML:

 <a id="clicker" href="#">Click Here</a>
 <div id="content"></div>

jQuery:

 $(document).ready(function(){
       $('#clicker').click(function(){
            $('#content').load('URL OF YOUR PHP PAGE');
            //start your dialog here

       });

  });

Of course the content div in my example is the div that you are using to create the dialog. This way when the user clicks the link, they see the dialog open with the content loaded from the server.