Geek asks and answers

How to update button in header using jQueryMobile?

I am trying to find a way to change the button in the header without losing formatting. I want to change the Delete button using the Delete icon to the Finish button using the validation icon.

Here's a shortened version of the code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script type="text/javascript">
    function swapButton() {
      $('#button').attr('data-icon', 'check').text('Done').trigger('create');
      $('#header').trigger('create');
    }
    </script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header" data-position="fixed" id="header">
        <a data-icon="delete" id="button" onclick="swapButton()">Delete</a>
        <h1>Test Page</h1>
      </div>
      <div data-role="content">
        <p>Click on Delete to get Done button</p>
      </div>
    </div>
  </body>
</html>

This changes the button text correctly, but all formatting disappears.

I tried using trigger('create')both on the button and on the header, which does not work, I also tried the method .page()that I read in the answer elsewhere, and I also tried .button().

I can't think of anything else to try.

+3
source share
3 answers

Something like this work:

Js

function swapButton() {
    var b = $('#button');
    b.text('Done');
    b.buttonMarkup({ icon: "check" });
    b.button('refresh');
}

jQM Docs:

+5

:

<div data-role="header">
    <h1>Test Page</h1>
    <a class="button ui-btn-left" data-icon="delete">Delete</a>
    <a class="button ui-btn-left" data-icon="check" style="display:none">Done</a>
</div>

$("a.button").click(function(){
    $("a.button").hide().eq(1).show();
});

http://jsfiddle.net/clausparkhoi/p6ZzN/3/

+3

You can change the widget without updating it if you only change the correct elements.

$('#button').click(function () {

    //1. change the `data-icon` attribute of the link element
    //2. then find the `.ui-icon` element and remove the "delete" icon class, then add the "check" icon class
    //3. then traverse to the `.ui-btn-text` element (a sibling of the `.ui-icon` element) and change the text of the element there
    $(this).attr('data-icon', 'check').find('.ui-icon').removeClass('ui-icon-delete').addClass('ui-icon-check').prev().text('New Text!');
});​

This will bring up a button with a different icon and text.

Here is a demo: http://jsfiddle.net/jasper/Pd6au/1/

Here is your code after initializing jQuery Mobile (this is just the "Delete" button):

<a data-icon="delete" id="button" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-theme="a">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Delete</span>
        <span class="ui-icon ui-icon-delete ui-icon-shadow"></span>
    </span>
</a>

When you do something like: $('#button').text('new text')you rewrite the entire structure of the HTML widget, so it’s important to target an element .ui-btn-textwhen the button text changes.

+2
source

More articles:


All Articles