jquerymobile controlgroup not displaying properly

Question

I'm updating website and gradually changing all bits over to jquerymobile to make it more phone friendly.

I had a page where a user can select either a specific month or a date range. I toggled between them using some javascript. However, since changing things the display:block etc doesn't seem to work properly. It displays them out of position. The input fields are now displayed above the selector when you toggle between them. Please see http://jsfiddle.net/pfLme/1/

Obviously I would like to get them into the correct position. (The next task will be to try and get Datepicker working - if anyone fancies pointing me in the right direction for that)

Thank you.

(code is all on jsfiddle, but stackoverflow tells me i need to include it here too)

    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

...I realise now of course that I have to get used to thinking about & taking advantage of the jquery side of jquery mobile too. So far I came up with

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

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

I'm not sure yet how to include the if statement and toggle between the show and hide.

Answer 1

The error was only occurring in Firefox 27.0.1

Solution was to change <fieldset data-type="controlgroup"> to <div data-type="controlgroup"> around the radioboxes. Thanks to Omar for the help.

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");
});