CODEWITHSUNDEEP
javascriptjqueryhtml
Patel
Patel

Reputation: 543

How to replace a button text in jQuery mobile

Below is my app code:

<li class="ui-block-e">
  <a href="#login" data-transition="slide" data-role="button" data-theme="b" data-mini="true" id="UserLoginButtonP5" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-btn-inline ui-mini ui-btn-up-b" data-inline="true">
    <span class="ui-btn-inner">
      <span class="ui-btn-text">Login</span>
    </span>
  </a>
</li>

jQuery replace code:

$("#UserLoginButtonP1").html("<span class='ui-btn-inner'><span class='ui-btn-text'>Logout</span></span>");

How do I replace Login to Logout text?

Upvotes: 1

Views: 349

Answers (3)

Talha
Talha

Reputation: 19282

   var test = $("#UserLoginButtonP5").html();
    test = test.replace('Login', 'Logout');
    $("#UserLoginButtonP5").html(test);

Working Demo on jsfiddle

Upvotes: 1

Manikandan Sethuraju
Manikandan Sethuraju

Reputation: 2893

Try this,

If you want to replace the button text, when click the button means the given below code will work.

$("#btn1")​​​​​​.click(function(){
   $(this).val("Logout");
});​

Live Demo

In your scenario, you want to change the text of span, so you can use span css class name as click event like,

$(".ui-btn-text").bind('click',function(){
    $(this).html("Logout");
});​

Live Demo

(or)

you want to do this in a click event, the given below code will work,

$("#UserLoginButtonP5").bind('click',function(){
    $("#UserLoginButtonP5 .ui-btn-text").html("Logout");
    //$("#UserLoginButtonP5 .ui-btn-text").text("Logout"); ('text' will be work also)
});​

Live Demo

Upvotes: 0

Om3ga
Om3ga

Reputation: 32951

Use on() function instead 

$(document)​​​​​​.on('click', '"#UserLoginButtonP5"',function(){
   $(this).find('span').find('span').text("Logout");
});​

DEMO

Upvotes: 1

Related Questions