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

Question

У меня есть модальное диалоговое окно 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 (). Я что-то упускаю здесь действительно очевидное?

Answer 1

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

$('#button_id').button('option', 'label', 'New button text here')

Answer 2

Если вы посмотрите на 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...');

РЕДАКТИРОВАТЬ: Согласно комментарию mmcnickle, похоже, что кнопка пользовательского интерфейса jQuery имеет свойство label, которое вы можете использовать.Например,

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

jsСделать это в действии

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