I'm trying to upgrade my search page to all AJAX requests and I've run into some issues in both IE8 and Firefox. Everything seems to work in Chrome (love those guys). Here is the page in question: http://jsfiddle.net/qgWRe/1/
The issue seems to exist on two levels in FF and one separate instance in IE8 (though it may be related).
First, when I load the page, I receive a warning that I've never seen before, claiming that the "Image corrupt or truncated: http://scribe.twitter.com/scribe?.........". I've read that this may be a firebug bug and that it's not a critical issue, but it only occurs with my AJAX-ified script. It never manifested itself with my non-AJAX version page. It also only occurs sporadically.
The seemingly bigger issue (which actually affects functionality), is that an AJAX event handler raises an error stating
An invalid or illegal string was specified" code: "12
[Break On This Error] Failed to load source for: http://localhost:8000/search/
I think that I've isolated it to a piece of my code which attempts to populate Google Maps markers based on the AJAX returned results. I first delete the old markers and then create new markers on the fly as the AJAX callback.
//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(ma开发者_C百科rker[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);
}
});
});
}
To actually implement those functions, I have an event handler like the following:
$('#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();
});
Testing this code on my localserver, FireFox has crashed over and over again.
In IE8, the issue seems to be related entirely to the Google Maps. I get some really bizarre results there.
Thanks for any insight!
精彩评论