Geek Answers Handbook

Jquery ui dialogs and loading external content

I have a list of pages that are dynamically generated using an echo stat. 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 creating the jquery ui dialog box:

$.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 achieve is that the moment the links are clicked, the jquery ui dialog will load the content. Therefore, the question arises how to load external links that are generated using php.

+5
source share
2 answers

You have a HREF int anchor, so all you have to do is use the jQuery download function to link it to the HTML and put it on it.

, HTML ( ):

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

javascript, :

$.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;
    });
});

click, dialogLink. URL-, , , , URL, div , , , HTML-, .

+4

jQuery, load() AJAX . , , - :

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

       });

  });

, div - div, . , , , .

+4

More articles:


All Articles