Changing the value of a jQuery mobile button with a set time

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. The code works pefectly with out this code line $(this).parent('').text('Please wait...'); but could one kindly advise how i get it to work with a please wait....

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

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

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

    $('#wp-submit').bind('click', function() {
        if(clicked == false) {
            $(this).button('disable');
            $(this).parent('').text('Please wait...');
            clicked = true;

            setTimeout(function() { 
                $('#wp-submit').button('enable'); 
                $(this).parent('').text('click me');
                clicked = false;
            }, 2000); 
        }
    });       
});

Answer 1

setTimeout should be inside the event handler for the button click. You'll also have to use the button's selector, as you'll lose the context of this within the setTimeout callback, as well as set clicked back to false:

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

    $('#wp-submit').bind('click', function() {
        if(clicked === false) {
            $(this).button('disable');
            $('#wp-submit .ui-btn-text').val("Please wait...");
            clicked = true;

            setTimeout(function() { 
                $('#wp-submit').button('enable'); // 'this' no longer refers to button element
                $('#wp-submit .ui-btn-text').val("clickme");
                clicked = false;
            }, 2000); 
        }
    });       
});

Working fiddle: https://jsfiddle.net/7j0rfb56/

I've had to change up the code somewhat as core jQuery does not provide a .button function (perhaps this is jQuery mobile specific).

---

EDIT: I've improved my previous answer based on your updated code:

There are a number of issues here, I'll try to explain each as best I can:

• Firstly your provided HTML includes the text in two places - is this intentional? The value="clickme" attribute on the button will set the button text. You may or may not wish to ommit the extra text immediately within the div tag. I've assumed you want to change both in the example.
• Changing the text of an element with .text() also replaces the entire contents of that element. So when calling $(this).parent('').text('Please wait...'); you are replacing both the text and the button element with the new value. I recommend wrapping the text you wish to change in a label tag so you can call .text() on that instead.
• As mentioned already, you are unable to access the button via $(this) within the setTimeout callback as the context changes. You'll have to store a reference to it beforehand that you can use in the callback.

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

$(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.siblings('label').text('Please wait...'); // sets the text for the label only
            $btn.val('Please wait...'); // sets the text on the button itself
            clicked = true;

            setTimeout(function() {
                // we can access our '$btn' variable inside
                // here, this avoids the issue of 'this'
                // losing context
                $btn.button('enable'); 
                $btn.siblings('label').text('click me');
                $btn.val('click me');
                clicked = false;
            }, 2000); 
        }
    });
});

Sample jsfiddle: https://jsfiddle.net/vsdv9ghL/ (again, I've removed any non jQuery-mobile code).

Answer 2

no need to use jQuery for those little dom manipulation :

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

  $('#wp-submit').bind('click', function() {
    button = this; // storage your button here
      if(clicked === false) {
          button.disabled = true;
          button.value = "Please wait...";
          clicked = true;
          console.log('disabled');
        setTimeout(function() { // link your timeout with the click event
          console.log('enabled');
          clicked = false;
          button.disabled = false;
          button.value = "clickme";
        }, 2000);
      } 
  });

});

Answer 3

many thanks to @ezanker who solved this question here --> Changing button value of a jQuery mobile with a setTimeout function

Answer:

$(document).ready(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); 
        }
    });
});