Skip to content
This repository

Changing button's data-theme programatically #4317

Closed
rskokan opened this Issue May 08, 2012 · 14 comments

6 participants

Radek Skokan Todd Parker Anne-Gaelle Colom Gabriel "_|Nix|_" Schulhof Maurice Gottlieb Jasper de Groot
Radek Skokan
rskokan commented May 08, 2012

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");
Anne-Gaelle Colom
Collaborator
agcolom commented May 11, 2012

@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

Maurice Gottlieb

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

Jasper de Groot
Owner
uGoMobi commented May 11, 2012

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.

Anne-Gaelle Colom
Collaborator
agcolom commented May 11, 2012

@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

Todd Parker

@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?

Todd Parker toddparker closed this May 12, 2012
Maurice Gottlieb

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.

Anne-Gaelle Colom
Collaborator
agcolom commented May 13, 2012

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

Anne-Gaelle Colom agcolom reopened this May 13, 2012
Maurice Gottlieb

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/

Anne-Gaelle Colom
Collaborator
agcolom commented May 13, 2012

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

Maurice Gottlieb

@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 ...

Radek Skokan
rskokan commented May 13, 2012

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 :-)

Maurice Gottlieb

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 ;-)

Gabriel "_|Nix|_" Schulhof
Collaborator

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.

Gabriel "_|Nix|_" Schulhof
Collaborator

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.

Gabriel "_|Nix|_" Schulhof gabrielschulhof closed this in 2e21c6b October 30, 2012
Scott Yeskie s42ky referenced this issue in s42ky/ayso-schedules February 11, 2013
Closed

Favorite teams #4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.