CODEWITHSUNDEEP
jqueryajaxjquery-dialog
kusanagi
kusanagi

Reputation: 14614

jQuery dialog load content

<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)

Upvotes: 1

Views: 328

Answers (3)

Anurag
Anurag

Reputation: 1038

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:

Upvotes: 0

Charly H
Charly H

Reputation: 167

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

Upvotes: 1

anmarti
anmarti

Reputation: 5143

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/

Upvotes: 1

Related Questions