0

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.

devsie
  • 131
  • 11
  • the fieldcontain class automatically puts label above input on narrow screens and on wider screens puts the label to the left. Drag the splitter in jsFiddle to resize the page and see this behavior. Is this not what you want? – ezanker Feb 23 '14 at 21:48
  • Hello, it's not the label that's the problem. On page load you'll notice the checkboxes are at the top. After toggling the checkboxes are at the bottom. :( – devsie Feb 23 '14 at 22:03
  • 1
    I cant reproduce your issue, if you can post a snapshot it'll be of help. Anyway, use predefined class `ui-screen-hidden` better than `show()` and `hide()` http://jsfiddle.net/Palestinian/pfLme/10/ – Omar Feb 23 '14 at 23:03
  • Ahhh, thank you. Hadn't bothered to try it in a different browser. It's happening in Firefox, but not chrome or IE. Hmmm. Thank you also for improving the jscript. – devsie Feb 24 '14 at 00:33
  • Yep, so only occurring in Firefox. something to do with display:table-column and because of the
    around the radioboxes. Hence, i'm just going to leave them out of a
    as a makeshift solution.
     – devsie Feb 24 '14 at 00:50
  • @Omar I've just noticed unfortunately that javascript snippet means that if the user selects the already selected checkbox, it still toggles the visibility. – devsie Feb 24 '14 at 01:20
  • 1
    this can be fixed using if statement http://jsfiddle.net/Palestinian/pfLme/12/ – Omar Feb 24 '14 at 01:26

1 Answers1

0

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");
});
devsie
  • 131
  • 11