I have problem with jquery/javascript on Internet EXPLODER 7.0. On modern browsers (including IE 8 and 9) everything works perfectly. IE 7 doesn’t hide element, doesn’t display datepicker – Overall, the script doesn’t work like on other “normal” browsers.
This is my jsfiddle: http://jsfiddle.net/W7NHK/
I would be grateful for any help!
Here is my html:
<fieldset>
<div class="type-text">
<label for="date_from">Date1:</label>
<input type="text" size="20" id="date_from" name="rent-a-car[date_from]" value="" readonly="readonly" />
</div>
<div class="type-select">
<label for="time_from_hour">Hour1: </label>
<select id="time_from_hour" name="rent-a-car[time_from_hour]" class="select">
<option value="">---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<span> : </span>
<label for="time_from_minute" style="display: none;">minute1: </label>
<select id="time_from_minute" name="rent-a-car[time_from_minute]" class="select">
<option value="">---</option>
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
</div>
<div class="type-select">
<label for="get_car">City1:</label>
<select id="get_car" name="rent-a-car[get_car]" class="select">
<option value="">---</option>
<option value="Katowice">Katowice</option>
<option value="Kraków">Kraków</option>
<option value="Warszawa">Warszawa</option>
<option value="Wrocław">Wrocław</option>
<option value="Gdańsk">Gdańsk</option>
</select>
</div>
<div class="type-select">
<label for="get_city_district" style="display: none;">District </label>
<select id="get_city_district" name="rent-a-car[get_city_district]" class="select">
<option id="e1a" value="direction1">direction1</option>
<option id="e1b" value="direction2">direction2</option>
<option id="e2a" value="direction3">direction3</option>
<option id="e2b" value="direction4">direction4</option>
<option id="e3a" value="direction5">direction5</option>
<option id="e3b" value="direction6">direction6</option>
<option id="e4a" value="direction7">direction7</option>
<option id="e4b" value="direction8">direction8</option>
<option id="e5a" value="direction9">direction9</option>
<option id="e5b" value="direction10">direction10</option>
<option id="e6" value="direction11">direction11</option>
<option id="e8" value="direction12">direction12</option>
</select>
</div>
</fieldset>
<fieldset>
<div class="type-text">
<label for="date_to">Date2:</label>
<input type="text" size="20" id="date_to" name="rent-a-car[date_to]" value="" readonly="readonly" />
</div>
<div class="type-select">
<label for="time_to_hour">Hour2: </label>
<select id="time_to_hour" name="rent-a-car[time_to_hour]" class="select">
<option value="">---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<span> : </span>
<label for="time_to_minute" style="display: none;">minute: </label>
<select id="time_to_minute" name="rent-a-car[time_to_minute]" class="select">
<option value="">---</option>
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
</div>
<div class="type-select">
<label for="return_car">City2:</label>
<select id="return_car" name="rent-a-car[return_car]" class="select">
<option value="">---</option>
<option value="Katowice">Katowice</option>
<option value="Kraków">Kraków</option>
<option value="Warszawa">Warszawa</option>
<option value="Wrocław">Wrocław</option>
<option value="Gdańsk">Gdańsk</option>
</select>
</div>
<div class="type-select">
<label for="return_city_district" style="display: none;">Odstawienie samochodu: </label>
<select id="return_city_district" name="rent-a-car[return_city_district]" class="select">
<option id="d1a" value="direction1">direction1</option>
<option id="d1b" value="direction2">direction2</option>
<option id="d2a" value="direction3">direction3</option>
<option id="d2b" value="direction4">direction4</option>
<option id="d3a" value="direction5">direction5</option>
<option id="d3b" value="direction6">direction6</option>
<option id="d4a" value="direction7">direction7</option>
<option id="d4b" value="direction8">direction8</option>
<option id="d5a" value="direction9">direction9</option>
<option id="d5b" value="direction10">direction10</option>
<option id="d6" value="direction11">direction11</option>
<option id="d7" value="direction12">direction12</option>
</select>
</div>
</fieldset>
<fieldset>
<div style="display:none;">
<div class="type-text">
<label for="total_hour1"> </label>
<input type="text" size="20" id="total_hour1" name="rent-a-car[total_hour1]" value="" readonly="readonly" />
</div>
<div class="type-text">
<label for="total_hour2"> </label>
<input type="text" size="20" id="total_hour2" name="rent-a-car[total_hour2]" value="" readonly="readonly" />
</div>
</div>
<div class="type-text">
<label for="finish_day">Total day: </label>
<input type="text" size="20" id="finish_day" name="rent-a-car[finish_day]" value="" readonly="readonly" />
</div>
<div id="three_day">Sample TXT</div>
</fieldset>
and my js:
var today = new Date().getDay();
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
tomorrow.setHours(0, 0, 0, 0);
var disabledDays = ['15/8/2012', '1/11/2012', '11/11/2012', '25/12/2012', '26/12/2012'];
function noWeekendsOrHolidays(date) {
var noWeekends = $.datepicker.noWeekends(date);
var holiday = $.inArray($.datepicker.formatDate('d/m/yy', date), disabledDays) > -1;
var friSat = today >= 5 && date.getTime() == tomorrow.getTime();
return [!friSat];
}
$(function () {
var disabledDays = ['15/8/2012', '01/11/2012', '11/11/2012', '25/12/2012', '26/12/2012'];
$.datepicker.setDefaults({
dateFormat: 'dd/mm/yy', dayNamesMin: ['Nie', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob'],
dayNames: ['Niedziela','Poniedzialek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
monthNamesShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
changeMonth: true, changeYear: true, numberOfMonths: 1, constrainInput: true, firstDay: 1});
$('#date_from, #date_to').datepicker({
beforeShowDay: noWeekendsOrHolidays,
defaultDate: '+1d', minDate: '+1d',
onSelect: function (dateText, inst) {
var dateMin = $('#date_from').datepicker('getDate');
var dateMax = $('#date_to').datepicker('getDate');
if (this.id == 'date_from') {
var rent_date_from = new Date(
dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);
var rent_date_to = new Date(
dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 29);
$('#date_to').datepicker('option', {minDate: rent_date_from, maxDate: rent_date_to});
}
$('#day_of_week1').val($.datepicker.formatDate('DD', dateMin));
$('#day_of_week2').val($.datepicker.formatDate('DD', dateMax));
// sprawdzenie czy dzien nalezy do swiat - odbior
if( $.inArray($("#date_from").val(), disabledDays)>=0) {
var freeday_value = 'holiday';
$('#weekend_day1').val(freeday_value);
}else{
$('#weekend_day1').val('');
}
// sprawdzenie czy dzien nalezy do swiat - zwrot
if( $.inArray($("#date_to").val(), disabledDays)>=0) {
var freeday_value = 'holiday';
$('#weekend_day2').val(freeday_value);
}else{
$('#weekend_day2').val('');
}
compute(); //Add compute
}
});
$.viewMap_get = { // pokazwywanie wartoci w zaleznosci od wybranego miasta
'0': $([]),
'Katowice': $('#e1a, #e1b, #e6, #e8'),
'Kraków': $('#e2a, #e2b, #e6, #e8'),
'Warszawa': $('#e3a, #e3b, #e6, #e8'),
'Wrocław': $('#e4a, #e4b, #e6, #e8'),
'Gdańsk': $('#e5a, #e5b, #e6, #e8')
};
$.each($.viewMap_get, function() { $(this).remove(); });
$('#get_city_district').hide();
$('#get_car').on('change', function() {
// hide all
$.each($.viewMap_get, function() { $(this).remove(); });
$('#get_city_district').hide();
// show current
$('#get_city_district').append($.viewMap_get[$(this).val()]).show();
var id = $.viewMap_get[$(this).val()].attr("id");
$('#'+id).attr('selected', 'selected');
});
$.viewMap_return = {
'0' : $([]),
'Katowice' : $('#d1a, #d1b, #d6, #d7'),
'Kraków' : $('#d2a, #d2b, #d6, #d7'),
'Warszawa' : $('#d3a, #d3b, #d6, #d7'),
'Wrocław' : $('#d4a, #d4b, #d6, #d7'),
'Gdańsk' : $('#d5a, #d5b, #d6, #d7')
};
$.each($.viewMap_return, function() { $(this).remove(); });
$('#return_city_district').hide();
$('#return_car').on('change', function() {
$.each($.viewMap_return, function() { $(this).remove(); });
$('#return_city_district').hide();
// show current
$.viewMap_return[$(this).val()].show();
$('#return_city_district').append($.viewMap_return[$(this).val()]).show();
var id = $.viewMap_return[$(this).val()].attr("id");
$('#'+id).attr('selected', 'selected');
});
function compute() {
var c = $('select#time_from_hour').val();
var d = $('select#time_from_minute').val();
var e = $('select#time_to_hour').val();
var f = $('select#time_to_minute').val();
var g = $('input#date_from').val();
var h = $('input#date_to').val();
date1= g.split("/");
var timestamp = (new Date(date1[2],date1[1],date1[0],c,d).getTime()/1000) + 7200;
$('#total_hour1').val(timestamp);
date2= h.split("/");
var timestamp = (new Date(date2[2],date2[1],date2[0],e,f).getTime()/1000) + 7200;
$('#total_hour2').val(timestamp);
var x = -$('input#total_hour1').val();
var y = -$('input#total_hour2').val();
var total_time = x - y;
result = total_time / 86400;
new_number = Math.ceil(result);
if(isNaN(new_number)) {
var new_number = 0;
}
$('#finish_day').val(new_number);
if( parseInt($("#finish_day").val()) < 4 ) {
$('#return_car').children('option[value=' + $('#get_car').val() + ']').prop('disabled', false).attr('selected', true).siblings().prop('disabled', true);
if ($('#return_car').val()) $('#return_car').change();
}
else {
$('#get_car > option, #return_car > option').prop('disabled', false);
$('#three_day').hide(2000, function () {
$(this).remove();
});
}
}
//$('#three_day').hide();
// zaznaczanie tej samej godziny i minuty
$('#time_from_hour').change(function () {
$('#time_to_hour').val($(this).val());
});
$('#time_from_minute').change(function () {
$('#time_to_minute').val($(this).val());
});
// linijki konieczne do wykonania funkji compute
$('select#time_from_hour').change(compute);
$('select#time_from_minute').change(compute);
$('select#time_to_hour').change(compute);
$('select#time_to_minute').change(compute);
//$('select#return_car').change();
$('select#get_car').change(compute);
$('input#finish_day').change(compute);
$("#birthday").datepicker({
yearRange: '1950:2010',
});
// konkiguracja wywietlania bledu
$(".error").mouseover(function () {
$(this).hide(2000, function () {
$(this).remove();
});
});
});
You simple have a syntax error here:
yearRange: '1950:2010',The problem is in the trailing comma.
See explanation here: Are trailing commas in arrays and objects part of the spec?
P.S. Use English for comments