Changing button value of a jQuery mobile with a setTimeout function

Question

I am facing a very challenging problem due to my little knowledge in jQuery mobile. I have researched many solutions and implemented them but does not seem to work

1. I have a button called click me
2. When a user clicks on the button, the button becomes disabled and the text clickme changes to please wait...
3. After 2 seconds the button become activated (no longer disabled) and the text changes from please wait... back to click me.
4. I have gotten it to work to some extent. but i am finding it difficult to grab the right html code line in order to change click me to please wait....
5. i am trying to use the example in this jsfiddle file http://jsfiddle.net/nogoodatcoding/ncSbz/1/ but integrate it within my setTimeout code.

Any help or guidance will be much appreciated. My code is below:

html content by jquery mobile

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
    clickme
    <input class="submit button-primary btn large send" id="wp-submit" name="up_submit" tabindex="250" type="button" value="clickme">
</div>

jquery mobile code

$(document).ready(function () {
    var clicked = false;

    $('#wp-submit').bind('click', function() {
        if(clicked == false) {
            // store reference to the button clicked
            // this allows us to access it within the 
            // setTimeout callback below.
            var $btn = $(this);

            $btn.button('disable');
            $btn.prev('div').find('div.ui-input-btn').text('Please wait...'); // sets the text
            $btn.val('Please wait...'); // sets the text on the button itself
            clicked = true;

            setTimeout(function() { 
                $btn.button('enable'); 
                $btn.prev('a').find('span.ui-btn-text').text('click me');
                $btn.val('click me');
                clicked = false;
            }, 2000); 
        }
    });
});

Answer 1

First, instead of

$(document).ready(function () {...

Use the jQM page events like pagecreate:

$(document).on("pagecreate", "#pageid", function () {...

Other than that, changing the button text is as easy as updating the value of the input and then calling button("refresh") on the jQM button widget:

$btn.val('Please wait...').button('refresh');

Putting it all together:

$(document).on("pagecreate", "#page1", function () {

    var clicked = false;
    $('#wp-submit').on('click', function() {
        if(clicked == false) {
            var $btn = $(this);
            $btn.button('disable').val('Please wait...').button('refresh');
            clicked = true;

            setTimeout(function() { 
                $btn.button('enable').val('click me').button('refresh');
                clicked = false;
            }, 2000); 
        }
    });

});

Working DEMO

Thie also works in earlier versions of jQM: DEMO 1.3