4

I'm trying to change the data-theme of a button when pressed.

I'm calling this JavaScript function in the button's onClick handler:

function changeNextButtonColor() {
    var nextButton = document.getElementById('next');
    nextButton.setAttribute('data-theme', 'a');
}

but the theme is not changing. Any ideas?

Ry-
  • 218,210
  • 55
  • 464
  • 476
MataMix
  • 3,276
  • 10
  • 39
  • 58
  • Your code works; something else is going wrong. What does the JavaScript console (Web Inspector, Firebug, Dragonfly...) say? Are any errors reported? – David Thomas Dec 18 '11 at 21:26
  • Thanks guys! Maybe is not working because the button is an input submit? – MataMix Dec 19 '11 at 09:37

2 Answers2

3

Once you've set set the theme on the button you'll need to call "refresh" on it like this below...

$("#next").attr("data-theme","a").button('refresh');

If you want to bind this kind of behavior to all "next" buttons in a process and their might be more than one then you might want to consider doing something more like this. It will checked every page for a button that has a class of colorChangeButton and then, when clicked, change the theme to the alternate theme specified on that buttons attribute of data-theme-pressed.

<a href="#" data-role="button" class="colorChangeButton" data-theme-pressed="a" data-theme="b">Next</a>

<script type='text/javascript'>
    $('div').live('pageinit', function(){
        $("a.colorChangeButton).click(function(){
           var $thisButton = $(this);
           $thisButton.attr("data-theme",$thisButton.attr("data-theme-pressed")).button('refresh');
        });
    });
</script>
sgliser
  • 2,071
  • 12
  • 13
2
function changeNextButtonColor() {
    $('#next').attr({'data-theme': 'a'});
}

If you're using jQuery, this is your code.

Ryan Casas
  • 666
  • 5
  • 19