Question

I have a jquery modal dialog, and I am trying to change the text shown on a button after it is clicked. So, for example, the Send button gets changed to ‘Sending…’ and is disabled when it is clicked.

This all works fine, with one problem: the button loses all of its internal padding, and the button border wraps right around the text.

$('#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");
    }
});

I have tried with both the html() and text() methods. Am I missing something really obvious here?

Answer 1

If you have a look at the html at the button actually renders you’ll notice that there is a <span> inside the <button> tag.

<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>

So to get your code to work, you should probably do something like:

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

EDIT: As per mmcnickle’s comment, it looks like the jQuery UI Button has a label property that you can use. E.g.

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

jsFiddle of it in action

jQuery UI Button Label Documentation