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

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".

Answer 2

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 3

The best way to do this, is to create another button, make it totally transparent with no border, and add the animated gif as its background image. By using another button, you can easily locate its position relative to all your other buttons.

First, to be able to style buttons more, you need to create them with one level higher of definition. So instead of:

buttons: {
    'Create': function() {
        $("#ajax-loader").show();
        // Make the Ajax Call and whatever else is needed
        $(this).dialog('destroy');
    },
    Cancel: function() {
        $(this).dialog('destroy');
    }
}

Do it like this (notice square brackets and one more level of indent):

buttons: [
    {
        id: 'create-button',
        class: 'create-button-class',
        text: 'Create',
        click: function() {
            $("#ajax-loader").show();
            // Make the Ajax Call and whatever else is needed
            $(this).dialog('destroy');
        }
    },
        text: 'Cancel',
        click: function() {
            $(this).dialog('destroy');
        }
    }
]

You can assign an id and class to each button or not. If you assign either id and/or class, then you can apply CSS styling to it.

<style>
.create-button-class{
    height:50px;
    width:50px;
    left:-300px; /* Pushes it left, change value for desired location. */
}
.ui-dialog .ui-dialog-buttonpane #create-button { 
    color: transparent; /* no inner color and also hides text */
    border: none; /* removes border */
    background-image:url(images/spinner-gif-25px.gif); /*replaces default image */
    background-size: 50px;
    background-repeat: no-repeat;
}
</style>

If you like, create a normal additional button and use CSS property left to push it as far left in the button panel as you like, before making it transparent and no border.