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
- i have button called
click me
- when user clicks on button, button becomes
disabled
, textclickme
changesplease wait...
- after 2 seconds button become activated (no longer
disabled
) , text changesplease wait...
click me
. - i have gotten work extent. finding difficult grab right html code line in order change
click me
please wait...
. - 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
Post a Comment