Question

我正在尝试将我的搜索页面升级到所有AJAX请求，我在IE8和Firefox中都遇到了一些问题。一切似乎都适用于Chrome（喜欢那些家伙）。以下是相关网页：http://jsfiddle.net/qgWRe/1/

问题似乎存在于FF中的两个级别和IE8中的一个单独的实例中（尽管它可能是相关的）。

首先，当我加载页面时，我收到一个我从未见过的警告，声称“图像损坏或被截断：http://scribe.twitter.com/scribe？.........”。我已经读过这可能是一个firebug bug并且它不是一个关键问题，但它只发生在我的AJAX-ified脚本中。它从未在我的非AJAX版本页面中表现出来。它也只是零星发生。

看似更大的问题（实际影响功能）是AJAX事件处理程序引发错误说明

   An invalid or illegal string was specified" code: "12
  [Break On This Error] Failed to load source for: http://localhost:8000/search/

我认为我已将其隔离到我的代码中，该代码尝试根据AJAX返回的结果填充Google地图标记。我首先删除旧标记，然后动态创建新标记作为AJAX回调。

 //Removes stale Google Maps markers
var deleteMarkers=function(){
    $.each(marker,function(n,value){
        if(marker[n]){
            marker[n].setMap(null);
        }
    });
    //deletes the old markers
    marker.length = 0;
    latlng.length = 0;

};


//Adds new markers
var resetMarkers=function(){
    var newLatLng=new Array();
    var markerArray=new Array();

    $('.entries').each(function(index){
        var entry=$(this);

        latlng[index]=new google.maps.LatLng($(this).attr('data-lat'), $(this).attr('data-lng'));
    //  alert(newLatLng);
        marker[index]=new google.maps.Marker({
            position:latlng[index],
            icon:'{{site}}media/map-icons/iconr'+(index+1)+'.png',
            map:map,
            });

        if(marker[index]){
            marker[index].setMap(map);
        }   

        //changes google maps icon color on hover over icon 
        google.maps.event.addListener(marker[index],'mouseover', function(){
            entry.addClass('map-hover');
        //  alert(marker[index].icon);
            marker[index].icon='{{site}}media/map-icons/iconb'+(index+1)+'.png'
            marker[index].setMap(map);

        });

        google.maps.event.addListener(marker[index],'mouseout', function(){
            entry.removeClass('map-hover');
            marker[index].icon='{{site}}media/map-icons/iconr'+(index+1)+'.png'
            marker[index].setMap(map);      
        });

         //changes google maps icon color on hover over entry
         $(this).mouseenter(function(){
           var number=$(event.target).attr('data-marker');
            if(marker[index]){ 
                marker[index].icon='{{site}}media/map-icons/iconb'+(index+1)+'.png'
                marker[index].setMap(map);
            }
        });


        $(this).mouseleave(function(){
            var number=$(event.target).attr('data-marker');
            if(marker[index]){
                marker[index].icon='{{site}}media/map-icons/iconr'+(index+1)+'.png'
                marker[index].setMap(map);
            }
        }); 

}); 


}

为了实际实现这些功能，我有一个如下所示的事件处理程序：

            $('#content form :input').change(function(e){

    $('#loading_gif').show();
    deleteMarkers();    

    $.get("/search_async/", $('#content form').serialize(), function(data){
        $('#results').html(data);
        resetMarkers();
        showPrevViews();

        //reset bottom paginator hack...probably should move this out of JS
        var paginatorElement=$('#caption .paginator').contents().clone();
        $('.paginator.bottom').html(paginatorElement);
        $('#loading_gif').hide();


    });     
    e.preventDefault();
    e.stopPropagation();
});

在我的本地服务器上测试此代码，FireFox一次又一次地崩溃。

在IE8中，问题似乎与Google地图完全相关。我在那里得到了一些非常奇怪的结果。

感谢您的任何见解！

FireFox 4.01中的AJAX相关JS错误（之前从未见过）

0 个答案: