2012-10-23 3 views
1

인터넷 익스플로러 7.0에서 jquery/javascript에 문제가 있습니다. 최신 브라우저 (IE 8 및 9 포함)에서는 모든 것이 완벽하게 작동합니다. IE 7은 요소를 숨기지 않고 datepicker를 표시하지 않습니다. 전반적으로 스크립트는 다른 "일반"브라우저와 같이 작동하지 않습니다. http://jsfiddle.net/W7NHK/jQuery/JavaScript 스크립트가 IE7에서 작동하지 않습니다.

내가 어떤 도움을 감사하게 될 것입니다 :

이 내 jsfiddle입니다!

<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> 

내 JS :

여기 내 HTML입니다

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


}); 

답변

1

당신 간단한 여기에 구문 오류가 있습니다 yearRange: '1950:2010',

문제는 후행 쉼표입니다. 여기

참조 설명 : Are trailing commas in arrays and objects part of the spec?

P.S. 의견을 위해 영어를 사용하십시오

+0

도움을 위해 THX - 하나의 작은 혼수 상태에서 IE7을 죽일 수 있습니다. – Adrian

+0

지금은 IE7에서도 작동하는 것 같습니다. @Adrian 당신도 IE 툴바 콘솔에서 오류를 확인할 수 있습니다. IE9에서는 F12를 누르고 Console 탭을 선택하십시오. – Amitd

관련 문제