jQuery UI Dialog, adding elements next to a button

Question

One of the nice things about the jQuery UI Dialog is that it has an option for Buttons, which automatically positions them correctly. I just wonder: Can I somehow place elements next to the buttons? I have a little Ajax-Loader gif that I would like to display in the lower left corner of the dialog, while the buttons stay at the lower right?

I know I can just remove the buttons and create them manually in HTML, but as jQuery takes care of positioning and styling already for me, I'd like to keep that functionality if it makes sense.

    $("#newProjectDialog").dialog({
        bgiframe: true,
        resizable: false,
        width: 400,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            'Create': function() {
                $("#ajax-loader").show();
                // Make the Ajax Call and whatever else is needed
                $(this).dialog('destroy');
            },
            Cancel: function() {
                $(this).dialog('destroy');
            }
        }
    });

Answer 1

How about just inserting your spinner before the first ui-dialog-button?

buttons: {
   'Create' : function() {
       $('<img src="spinner.gif" style="float: left;" />').insertBefore('.ui-dialog-buttonpane > button:first');
       ...ajax stuff...
       $(this).dialog('destroy');
    }
}

Answer 2

All you basically need to do is

//depending on what #ajax-loader is you maybe need to style it (float:left, ...)
$("#ajax-loader").clone(true).appendTo("div.ui-dialog-buttonpane").show();

Below a fancier version with a few considerations incorporated.

---

I imagine #ajax-loader to look similar to this

<div id='ajax-loader'><img src='loader.gif' /><span>loading...</span></div>

or just this

<img id='ajax-loader' src='loader.gif' />

javascript can look like this

...
'Create': function() {
    var btnpane = $("div.ui-dialog-buttonpane");
    //prevent bad things if create is clicked multiple times
    var there = btnpane.find("#ajax-loader").size() > 0;
    if(!there) {
        $("#ajax-loader").clone(true).appendTo(btnpane).show();
        // Make the Ajax Call and whatever else is needed
        // if ajax call fails maybe add $("#ajax-loader", btnpane).remove();
        $(this).dialog('destroy');
    }
},
...

A note

• You should call .dialog('destroy') in the complete event of the ajax request else the dialog may get destroyed before the ajax request finished and the user may not even see the "loader".