JQuery UI диалог добавления изображения прямо перед кнопкой

Question

Для формы у меня есть кнопка отправки, которая отправляет форму, используя ajax. Когда эта форма загружается, я хочу отобразить счетчик прямо рядом с кнопкой. Это может выглядеть так: jQuery UI Dialog, добавление элементов рядом с кнопкой , но разница в том, что в этом посте вопрос заключается в том, чтобы отображать значок в левом углу. Кроме того, предложенные решения не работают для меня.

Я пробовал следующее (из другой ветки):

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'));
                   ...

но это ничего не делает. Если я удаляю>, я получаю счетчик, но он отображается так:

Как я могу это исправить?

edit : Я хочу вот что:

Скрипка: http://jsfiddle.net/vpwjw/10/

Answer 1

Другой пример не имел дело с набором кнопок, которым вы являетесь, поэтому < ничего не возвращает,

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

Вы можете просто использовать 1 селектор, чтобы получить правильное местоположение. Также обратите внимание, float: left;

Вам также необходимо отрегулировать отступы по центру.