Calling button("refresh") on a jQuery mobile button breaks the button style

javascript, jquery-mobile

Solution

EDIT:

Sorry read to fast and didn't see that you were looking specifically for the refresh functionality. As you hav noticed jQM doesn;t offer that on the anchor tag buttons.

Well an alternative is just to replace the button with a new one and let jQM add the markup as before

- http://jsfiddle.net/rfdQC/4/

JS

$(function() {
    // Buttonize
    var $button = $("#myCrapButton");
    var $clone = $button.clone();
    $button.button();

    // Change text on click
    $button.click(function() {
        $clone.text("Awesome Button");
        $clone.button();
        $button.replaceWith($clone);
    });
});

Hope this helps!

Original:

You just need to drill down into the added markup that jQM adds.

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">
            Click me!
        </span>
    </span>
</a>

You're changing the button text:

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    Awesome Button
</a>

Doing this you loose the added markup jQM needs to display the button. You need to change the nested span text.

$(function() {
    // Buttonize
    var $button = $("#myCrapButton");
    $button.button();

    // Change text on click
    $button.click(function() {
        $button.children().children().text("Awesome Button");
    });
});

no refresh needed:

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">
            Awesome Button
        </span>
    </span>
</a>

Live Example:

- http://jsfiddle.net/rfdQC/3/

Problem

I'm trying to dynamically update the text on a jQuery mobile button. The button is actually a link which is styled as a button. According to the jQuery mobile documentation, you should call `button("refresh")` if you manipulate the button via javascript. However, when I do this, the button's style goes a but crazy - it gets shrunk to half-height and the button looks crap. Here's a JS Fiddle which demonstrates the problem. The code is essentially as follows: ``` $(function() { // Buttonize var $button = $("#myCrapButton"); $button.button(); // Change text on click $button.click(function() { $button.text("Awesome Button"); $button.button("refresh"); }); }); ``` What's more, calling `button("refresh")` causes the javascript error: `Cannot call method 'removeClass' of undefined`. I know that I can work around this problem by manipulating the `.ui-btn-text` `span` that's nested inside the button; however, this seems like the wrong approach as it requires explicit knowledge of the internal workings of jquery Mobile. Can anyone tell me how to get the refresh call to work? Using versions: - jQuery 1.9.1 - jQuery Mobile 1.3.0 (in the JSFiddle it's 1.3.0 beta but the final has the same behavior). Thanks!

Original source