Form checkboxes not being displayed correctly second time shown

I have a weird problem with a simple form with checkboxes..

The first time it's shown it looks fine.. But then after navigating back to the previous page and be to it again - the ui is not updates resulting in plain checkboxes without jQuery mobile style..

I've Googled like crazy and found a couple of hints like .fieldcontain(); but it's doesn't work =(

The data is being retrieved through knockout bindings..

Any good ideas?

Here's the code...

<div id="searchCitiesPage" data-role="page" data-theme="a" class="page searchCities"> 
<header data-role="header" data-theme="b">
</header>
<div data-role="content" class="content" data-theme="a">  
    <script id="countyListTemplate" type="x-jquery-tmpl">
        <form id="fieldform" action="form.php" method="post">
            <fieldset id="fieldsetgroup" data-role="controlgroup">

                {{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
                    <input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
                    <label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
                {{/each}}
            </fieldset>
        </form>
    </script>

    <div da开发者_如何转开发ta-bind="template: 'countyListTemplate'"></div> 

    <div class="submit">
        <a href="#searchCriteriasPage" class="navbutton submitPostnumre">Næste</a>
    </div>
</div>

I was having a problem like this too, but in my case, the checkboxes were being redrawn dynamically before loading the page. I tried refreshing:

$("input[type='checkbox']").checkboxradio("refresh");

But it gave me an error stating that checkboxradio hadn't been initialized. However, when I tried this instead:

$("input[type='checkbox']").checkboxradio();

It made the checkboxes appear correctly every time. I'm still fumbling in the dark with JQuery Mobile and can't say exactly what happens where and why (I think I'm initializing the checkboxes?), but I thought I would share for the next time someone like me googles their way to this thread.

You can add some javascript to re-initialize the jQuery Mobile markup for your checkbox on each page load. Something like this:

<script type="text/javascript">
    $(function() {
        $('[data-role=page]').live('pageshow',function(){ 
            $('#fieldform').find('input').checkboxradio();
        });
    });
</script>

I would suspect this code

{{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
    <input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
    <label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
{{/each}}

is being called again when you transition back to the page. I would suggest pulling the infomation/tags/etc.. before the page displays (on the first load) and display it statically. So when transitioning back it shows the same data.

of you could use one of the live events and restyle it before the page shows, example:

$('.zipcodecheckbox').live('pagebeforeshow',function(event, ui){
    $("input[type='checkbox']").checkboxradio("refresh");
    // or
    $(".zipcodecheckbox").checkboxradio("refresh");
});