CODEWITHSUNDEEP
jquery-mobile
Adam Tuttle
Adam Tuttle

Reputation: 19824

Refreshing jQueryMobile styling on radio buttons on the fly

I'm attempting to re-style a vertical group of radio buttons, and the new theme I add to one of them shows up but the theme I remove from another/the rest doesn't go away.

My goal is to change theme of the selected radio button (the related controls, anyway) to make it stand out more when selected.

<div data-role="content">

    ...
    
    <fieldset data-role="controlgroup" id="showChooser">
        <legend><h3>Which show are you attending?</h3></legend>

        <input type="radio" name="activeShow" id="activeShow1" value="1" />
        <label for="activeShow1">
            <h2>Choice 1</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        <input type="radio" name="activeShow" id="activeShow2" value="2" />
        <label for="activeShow2">
            <h2>Choice 2</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        <input type="radio" name="activeShow" id="activeShow3" value="3" />
        <label for="activeShow3">
            <h2>Choice 3</h2>
            <p>03/25/2012 - 03/27/2012</p>
        </label>

        ...

    </fieldset>

    ...
    
</div>

This results in the following list being displayed:

base state
(source: skitch.com)

So, on-click of one of them, I'm running this code:

$('#showChooser input:radio').click(function(e) {
    $("#showChooser label").attr('data-theme','c');
    $(this).next().attr('data-theme','e');
    $("#settings").page();
});

The first line should, in theory, reset them all to the base-state of theme 'C', and then the second line would highlight the selected item. I can step through and see that these HTML changes are made, so it's obvious that what needs to happen next is for jQuery Mobile to re-parse and update the display.

Note the desperate attempt at refreshing the whole page with .page() at the end -- even that doesn't achieve the desired effect.

The first time you click one, it has the desired effect:

state 2

But subsequent clicks don't appear to un-highlight any previously selected rows:

state 3

I've also tried $("#showChooser").listview("refresh") and a few other similar things that I can't recall, but none have the desired effect. So what am I missing/doing wrong?

Upvotes: 4

Views: 2142

Answers (1)

Ryan
Ryan

Reputation: 28217

I had the exact same problem.

$('#showChooser input:radio').click(function(e) {
    $("#showChooser label").attr('data-theme','c').removeClass('ui-btn-up-e');
    $(this).next().attr('data-theme','e').addClass('ui-btn-up-e');
});

See this jQuery forum post.

Upvotes: 7

Related Questions