IE doesn't load XML content until I open developer tools?

I have a page that loads product information from an XML file using a jQuery AJAX get request. This works well in FF and Chrome, however the content does not load in IE. However, it will load the data after opening the developer window and refreshing the page! Does anyone know why?

Here is my jQuery AJAX request:

//Load the xml file $.ajax({ type: "GET", url: "xml/" + cat + ".xml", dataType: ($.browser.msie) ? "text" : "xml", success: function(data) { alert('xml successfully loaded'); var xml; if (typeof data == "string") { xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.loadXML(data); } else { xml = data; } //Get total number of products in the category $(xml).find('dataroot').each(function() { var pTemp = $(this).attr('count'); catName = $(this).attr('catTitle'); console.log(catName); pTotal = Number(pTemp); }); //Fill the correct entries onto the page while (count<=pTotal) { $(xml).find('product').each(function() { if (count>lCounter && count<hCounter) { var pName = $(this).find('ProductName').text(); var pImage = $(this).find('Photo').text(); var pCode = $(this).find('ProductCode').text(); var pDesc = $(this).find('WebDescription').text(); if (cat.substring(0,2)=='cs') { var pPrice = $(this).find('PartyShackPrice').text(); } else { var pPrice = $(this).find('RRP').text(); } var pSize = $(this).find('size').text(); var pLink = '<a href="item.html?'+cat+'-'+pCode+'">'; var pHTML = '<div id="'+pCode+'" class="box">'; pHTML += pLink + '<img src="images/SMALL_IMAGE/' + pImage + '" width="70" height"100" /></a>'; pHTML += '<div class="boxText">'; pHTML += pLink + '<div class="boxTitle">'+pName+'</div></a>'; pHTML += '<div class="boxDesc">'+pDesc+'</div>'; if (pSize !== 'Not Applicable') { pHTML += '<div class="boxSize">'+pSize+'</div>'; } pHTML += '<div class="boxPrice">Β£'+pPrice+'</div>'; pHTML += pLink + '<div class="boxBuy"></div></a>'; pHTML += '</div></div>'; $("#products").append(pHTML); } count +=1; }); } //Work out the total number of pages the product list is split up into if (pTotal%50==0) { pageTotal = pTotal/50; } else { pageTotal = Math.floor(pTotal/50) + 1; } console.log('pageTotal - ' + pageTotal); //Show path of the current page getPath(cat, catName, 0); //Depending on page number show previous and next buttons and display product counter if (pageTotal==1) { //page 1 and only one page $("#prev").css("visibility", "hidden"); $("#next").css("visibility", "hidden"); $("#counter").append('1 - ' + pTotal + ' of ' + pTotal); } else if ((pageNum==1) && (pageTotal!=1)) { //page 1 and multiple pages $("#prev").css("visibility", "hidden"); $("#next").append('<a href="products.html?'+cat+'-'+(pageNum+1)+'">Next &gt;&gt;</a>'); $("#counter").append('1 - 50 of ' + pTotal); } else if ((pageNum==pageTotal) && (pageTotal!=1)) { //last page when theres more than 1 page $("#next").css("visibility", "hidden"); $("#prev").append('<a href="products.html?'+cat+'-'+(pageNum-1)+'">&lt;&lt; Previous</a>'); $("#counter").append((((pageNum-1)*50)+1) + ' - ' + pTotal + ' of ' + pTotal); } else { // a middle page $("#next").append('<a href="products.html?'+cat+'-'+(pageNum+1)+'">Next &gt;&gt;</a>'); $("#prev").append('<a href="products.html?'+cat+'-'+(pageNum-1)+'">&lt;&lt; Previous</a>'); $("#counter").append((((pageNum-1)*50)+1) + ' - ' + (pageNum * 50) + ' of ' + pTotal); } //Display page number $("#currentPage").append(' ' + pageNum + ' of ' + pageTotal); }, error: function() { alert('failure'); } }); }); 

In addition, IE should cause either a success warning or an error warning, but it does not open the page either before the developer window opens.

thanks

+4
source share
2 answers

I knew what the problem was just by reading the name of your question on the SO homepage. And reading the code in the question confirms this. You have a problem: line console.log(catName);

IE (and some other browsers) do not initialize the console object until the developer window opens.

Prior to this, an attempt to use console will return undefined and cause your script to stop working.

The first lesson here is not to leave debugging code in your program after you are done with it. Console calls should only be present during program testing; when you are done with them, take them out.

The second lesson is that if you need to have console calls in your code, you must wrap them with code that checks to see if the console exists before it tries to use it. There are several ways to do this, from a simple if(console) {console.log(...);} to writing your own debug class. How you do this is up to you, but it’s usually a good idea to write all of the console code this way, even if you are just doing a little debugging to avoid the problem you are facing.

Hope this helps.

+7
source

Let jQuery do what it does best. Replace all of this:

 dataType: ($.browser.msie) ? "text" : "xml", success: function(data) { alert('xml successfully loaded'); var xml; if (typeof data == "string") { xml = new ActiveXObject("Microsoft.XMLDOM"); xml.async = false; xml.loadXML(data); } else { xml = data; } ... 

Wherein:

 dataType: "xml", success: function(xml) { alert('xml successfully loaded'); ... 
0
source

All Articles