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)

Is what do you want, only change the witdh and height of dialog? Please, explain better what you are trying to achive. — anmarti
– anmarti, Commented Jan 15, 2016 at 12:51
Or just remove it from plugin initialization: $('#modal').dialog({ modal: true}); ??? — A. Wolff
– A. Wolff, Commented Jan 15, 2016 at 12:52
If you've reached success then your data is loaded in the modal and you can just use it later on with $('#modal').dialog();. The question is kinda vague.. please clarify how and where you want to use the same dialog.. — urbz
– urbz, Commented Jan 15, 2016 at 12:54
set var modalConfig = { modal: true, width: 100, height: 100 } and use modalConfig that everywhere.. — Parth Trivedi
– Parth Trivedi, Commented Jan 15, 2016 at 12:59
here is example jsfiddle.net/9rqdqo0c but i can't center dialod in success — kusanagi
– kusanagi, Commented Jan 15, 2016 at 16:55

anmarti · Accepted Answer · 2016-01-15 13:05:31Z

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/

edited Jan 15, 2016 at 13:05

answered Jan 15, 2016 at 12:54

anmarti

5,15310 gold badges62 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Parth Trivedi · Accepted Answer · 2016-01-15 13:14:28Z

1

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

edited Jan 15, 2016 at 13:14

Parth Trivedi

3,8321 gold badge23 silver badges41 bronze badges

answered Jan 15, 2016 at 12:57

Charly H

1679 bronze badges

2 Comments

Anurag Over a year ago

That is a good solution @Charly. I like how you dealt with setting argument using $.extend. Learned a new thing today!

Charly H Over a year ago

Thanks, but @ParthTrivedi added the $.extend part to my answer. Click on "edited Jan 15 at 13:14" to see my simplified and more readable solution.

Anurag · Accepted Answer · 2016-05-19 20:18:40Z

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

Collectives™ on Stack Overflow

jQuery dialog load content

3 Answers 3

Comments

2 Comments

Using object reference

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Using object reference

Comments

Your Answer

Sign up or log in

Post as a guest

Related