Изменение текста на кнопке диалога jquery влияет на высоту кнопки

У меня есть модальное диалоговое окно jquery, и я пытаюсь изменить текст, отображаемый на кнопке после ее нажатия. Так, например, кнопка «Отправить» изменяется на «Отправка...» и отключается при нажатии на нее.

Все это прекрасно работает, но с одной проблемой: кнопка теряет все свои внутренние отступы, а граница кнопки обтекает текст.

$('#email-dialog').dialog({
    autoOpen: false,
    height: 'auto',
    width: 'auto',
    modal: true,
    buttons: {
        "Send": function() {
            $(".ui-dialog-buttonpane button:contains('Send')").button("disable");
            $(".ui-dialog-buttonpane button:contains('Send')").button().html('Sending...');

            $.ajax({
                type: "POST",
                url: post_path,
                data: form_data,
                dataType: 'JSON',
                success: function(data) {
                    if (data.success) {
                        $("#email-dialog").dialog("close");
                    } else {
                        updateErrors(data.errors);
                        $(".ui-dialog-buttonpane button:contains('Sending...')").button("enable");
                        $(".ui-dialog-buttonpane button:contains('Sending...')").button().text('Send');
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('Error: ' + textStatus + ' ' + errorThrown);
                    $(".ui-dialog-buttonpane button:contains('Sending...')").button("enable");
                    $(".ui-dialog-buttonpane button:contains('Sending...')").button().text('Send');
                }
            });

        },
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    close: function() {
        allFields.val("").removeClass("ui-state-error");
    }
});

Я пробовал использовать методы html() и text(). Я пропустил что-то действительно очевидное здесь?


button dialog jquery
person JonoB    schedule 18.10.2011    source источник
comment
Очевидно, что все, что происходит, происходит при вызове .button(). Если бы мне пришлось угадать, эта функция удаляет и воссоздает элемент, стирая все стили в процессе.   -  person Adam Terlson    schedule 18.10.2011
comment
Я думаю, вы хотите изменить label свойство кнопки.   -  person mmcnickle    schedule 18.10.2011
comment
@mmcnickle Вы правы! Как очевидно. Пожалуйста, добавьте это как ответ, чтобы я мог отдать вам должное.   -  person JonoB    schedule 18.10.2011
comment
К сожалению, при дальнейшем тестировании это не работает.   -  person JonoB    schedule 18.10.2011

Ответы (2)


arrow_upward
3
arrow_downward

Если вы взглянете на HTML-код кнопки, который фактически отображается, вы заметите, что внутри тега <button> есть <span>.

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
    <span class="ui-button-text">Send</span>
</button>

Итак, чтобы заставить ваш код работать, вам, вероятно, следует сделать что-то вроде:

$(".ui-dialog-buttonpane button:contains('Send') span").text('Sending...');

EDIT: Согласно комментарию mmcnickle, похоже, что кнопка jQuery UI имеет свойство label, которое вы можете использовать. Например.

$(".ui-dialog-buttonpane button:contains('Send')").button('option', 'label', 'Sending...');

jsFiddle в действии

Документация по ярлыкам кнопок пользовательского интерфейса jQuery

person Charlino    schedule 18.10.2011
comment
Да, я бы сказал, что настройка label была бы лучшим подходом, так как вам не нужно полагаться на базовую разметку, которая может измениться в будущих версиях пользовательского интерфейса jQuery. - person mmcnickle; 18.10.2011

arrow_upward
3
arrow_downward

Вы изменяете текст в кнопке пользовательского интерфейса jQuery, изменяя параметр label:

$('#button_id').button('option', 'label', 'New button text here')
person mmcnickle    schedule 18.10.2011