Question

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!

Answer 1

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:

1. If the page that this script is running in isn’t on http://www.fricykler.dk, that’s your problem. You’re running into the Same Origin Policy.
2. If it is on http://www.fricykler.dk, remove that from the ajax calls (just use url: '/gls.aspx...').
3. Unless you’re declaring 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.
4. Walk through the code, step-by-step, in a debugger. You can use the free edition of Visual Studio.Net to debug client-side code in IE7. (In general, here in 2011 there’s no excuse not to use a debugger for your client-side work.)

Other observations that almost certainly are not the problem:

• Every time you call $(), 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.)