JQuery UI Dialog, adding items next to a button

Question

One of the nice things about the JQuery UI dialog box is that it has an option for buttons that automatically positions them correctly. I just wonder: can I somehow place elements next to the buttons? Do I have a small Ajax-Loader gif that I would like to display in the lower left corner of the dialog, while the buttons remain in the lower right corner?

I know that I can just remove the buttons and create them manually in HTML, but since jQuery takes care of positioning and styling for me, I would like to keep this functionality, if that 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 have 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 is a version with more than a few considerations.

---

I assume that #ajax-loader will look just like this

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

or just that

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

javascript might 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'); } }, ... 

Note

• You must call .dialog('destroy') in the complete event of the ajax request, otherwise the dialog may be destroyed before the ajax request is completed, and the user may not even see the “bootloader”.

Answer 2

How to simply insert your counter in front of 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'); } }