jquery ui dialog add image right in front of button

Question

For a form, I have a submit button, that posts a form using ajax. When this form is loading, I want to display a spinner right next to the button. This may seem like this question: jQuery UI Dialog, adding elements next to a button, but the difference is that in that post, the question is to display an icon in the left corner. Plus, the solutions proposed aren't working for me.

I have tried the following (from the other thread):

var $respond_dialog = $( "#respond_div" ).dialog({
        width: 500,
        autoOpen: false,
        resizable: true,
        modal: true,
        buttons: {
            "Reageren": function() {
                            $('<div style="width:20px;height:20px;float:right;" 
                            class="ui-autocomplete-loading"></div>').insertBefore(
                            $("#respond_div").next('.ui-dialog-buttonpane > button:first'));
                   ...

but this does nothing. If I remove the >, I get a spinner, but it is displayed like this:

wrong location

How can I fix this?

edit: What I want is this: correct location

Fiddle: http://jsfiddle.net/vpwjw/10/

Andrew · Accepted Answer · 2011-11-11 21:17:05Z

1

The other example was not dealing with a button set which you are, that is why the < returns nothing,

$('<div style="width:20px;height:20px;float:left;" class="ui-autocomplete-loading"></div>')
 .insertBefore('#respond_div .ui-dialog-buttonpane button:first');

You can just use 1 selector to get the right location. Also note, float:left;

You will also need to adjust your padding to center it.

answered Nov 11, 2011 at 21:17

Andrew

13.9k14 gold badges70 silver badges85 bronze badges

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

3 Comments

Ben Ruijl Over a year ago

I am not seeing anything if I try this. Any ideas why that may be?

Andrew Over a year ago

Not without a fiddle, I'm just guessing as to your structure right now.

Ben Ruijl Over a year ago

I have edited my question, so that it shows the structure I am using. It also shows what I am trying to achieve.

Collectives™ on Stack Overflow

jquery ui dialog add image right in front of button

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related