jquery ajax call not working in IE 7 or 8 but works in Firefox

Question

Internet Explorer seems to be ignoring this ajax function call (below) but it works fine in FF?

Help someone please...

<script type="text/javascript">
function ajax_request(PartNum,InText) {
   var str=PartNum;
     str=str.replace(".","_");
     strHTML = $('#image-placeholder'+str).html();
     if (strHTML == '<p></p>')
     {
        $('#image-placeholder'+str).html('<p><mg src="/images/catalog/items/'+PartNum+'.gif" /></p>');
      $('#text-placeholder'+str).html('<p>'+InText+'</p>');
     }
     else 
     {
     $('#image-placeholder'+str).html('<p></p>');
     $('#text-placeholder'+str).html('<p></p>');
      }
}

</script>

Answer 1

You are missing the 'i' in '<p><mg src="/images/catalog/items/' should be '<p><img src="/images/catalog/items/'

Answer 2

if (strHTML == '<p></p>')

IE may upper-case those tags for you, making it '<P></P>', which doesn't match.

Whilst you could solve the immediate problem by doing ‘if (strHTML.toLowerCase()==...’, it's not a good idea to rely on a browser's innerHTML output as you can't be sure its serialisation won't do unexpected things like omitting an end-tag or adding superfluous whitespace.

Try for example seeing if there is any <img> element node inside the placeholder using something like:

if ($('#image-placeholder'+str+' img').length==0) {
    ...
}