IE7 Ajax load image issue - css property display not working

Question

I am trying to display an image conditionally - but it is not working only in IE Browser. In Firefox , it is working correctly. Any other options to achieve the same? Thanks.

<span id="goog" style="display:none;" >
    <img height="14" width="14" src="static/images/ajax_load.gif" />
</span>

if(document.getElementById("goog")){
    alert('goog');
    document.getElementById("goog").style.display="none";
}

if(document.getElementById("goog")){
    alert('goog');
    document.getElementById("goog").style.display="inline";
}

Update : 03/07

I have been trying to solve this for IE ,but I couldn't do it yet.

Problem: I am using the customized javascript tree component from dtree and to populate the data or children of every node clicked in the tree, I am using Ajax. Everytime,if something is being processed, I would like to show the ajax image(gif) along with the 'processing' text. Everything I tried works in Firefox but not in IE. Each node is a div tag in the HTML document and is as below:

<div class="dTreeNode">
<a href="javascript: d.o(1);">
    <img id="jd1" alt="" src="static/images/minusbottom.gif"/>
</a>
0
<input id="ch1" type="checkbox" onclick="javascript: changeCheckBoxValues(1);"/>
<a id="linkNode1" class="node" onclick="javascript: d.o(1); return false" href="#">AIG</a>
<span id="aj1" style="display: none;">
    <img height="14" width="14" src="static/images/ajax_load.gif"/>
</span>

When the Ajax request is fired, A static and previously undisplayed (display:none) is shown displayed, like below

<table  align="center"  width="80%" border="1" cellspacing="0" cellpadding="0" id="proc"
        style="display:none;border-collapse: collapse; border: 1px solid; border-color: #D8D8D8;">
        <tr>
            <td width="33%"></td>
            <td class="buttonBar" width="33%">
                <span class="TextBlackNormal">&nbsp;&nbsp;&nbsp;&nbsp;processing </span>
            </td>
            <td width="33%"></td>
        </tr>
</table>

Both the anchor tags trigger the Ajax request, but the display (of the GIF Image and the processing text ) doesn't work only in IE.

I had tried the following :

1) interchanged the href & onclick values of the anchor tags in the DIV 2) visibility value of the DOM is tried instead of display 3) creating a dynamic DOM element and adding the image + text 4) innerHTML of the container (div / table ) where the ajax loading image + processing text is shown

I had figured out that it is not the Ajax call that is causing the issue, at least I think so.

When I experimented, with the conditional display of the image+text using display/visibility in IE, with some DOM value (value of text box) , It worked like a charm.

I am really not sure whats causing the issue.

Appreciate any help.

Answer 1

I think the question is a bit hard to understand. But the big question here is what IE version you are using. Older versions of IE, have some rendering problems when hiding/showing elements. To correct that fiddle around with position: relative and zoom: 1 .

But the script should work, but you might get an error in your AJAX call, which prevents you from calling your success function. Try to add an error event and see if that gets triggered. Im not quite sure what you are recieving from the server, but IE can sometimes fail on elements that are blocked.

But a showcase in jsfiddle would be nice.

Answer 2

document.getElementById in IE actually may return element with name="goog" . Also if you have several elements on page with such id, this is incorrect and different browsers may behave differently in such situation. Perform checks like that in IE:

alert(document.getElementById("goog").id);
alert(document.getElementById("goog").tagName);

Answer 3

您可以尝试“内联”更改“”或访问http://jsfiddle.net/xTUZd/2/

Answer 4

From the below quoted text,

Problem: I am using the customized javascript tree component from dtree and to populate the data or children of every node clicked in the tree, I am using Ajax. Everytime,if something is being processed, I would like to show the ajax image(gif) along with the 'processing' text. Everything I tried works in Firefox but not in IE. Each node is a div tag in the HTML document and is as below:

i think u want display processing text until original data is fetched by ajax call.

If so then u can just use image to display by checking the ajax status,

Have a div in every row(may be next to the anchor text horizontally) where u want to display the the processing text.

On the ajax callback function,

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  }
  else
  {
     document.getElementById("goog").innerHTML ='<img src=static/images/ajax_load.gif>';
  }
}

I think this is enough for u? if i misunderstood your question, i'm sorry.