Контрольная группа jquerymobile не отображается должным образом

Question

Я обновляю веб-сайт и постепенно перехожу на jquerymobile, чтобы сделать его более удобным для телефона.

У меня была страница, где пользователь мог выбрать либо конкретный месяц, либо диапазон дат. Я переключался между ними, используя некоторый JavaScript. Однако, с тех пор, как что-то изменилось, дисплей: блок и т. Д., Похоже, не работает должным образом. Он отображает их вне позиции. Поля ввода теперь отображаются над селектором при переключении между ними. Пожалуйста, смотрите http://jsfiddle.net/pfLme/1/

Очевидно, я хотел бы получить их в правильном положении. (Следующая задача будет состоять в том, чтобы попытаться заставить Datepicker работать - если кому-то кажется, что он указывает мне правильное направление)

Спасибо.

(код полностью на jsfiddle, но stackru говорит мне, что мне нужно включить его и здесь)

    function showType(allornone) {

    if (allornone == '1month')

    {
        document.getElementById('btwdateselector').style.display = 'none';
        document.getElementById('monthselector').style.display = 'block';

        document.getElementById('datestart').value = '';
        document.getElementById('dateend').value = '';

    }
    if (allornone == '2dates')

    {
        document.getElementById('btwdateselector').style.display = 'block';
        document.getElementById('monthselector').style.display = 'none';
    }

} //end function

... Теперь я, конечно, осознаю, что мне нужно привыкнуть думать и использовать преимущества jquery в jquery mobile. До сих пор я придумал

$(document).on('click', '#certainmonth', function(a) {
    $('#monthselector').hide();});

$(document).on('click', '#btwdates', function(a) {
    $('#btwdateselector').show();});

Я пока не уверен, как включить оператор if и переключаться между показом и скрытием.

Answer 1

Ошибка возникала только в Firefox 27.0.1

Решение было изменить <fieldset data-type="controlgroup"> в <div data-type="controlgroup"> вокруг радиобоксов. Спасибо Омару за помощь.

http://jsfiddle.net/pfLme/11/

<form action="page.php" name="mileageform" class="responsive_block" data-ajax="false">
    <div data-role="controlgroup">
        <legend>Should be at TOP</legend>
        <input type="radio" name="searchtype" value="certainmonth" id="certainmonth" checked="checked" />
        <label for="certainmonth">Mileage for certain month</label>
        <input type="radio" name="searchtype" value="btwdates" id="btwdates" />
        <label for="btwdates">Mileage between two dates</label>
    </div>
    <fieldset id="monthselector" data-role="controlgroup" data-type="horizontal">
        <select name="month" data-native-menu="false">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <select name="year" data-native-menu="false">
            <option value="2000">2000</option>
            <option value="2001">2001</option>
        </select>
    </fieldset>
    <fieldset id="btwdateselector" class="ui-screen-hidden">
        <div class="ui-field-contain">
            <label for="datestart">Start Date:</label>
            <input type="date" id="datestart" name="datestart" placeholder="dd/mm/yyyy" />
        </div>
        <div class="ui-field-contain">
            <label for="dateend">End Date:</label>
            <input type="date" id="dateend" name="dateend" placeholder="dd/mm/yyyy" />
        </div>
    </fieldset>
    <input type="submit" onclick="return checkForm();" value="Display Mileage" />
</form>


$(document).on('change', '#certainmonth, #btwdates', function (a) {
    $('#monthselector').toggleClass("ui-screen-hidden");
    $('#btwdateselector').toggleClass("ui-screen-hidden");
});