Флажки формы не отображаются правильно во второй раз показаны - PullRequest
Новая
       30

Флажки формы не отображаются правильно во второй раз показаны

0 голосов
/ 02 мая 2011

У меня странная проблема с простой формой с флажками ..

При первом показе он выглядит нормально. Но затем после перехода на предыдущую страницу и перехода к ней снова - пользовательский интерфейс не обновляется, что приводит к появлению простых флажков без мобильного стиля 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>

Ответы [ 3 ]

1 голос
/ 21 мая 2011

У меня тоже была такая проблема, но в моем случае флажки динамически перерисовывались перед загрузкой страницы. Я попробовал обновить:

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

Но это дало мне ошибку, указав, что checkboxradio не был инициализирован. Однако, когда я попробовал это вместо:

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

Это заставило флажки появляться правильно каждый раз. Я все еще не могу справиться с JQuery Mobile и не могу точно сказать, что происходит, где и почему (я думаю, что я инициализирую флажки?), Но я подумал, что поделюсь в следующий раз, как кто-то, как я, погуглит их путь к этой теме.

0 голосов
/ 03 мая 2011

Я подозреваю, что этот код 

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

вызывается снова при переходе на страницу.Я бы предложил вытащить информацию / теги / и т. Д. До отображения страницы (при первой загрузке) и отображать ее статически.Поэтому при переходе назад он показывает те же данные.

из вас могут использовать одно из живых событий и изменить его стиль перед отображением страницы, например: 

$('.zipcodecheckbox').live('pagebeforeshow',function(event, ui){
    $("input[type='checkbox']").checkboxradio("refresh");
    // or
    $(".zipcodecheckbox").checkboxradio("refresh");
});
0 голосов
/ 02 мая 2011

Вы можете добавить некоторый javascript для повторной инициализации разметки jQuery Mobile для вашего флажка при каждой загрузке страницы. Примерно так: 

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