单击按钮在jquery ui中动态加载另一个php页面

Question

jQuery(function ($) { 
    // Load dialog on page load
    // Load dialog on click
    $('#basic-modal .basic').click({
        modal:true,
        open: function ()
        {
            var id = $('#id').attr('value');  
            $(this).load('edit.php?id='+id);
        },
        height: 400,
        width: 400,
        title: 'Dynamically Loaded Page'
    });
});

This is not opening the dialog on the click of the button. what is it that i am doing wrong here?

Answer 1

You are passing options from jQuery UI .dialog() to .click() . Try this:

jQuery(function ($) { 
    // Load dialog on page load
    // Load dialog on click
    $('#basic-modal .basic').click(function(){
        $('<div id="dialogContainer"></div>').appendTo('body').dialog({
            modal:true,
            open: function ()
            {
                var id = $('#id').attr('value');  
                $(this).load('edit.php?id='+id);
            },
            height: 400,
            width: 400,
            title: 'Dynamically Loaded Page'
        });
    });
});

Answer 2

try doing things in reverse

function getEdit(id)
{
    $.get("edit.php", {id: id}
       function(data)
       {
            $("#div-id").html($("#div-id").html() + data)
            $("#div-id").dialog({
                modal:true,
                height: 400,
                width: 400,
                title: 'Dynamically Loaded Page'
                });
       },
       "html");
}

getEdit(); // you can also set up a button to call this as well.