Jquery 문제, IE7-8의 .getJSON

Question

상태의 카운티에 대한 이미지 롤오버를 만드는 jquery 스크립트가 있습니다. 이 스크립트는 카운티 x/y 좌표 및 정보에 대해 XML 문서를 쿼리 한 다음 상태 이미지의 카운티가 위에있을 때이 정보를 표시합니다. 또한 임의의 카운티 및 카운티 정보는 카운티 중 하나가 들러 올 때까지 표시됩니다. 시청자가 군대를 벗어나면 무작위 디스플레이가 다시 시작됩니다.

스크립트는 FireFox 및 Chrome에서는 훌륭하게 작동하지만 Internet Explorer 7-8에서는 작동하지 않습니다. IE에서는 임의의 디스플레이가 작동하지만 카운티 중 약 75 %가 마우스 오버 기능에 응답하지 않으며 패턴이 분명하지 않습니다. (내가 말했듯이, 그들은 다른 브라우저에서 훌륭하게 작동합니다).

//____________________________________________________________________________________________________________ CONSTANTS 
    var DATA_SOURCE  = '/CountyData.js';  // URL of the page that serves JSON county data 

    var IMAGE_PATH  = '/images/counties/';  // Relative path to the county image folder 

    var CSS_WRAPPER_CLASS = 'countyWrapper';  // CSS class to apply to each county's wrapper <div> 
    var CSS_IMAGE_CLASS = 'countyImage';   // CSS class to apply to <img> tags 
    var CSS_INFO_CLASS = 'countyInfo';   // CSS class to apply to info <div> tags 

    var ROTATION_INTERVAL = 10;      // seconds to show each random county while rotating 


    //____________________________________________________________________________________________________ PRIVATE VARIABLES 
    var _isHovering   = false; 
    var _autoSelectedCounty = null; 


    //______________________________________________________________________________________________________ FUN BEGINS HERE 
    function highlightRandomCounty() { 
     // only show a new county if we're not hovering over another one 
     if (!_isHovering) { 
      var children = $('#map-holder').children('div'); 
      var randomIndex = parseInt(Math.random() * children.length); 

      _autoSelectedCounty = $(children[randomIndex]).children('img')[0]; 

      hideAllCounties(); 
      showCounty(_autoSelectedCounty); 
     } 
    } 

    function showCounty(countyImage) { 
     $(countyImage).stop().animate({ opacity: 1.0 }, 500); 
     $(countyImage).siblings().animate({ opacity: 1.0 }, 500); 
    } 

    function hideCounty(countyImage) { 
     $(countyImage).stop().animate({ opacity: 0.0 }, 0); 
     $(countyImage).siblings().animate({ opacity: 0.0 }, 0); 
    } 

    function hideAllCounties() { 
     var counties = $('#map-holder').children('div'); 

     for (var i = 0; i < counties.length; i++) { 
      hideCounty($(counties[i]).children('img')[0]); 
     } 
    } 

    $(document).ready(function() { 
     // show the pre-loader 
     var preloader = document.createElement('div'); 
     $('#map-holder').append(preloader); 
     $(preloader).attr('id', 'preloader'); 

     //testing var 
     var countyCount = 1; 
     $.getJSON(DATA_SOURCE, function(data) { 

      $.each(data.countyData, function(i, item) { 
       // create the container <div> and append it to the page 
       var container = document.createElement('div'); 
       $('#map-holder').append(container); 

       // configure the container 
       $(container).attr('id', 'div' + item.data_county); 
       $(container).attr('class', CSS_WRAPPER_CLASS); 
       $(container).attr('style', 'left:'+ item.data_x + 'px; top:' + item.data_y + 'px;'); 


       // create the <img> and append it to the container 
       var countyImage = document.createElement('img'); 
       $(container).append(countyImage); 

       // configure the image 
       $(countyImage).attr('id', item.data_county + 'Image'); 
       $(countyImage).attr('class', CSS_IMAGE_CLASS); 
       $(countyImage).attr('src', IMAGE_PATH + item.data_county_image + '.png'); 
       $(countyImage).load(function() { 
        // wait for the image loads before setting these properties 
        $(this).attr('width', countyImage.width); 
        $(this).attr('height', countyImage.height); 
       }); 

       $(countyImage).hover(function() { 

        _isHovering = true; 
        hideCounty(_autoSelectedCounty); 
        showCounty($(this)); 
       }, 

       function() { 
        _isHovering = false; 
        hideCounty($(this)); 
       }); 

       $(countyImage).click(function() { 
        window.location.href = item.factsLink; 
       }); 

       // create the info <div> and append it to the container 
       var countyInfo = document.createElement('div'); 
       $(container).append(countyInfo); 
       $(countyInfo).attr('id', item.data_county + 'Info'); 
       $(countyInfo).attr('class', CSS_INFO_CLASS); 

       // Handle county naming exceptions 
       var countyName = item.data_county.toUpperCase(); 
       if (countyName == 'SAINTJOYVILLE') { 
        countyName = 'ST. JOYVILLE'; 
       } else { 
        if (countyName.indexOf("SAINT") > -1) { 
         countyName = "ST. " + countyName.substr(5); 
        } 
        countyName += " COUNTY"; 
       } 
       if (item.story_link == 'no') { 
        $(countyInfo).html('<strong>' + countyName + '</strong><br />' + item.data_total_students + ' Students<br />' + item.data_total_alumni + ' Alumni<br />' + '$' + item.economicImpact + ' Impact<br />Click For More...'); 
       } else { 
        $(countyInfo).html('<strong>' + countyName + '</strong><br />' + item.data_total_students + ' Students<br />' + item.data_total_alumni + ' Alumni<br />' + '$' + item.economicImpact + 'Impact<br /><strong>Latest story:</strong><br /><img src="' + item.story_link + '" alt="story" height="75" width="110"><br />' + item.story_title + '<br />Click For More...'); 

       } 
      }); 
     }); 

     // hide the pre-loader 
     $('#preloader').animate({ opacity: 0.0 }, 1000); 

     //randomly rotate through the counties 
     setInterval(highlightRandomCounty, ROTATION_INTERVAL * 1000); 
    }); 

IE에서 올바르게 작동하려면 사용 가능/사용 불가능으로 설정해야 할 것이 있습니까? 아마도 IE에서 .getJSON/캐싱 문제일까요? 모든 정보는 크게 감사하겠습니다.

Answer 1

완전히 무작위 인 경우 이미지가 아직로드되지 않았을 때 IE가 호버를 올바르게 설정하지 못하고 있습니다. 폭과 높이를 설정 한 후 호버 설정을 load() 콜백 함수로 옮겨보십시오.

편집 : 새 정보를 바탕으로 스크립트의 맨 윗줄을 ".js"대신 ".json"으로 끝내는 것이 좋습니다. 귀하의 현재 웹 호스트 (올바르게) json 대신 mime-type x-javascript로 JSON 응답을 반환 할 수 있습니다. IE는 확실히 혼동을 줄 수 있습니다.

Answer 2

일반적인 웹 요청으로 모든 Ajax 요청을 처리하는 IE에는 몇 가지 알려진 문제점이 있습니다. 그래서 일들이 캐싱됩니다.

당신은 시도 할 수

.... 또한

$.ajaxSetup({ cache: false }); 
$.getJSON("/MyQueryUrl", 
    function(data) { 
    // do stuff with callback data 
    $.ajaxSetup({ cache: true }); 
    }); 

, 서버 측 설정 캐시 가능성 해당 *** 알려진 문제 목록에서

public class NoCacheAttribute : ActionFilterAttribute 
{ 
    public override void OnActionExecuted(ActionExecutedContext context) 
    { 
     context.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache); 
    } 
}