html - Changing button value of a jQuery mobile with a setTimeout function -


i facing challenging problem due little knowledge in jquery mobile. have researched many solutions , implemented them not seem work

  1. i have button called click me
  2. when user clicks on button, button becomes disabled , text clickme changes please wait...
  3. after 2 seconds button become activated (no longer disabled) , text changes please wait... click me.
  4. i have gotten work extent. finding difficult grab right html code line in order change click me please wait....
  5. i trying use example in jsfiddle file http://jsfiddle.net/nogoodatcoding/ncsbz/1/ integrate within settimeout code.

any or guidance appreciated. code below:

html content 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 button clicked             // allows access within              // settimeout callback below.             var $btn = $(this);              $btn.button('disable');             $btn.prev('div').find('div.ui-input-btn').text('please wait...'); // sets text             $btn.val('please wait...'); // sets text on button             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);          }     }); }); 

first, instead of

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

use jqm page events pagecreate:

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

other that, changing button text easy updating value of input , calling button("refresh") on jqm button widget:

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

putting 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 works in earlier versions of jqm: demo 1.3


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -