Script for Partial rendering using Response.Redirect Not working in chrome and mozilla

Question

Below is my code......

    Response.Write("<Table style='border:1px solid #0B5226;background-color: white;' runat='server' width = '100%'> <Tr style='font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#000000; vertical-align:middle; text-align:left;'><Td width='15%'> <img src='../Images_v4/Common/Progress.gif' /></Td><Td width='80%' style='text-align: left;word-break: break-all;'><Div>In</Div></Td></Table>");
    Response.Flush();
    Response.Write("<script language='javascript'>");

    Response.Write("var nr = document.all.length;");
    Response.Write("for(i=0;i<nr;i++)");
    Response.Write("{");

    Response.Write("if(document.all(i).tagName == 'IMG' && document.all(i).nameProp == 'Progress.gif')");
    Response.Write("{");
    Response.Write("document.all(i).src = '../Images_v4/Common/Success.png';");
    Response.Write("}");

    Response.Write("if(document.all(i).tagName == 'DIV' && document.all(i).innerHTML == 'In Progress...')");
    Response.Write("{");
    Response.Write("document.all(i).innerHTML = 'Processed Successful';");
    Response.Write("}");



    Response.Write("}");
    Response.Write("</script>");

    Response.Flush(); 

The above code shows status message from an aspx page by writing response and after some time when a particular things has completed working it changes the status image from progress to success. The above code works fine in IE since the document.all(i).nameProp seems to work in IE.But this thing does'nt work in other browser such as chrome and mozilla.Is there any alternative to document.all(i).nameProp which works in all browsers.Or any other method of achieving this. I'm using c# web application

Answer 1

I'd suggest document.getElementsByTagName('*') . document.all is for old IE (IE5) only.

nameProp is also IE only, but a similar can be easily achieved by a simple regex function:

For absolute compatibility:

function getFileName(path) {
    return path.match(/[-_\w]+[.][\w]+$/i)[0];
}

var all = document.all || document.getElementsByTagName('*');
for(var i=0, elem; elem=all[i++];) {
    if (elem.tagName == 'IMG' && getFileName(elem.src) == 'Progress.gif') {
        elem.src = '../Images_v4/Common/Success.png';
    }
    ... THE SAME FOR THE DIVS.
}

It might also be a good to not go through all the elements on the page:

var imgs = document.getElementsByTagName('img');
var divs = document.getElementsByTagName('div');
for(var i=0, elem; elem=imgs[i++];) {
    if (getFileName(elem.src) == 'Progress.gif') {
        elem.src = '../Images_v4/Common/Success.png';
    }
}