I really hope someone can help me with this. Basically i have an issue with an ajax-call in jQuery in ie7. The script work in every other browser than ie7.
The ajax always return error in ie7.
The code:
<script type="text/javascript">
$(document).ready(function()
{
//Run Ajax on Click
$('#GlsSubmit').click(function(){
//Get input from textfields
street = $("#GlsStreet").val();
zip = $("#GlsZip").val();
//How many results to show
amount = '5';
var time = new Date;
//Initiate Ajax (fetch xml-data from .asp in applications folder)
$.ajax({
url: "http://www.test.dk/gls.aspx?street="+street+"&zip="+zip+"&amount="+amount+"&dummy="+ time.getTime(),
success: function(msg){
//Saving Shop data
CompanyName = $(msg).find("PakkeshopData").html();
$('#GlsResults').html('');
$(msg).find("PakkeshopData").each(function(index){
CompanyName = $(this).find('CompanyName').text();
CompanyStreetName = $(this).find('StreetName').text();
CompanyZipCode = $(this).find('ZipCode').text();
CompanyCityName = $(this).find('CityName').text();
CompanyID = $(this).find('Number').text();
$('#GlsResults').append("<input type='radio' class='required' name='shopSelecter' id='shopSelecter"+index+"' value='"+CompanyID+"'/><label for='shopSelecter"+index+"'>"+ CompanyName +", "+CompanyStreetName+", " + CompanyZipCode + " "+ CompanyCityName +"</label><div class='clear'></div>");
}); //End of each
//See if user choses another shop
$('#GlsResults input[type=radio]').change(function(){
shopid = $(this).val();
$.ajax({
url: "http://www.test.dk/gls2.aspx?ParcelShopNumber="+shopid,
success: function(data){
//Save oinfo for the chosen shop
CompanyNameSingle = $(data).find('CompanyName').text();
CompanyStreetNameSingle = $(data).find('StreetName').text();
CompanyZipCodeSingle = $(data).find('ZipCode').text();
CompanyCityNameSingle = $(data).find('CityName').text();
CompanyIDSingle = $(data).find('StreetName2').text();
//Change values for input fields
$('#EcomOrderDeliveryAddress2').val(CompanyIDSingle);
$('#EcomOrderDeliveryName').val(CompanyNameSingle);
$('#EcomOrderDeliveryAddress').val(CompanyStreetNameSingle);
$('#EcomOrderDeliveryZip').val(CompanyZipCodeSingle);
$('#EcomOrderDeliveryCity').val(CompanyCityNameSingle);
}, //End of succes
error:function(response){
} //End of error
}); // End of ajax
}); // End of radio button change
$("#gls-error").hide();
}, //End of succes
error:function(response){
//Error Messages
if( zip == ''){
$("#GlsResults").html("<div id='gls-error'>Indtast venligst et postnummer</div>");
}
else if( !(zip.length == 4)){
$("#GlsResults").html("<div id='gls-error'>Indtast venligst et postnummer på 4 cifre</div>");
}
else{
$("#GlsResults").html("<div id='gls-error'>Kunne ikke finde et pakkecenter</div>");
}
} //End of error
}); // End of ajax
}); //End of click
}); //End of document.ready
</script>
Anyone got any ideas :-)?
Thanks!
Anyone got any ideas
Yes: Break that up into smaller pieces. That kind of deep nesting is very hard to read, maintain, and troubleshoot. :-)
Without your having said what error, here are some other observations which may help you get going on it:
http://www.fricykler.dk
, that's your problem. You're running into the Same Origin Policy.http://www.fricykler.dk
, remove that from the ajax
calls (just use url: '/gls.aspx...'
).street
, zip
, and others in code you haven't quoted, you're falling prey to the Horror of Implicit Globals. Recommend declaring them. Who knows, maybe you're overwriting something important, since the window
namespace gets very cluttered on IE.Other observations that almost certainly are not the problem:
$()
, it has to do several function calls, a memory allocation, and if you're passing it a selector (even an ID selector), it has to do a DOM query. So whenever you find yourself repeating it (CompanyName = $(this).find('CompanyName').text();
, CompanyStreetName = $(this).find('StreetName').text();
, ...). Consider doing it once and remembering the result (var $this = $(this);
then CompanyName = $this.find('CompanyName').text();
, etc.)