CODEWITHSUNDEEP
jquery-mobile
Anthony
Anthony

Reputation: 5433

Changing button data-theme dynamically in JQueryMobile

I'm having a little trouble dynamically changing a button's theme dynamically. From a different post I learned to use:

<input type="button" data-inline="true" data-mini="true" data-theme="c" id="my-button" value="Save">
<script>
$("#my-button").buttonMarkup({ theme: 'a' }).button('refresh');
</script>

Technically this works, until I mouse over - then the button falls back to data-theme "c". Is there a better way to dynamically change theme?

Upvotes: 3

Views: 6568

Answers (2)

djayavelu
djayavelu

Reputation: 1

I tried to find the answer for this one, but came up with this solution after looking into the DOM structure. I created the below function for toggling the theme on click the button. the hover class needs to be addressed only when changing the theme of the same button you are clicking. These seems to work for input type button element. (jqm version 1.3.2)

function changeButtonTheme(buttonSelector,toTheme){
    var currentTheme  = $(buttonSelector).attr('data-theme');
    var parent  = $(buttonSelector).parent();
    $(buttonSelector).attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
    parent.attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
    //parent.removeClass("ui-btn-hover-"+currentTheme).addClass("ui-btn-hover-"+toTheme);
}

Upvotes: 0

Jaya Mayu
Jaya Mayu

Reputation: 17247

if you use a button as below

 <a href="#" id="my-button2" data-role="button" data-theme="e">Save2</a>

You can change the theme as below

$('#my-button2').attr("data-theme", "c").removeClass("ui-btn-up-e").addClass("ui-btn-up-c");

check out a live fiddle here http://jsfiddle.net/mayooresan/jfDLU/

Upvotes: 1

Related Questions