2011-05-02 42 views
0

我有一个简单的形式与复选框一个奇怪的问题..表显示复选框正确第二次

第一次它表明,它看起来不错。但然后导航回到前一页,后是它再次 - UI是不是更新导致没有jQuery手机风格的普通复选框..

我疯狂谷歌搜索,发现像.fieldcontain();但它不工作=(

的数据通过淘汰赛绑定检索..

任何好的想法?

下面的代码...

<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 data-bind="template: 'countyListTemplate'"></div> 

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

回答

0

您可以添加一些JavaScript重新初始化您的每个页面加载复选框的jQuery Mobile标记。像这样的:

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

这绝对是一个改进 - 但现在行是分开的..在原来他们是一个大行与行...修复后,每行都有自己的部分..有道理? – 2011-05-02 16:03:22

+0

嗯,我没有真正定制超出JQM为您提供的标准内容的表单布局的经验。对不起...虽然他们的表格确实很好看,但也许你会考虑使用他们给你的东西? – Spike 2011-05-02 17:11:03

0

当你转换回页我怀疑这个代码

{{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}} 

再次被调用。我建议在页面显示之前(在第一次加载时)拉动信息/标签/等,并静态显示它。所以当转换回来时显示相同的数据。

,你可以使用现场活动之一,之前的页面显示restyle它,例如:动态

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

我是有这样的问题太多,但对我来说,复选框正在重绘在加载页面之前。我想提神:

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

但它给了我一个错误,指出checkboxradio尚未初始化。然而,当我尝试这样做,而不是:

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

它使复选框显示正确每次。我仍然在使用JQuery Mobile在黑暗中摸索,并且无法确切地说出发生在哪里以及为什么(我想我正在初始化复选框?),但是我想我会在下次有人像我一样使用他们的方式时分享它们到这个线程。

+0

有完全相同的问题 - 删除“刷新”也适用于我。 – 2012-01-13 18:01:20