Home/ Questions/Q 7570745
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T15:30:01+00:00

I’ve been struggling to find a way to change a button in the header

  • 0

I’ve been struggling to find a way to change a button in the header without losing the formatting. I want to change the Delete button with delete icon to a Done button with check 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 text of the button properly but all the formatting disappears.

I’ve tried using trigger('create') on both the button and the header which doesn’t work, I’ve also tried the .page() method which I read in an answer elsewhere and I tried .button() too.

I can’t think of anything else to try.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Does something like this work:

    JS

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

    jQM Docs:

    • 0