Changing button's data-theme programatically

[rskokan]

Changing the data-theme attr. for buttons dynamically from JS seems to have some issues in version 1.1.0:

Procedure

1. I have a button with theme "e"
2. I change it to "a" via $btn.attr("data-theme", "a")
3. The button is still displayed in yellow, with the previous "e" theme

After that, I noticed the the generated div around the button contained both ui-btn-hover-e & ui-btn-up-e and also their (correct) -a variants.
It is also in case when I'm updating data-theme for the div.

So the workaround for me is to also remove the previous classes from the generated div:

$btn.closest("div").attr("data-theme", "a").removeClass("ui-btn-hover-e").removeClass("ui-btn-up-e");

[agcolom]

@rskokan could you provide a test page using the latest build with jsbin or jsfiddle to illustrate?
Templates: http://jsfiddle.net/enxXQ/ or http://jsbin.com/acoruj/edit#html

[MauriceG]

Hi Anne, hi @rskokan !
I had something in my portfolio ... http://jsfiddle.net/MauriceG/RgCF8/
I hope it's okay ...

[jaspermdegroot]

hi @rskokan

The correct way of doing this is using .buttonMarkup({ theme: a }).button('refresh');

I changed this in the fiddle of @MauriceG (thanks for the fiddle!) so you can see a working example: http://jsfiddle.net/kYEBN/1/

You can read more about this here: http://jquerymobile.com/test/docs/buttons/buttons-options.html and http://jquerymobile.com/test/docs/buttons/buttons-methods.html

We are working on adding examples (code + result) of manipulating content/elements to the docs.

[agcolom]

@MauriceG Sorry for replying late... Thanks a lot for the fiddle from me too ;-) (btw I will look at your docs PRs this weekend)

@uGoMobi Thanks for the working example. Great team effort from you two!

Is everyone happy for me to close?
Anne

[toddparker]

@agcolom - I'm going to close this as resolved, but this would be a great example to add to the docs. We need to really beef up our demos and explanation of how to do dynamic changes post-enhancement to all our widgets. Mind adding this to the button docs?

[MauriceG]

Hi @agcolom, hi @toddparker !
Thanks for take this into the docs.
But I think there is still an issue changing the theme of a button dynamical.
After changing the theme and hover the button, the initial theme is applied again and no theme change is possible anymore. I stuck on this when building the fiddle above and lose it out of sight somehow. http://jsfiddle.net/MauriceG/RgCF8/5/ for a quick click demo ...
A look into a web inspector tool shows, after the theme is changed, the input surrounding div keeps the initial theme. The ui-btn-hover and ui-btn-up classes are not applied correct anymore.

[agcolom]

Yes, I can see that now...
Lets see if we can fix it...

[MauriceG]

at https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.forms.button.js#L45
the code for getting the buttons classes is commented out (@Wilto's #3577 may explains why) and if I call that statement back in, the button markup works fine, but a subsequent call to refreshcomplains about that the button is not initiated and the button label is not refreshed.
http://jsfiddle.net/MauriceG/RgCF8/9/

[agcolom]

@MauriceG and if we wrap the button in another element as suggested in #3577 for now, do you think we can make that work?

[MauriceG]

@agcolom
If I try this, the button markup works but I also get the not initiated complaint from the refresh method.
May I make a mistake ...

[rskokan]

Hi all, sorry for the delay.

You can see the example at http://jsfiddle.net/enxXQ/66/

Switching the button colors between "normal" (white) and yellow via changing their themes. When I use the buttonMarkup() (thanks @uGoMobi), it works somehow, but sometimes the color instead of being white is black :-)

[MauriceG]

Hi @rskokan !
Because you do not set any theme on any container (page or content), the default theme is c.
The Buttons inherit that c-theme so they are white on startup.
When changing the theme to a, the buttons have to be black.
The workaround raises an error: cannot call methods on button prior to initialization and the hover "animation" is lost.
This may because you call refresh on the surrounding div, not the button input itself.
May we find a solution before @Wilto will open our eyes again ;-)

[gabrielschulhof]

Currently nothing happens if you set the theme on the button and then call refresh. Dynamically setting the theme is part of modifying options on widgets created earlier, and is a generic problem throughout the jQuery Mobile widget set. It is addressed in #3820, but that PR is currently on the back burner until after 1.2.

[gabrielschulhof]

I've removed this bug from under the 1.2 milestone, because the fix is part of the on-the-fly options effort which starts after 1.2. Feel free to re-apply the milestone if this is incorrect.