jquery hide() not working on IE & Safari, works in FF

Question

Thank you in advance for any help you can provide.

I have a form with a date picker on it, so if you click on the input box a nice looking calendar pops up. Clicking on a specific day in the calendar, then fills in the date on the input box.

Next I have an input box for selecting a time. Based on the day of the week, the list of times change. For example, if you pick a Friday, only 10am - 1pm options will show.

I have this working in firefox only. On IE and Safari, if you pick a friday, it will show 9am - 6pm, which is the default. It looks like the hide() is not working.

I'm not seeing any error messages in developer tools for IE or safari.

Here is the HTML:

<input alt="date" type="text" name="formfield_day" id="formfield_day"  />

<select name="formfield_time" id="formfield_time" class="ri_field">
    <option value="0" selected="selected">Time</option> 

            <option value="9 am" id="time9">9:00 AM</option>
            <option value="10 am" id="time10">10:00 AM</option>
            <option value="11 am" id="time11">11:00 AM</option>
            <option value="12 pm" id="time12">12:00 PM</option>
            <option value="1 pm" id="time1">1:00 PM</option>
            <option value="2 pm" id="time2">2:00 PM</option>
            <option value="3 pm" id="time3">3:00 PM</option>
            <option value="4 pm" id="time4">4:00 PM</option>
            <option value="5 pm" id="time5">5:00 PM</option>
            <option value="6 pm" id="time6">6:00 PM</option>

 </select>

Here is the javascript:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
$(document).ready(function(){

    $("#formfield_day").datepicker({ 
     beforeShowDay: nonWorkingDates,
    minDate: 0, 
    maxDate: "+2m" 
    });

  });
</script>


<script>
        $( document ).ready(function() {
            changeTime();
        });

        $('#formfield_day').bind('change', function(event) {
            changeTime();  
        });

        function changeTime() {

    //  var x = $('#formfield_day').val();

        var currentDate = $( "#formfield_day" ).datepicker( "getDate" );


        var weekday = new Array(7);
        weekday[0]=  "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";

        if (currentDate) {
        var dayName = weekday[currentDate.getDay()]; 

        hideAll();

        if (dayName == "Tuesday") {
            hideAll();
                $('#time1').show();
                $('#time2').show();
                $('#time3').show();
                $('#time4').show();
                $('#time5').show();
                $('#time6').show();
            }



            else if (dayName == "Friday") {
            hideAll();
                $('#time9').show();
                $('#time10').show();
                $('#time11').show();
                $('#time12').show();

            }
        }}

        function hideAll() {            
            $('#time1').hide();
            $('#time2').hide();
            $('#time3').hide();
            $('#time4').hide();
            $('#time5').hide();
            $('#time6').hide();
            $('#time7').hide();
            $('#time8').hide();
            $('#time9').hide();
            $('#time10').hide();
            $('#time11').hide();
            $('#time12').hide();
        }

</script>

Any ideas? I'd appreciate any help with tracking down this bug.

Hiding `option` elements is not something you can do in all browsers; just doesn't work that way. See: http://stackoverflow.com/a/4399040/594235 — Sparky, Nov 19 '14 at 20:02
That answer is from 2010, this hasn't been fixed in newer browsers? — aa rr, Nov 19 '14 at 20:36
"fixed" implies that it was a bug (not following standards). However, if no standard defines this behavior then every browser is free to implement however they feel is correct. Meanwhile, still an issue in 2012: http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css — Sparky, Nov 19 '14 at 20:48
I just tried switching all the .hide() to .prop('disabled', true); and the equivalent for show() with no luck. — aa rr, Nov 19 '14 at 20:52
If you read [the answer I posted](http://stackoverflow.com/a/4399040/594235), the OP specifically states that the `.prop` method is not going to work in all browsers. It's basically not much different than what you've already tried by using `.hide()`. Sorry, I don't have a solution for you... you'll have to hack something together based on each browser. — Sparky, Nov 19 '14 at 21:00
I ended up using your advice to find a solution. Basically I had to rewrite all the code, but this was the correct method of attack. Thank you very much for the help! — aa rr, Nov 21 '14 at 19:26
Stupid question, this is my first post. How to I make it so this question is 'resolved' and you are given credit for the correct answer? — aa rr, Nov 21 '14 at 19:28
Thank-you for your consideration in wanting to follow the rules. In this case, it's best for me to just mark this as a "duplicate" since you've confirmed what I said originally. In the future, you could also post an answer yourself and "accept" it. — Sparky, Nov 21 '14 at 19:35

score 0 · Answer 1 · answered Nov 19 '14 at 19:05

0

try using

HIDE:

  $('#time1').css("display","none");

SHOW:

  $('#time1').css("display","block");

answered Nov 19 '14 at 19:05

Mart Reynders

26
1

1

Thank you for the suggestion, but unfortunately this did not fix the issue. – aa rr Nov 19 '14 at 19:30
@aarr is your java script above the form ? – Mart Reynders Nov 19 '14 at 19:31
for css or jquery hide/show it should be before the form because else it wouldn't affect it – Mart Reynders Nov 19 '14 at 19:33
Yes, it is before the form. – aa rr Nov 19 '14 at 19:39
i guess it has something to do with IE and safari – Mart Reynders Nov 19 '14 at 19:41
See: http://stackoverflow.com/a/4399040/594235 – Sparky Nov 19 '14 at 20:03
It has to do with no standards being written that say what is supposed to happen in this case. Therefore, browsers are not going to handle this predictably. – Sparky Nov 19 '14 at 21:10

score 0 · Answer 2 · answered Nov 19 '14 at 19:39

0

I believe what you're doing is trying to hide options inside a select might not be the best approach , try creating one select for each day of the week and show them accordingly like:

else if (dayName == "Friday") {
            hideAll(); // hide all the selects
                $('#fridaySelect').show(); // only shows friday select with all its valid options

answered Nov 19 '14 at 19:39

guilhebl

8,330
10
47
66

That's a very interesting idea. Unfortunately I do not think I can pull that off because the fields are being generated by the database and it is only expecting one value. I'm not sure if creating 7 different IDs will work, but it's worth looking into. I'll get back to you after trying it out. Thanks! – aa rr Nov 19 '14 at 19:58

jquery hide() not working on IE & Safari, works in FF

2 Answers2