jQuery dialog load content

Question

<div id="modal" style="display: none;">loading...</div>
<a href="#" class="ajax">click me</a>

$('.ajax').on('click', function() {
    $.ajax({
        url: '/',
        beforeSend: function() {
            $('#modal').dialog({
                modal: true,
                width: 100,
                height: 100
            });
        },
        success: function(data) {
            $('#modal').html('new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value ');
        }
    });
    return false;
});

https://jsfiddle.net/wrd7xr5m/

How can I use the same dialog in success with restore width\height with new content? In real project I use this:

$('#modal').html(data)

Answer 1

You can use the same jquery object $('#modal'). You just need to set again the configuration values you need by calling dialog method.

 $('#modal').dialog( "option", "width", 500 )
        .dialog( "option", "height", 300 )
        .html('new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value new value ');

https://jsfiddle.net/wrd7xr5m/2/

Answer 2

why not use a Function?

 $('.ajax').on('click', function() {
        $.ajax({
            url: '/',
            beforeSend: openDialog(),
            success: openDialog({width:600px})
        });
        return false;
    });

   function openDialog(setting){
            var defaultSetting = { 
                modal:true, 
                height: 400, 
                width: 450
            }
            //if you have any custom setting then pass object
            if(setting!=undefined)
               $.extend(defaultSetting ,setting);

            var myDialog= $('#modal').dialog(defaultSetting);
}

Answer 3

Another good way to do it would be to get a object reference to the dialog and then use it in anywhere in your code. You can override/define attribute values using the .dialog("option", "<attribute>", <value>); notation.

For example:

myDialogObject.dialog("option", "position", {my:"left top", at:"left bottom", of:window});

---

Using object reference

$(document).ready(function(){
    //1. Initialize the dialog with 'autoOpen' attribute set to false.
    var myDialogObj = $('#modal').dialog({
        autoOpen: false,
        modal: true,
        width: 100,
        height: 100
    });

    //2. Make your async call.
    $('.ajax').on('click', function() {
        $.ajax({
            url: '/',
            beforeSend: function() {
                //open the dialog using object reference.
                myDialogObj.dialog('open');
            },
            success: function(data) {
                myDialogObj.html('new value for the dialog, could also have a page content loaded dynamically using the ".load(url,successCallback(){})" function.');
                //set the height and width as per your custom requirement or leave it, if you want auto adjustments.
                myDialogObj.dialog("option", "width", 340);
                myDialogObj.dialog("option", "height", 200);
                //open the dialog using object reference.
                myDialogObj.dialog('open');
            }
        });
        return false;
    });
});

Try the fiddle here.

References:

• https://api.jqueryui.com/dialog