Problem with .innerHTML, AJAX and Firefox

[tcole6]

My problem appears to be Firefox specific.

I have a hyperlink that loads a new window. This window contains
hyperlinks that call javascript functions in the parent window and then
closes the child window. The function that is called contains an
XMLHttpRequest.

My problem is that everything happens as it should, the innerHTML is
changed by the results of the XMLHttpRequest and the child window
closes. The problem is this, in Firefox, the screen doesn't display the
change until I click anywhere on the parent window. Then the element(s)
update with their new values. In IE and Opera it works on the fly.

I've tried things like setting focus on the parent window and even
setting focus in an element inside a form. These focus calls happen (I
can see the cursor appear in the form element) but it still doesn't
update the screen until I click on it.

This is in an intranet application so I can't provide a hyperlink to
the page. If anyone knows what I'm talking about that would be awesome.
If not I can probably cut and paste the relevant code although it might
be quite a bit.

Again, this only happens in Firefox and appears to be some sort of
refresh/focus problem. Thanks for your help.

 

[tcole6]

For the record books here's the javascript:

/*
*This function is in the parent window and is called by the child
window...
*/
function getSelectedPriceBreak(item, quantity) {
if (document.getElementById(item)) {
document.getElementById(item).value = quantity;
this.window.focus();
checkPrice(item);
document.getElementById(item).focus();
}
}

/*
*This method is the parent window and is called by either the method
above or
*via onBlur() events by various form components. When called by
onBlur() on a form
* component the update is immediate in all browsers. It's only when
called by
* getSelectedPriceBreak (via a child window) that the update doesn't
appear in Firefox
* until the user clicks anywhere in the parent window.
*/
function checkPrice(param) {
if (document.getElementById(param)) {
request = getRequest(updatePrice);
var value = document.getElementById(param).value;
request.open("GET", "/portal/servlet/update.do?item=" + param +
"&qty=" + value, true);
request.send(null);
}
else {
alert("Can't find the element.");
}
}

/*
*This method is called onreadystatechanged. There are no execution
problems
*whatsoever, just view issues in Firefox.
*/
function updatePrice() {
if (request.readyState == 4) {
if (request.status == 200) {
var xmldoc = request.responseXML.documentElement;
var item =
xmldoc.getElementsByTagName('item')[0].firstChild.data;
var quantity =
xmldoc.getElementsByTagName('quantity')[0].firstChild.data;
var baseQty =
xmldoc.getElementsByTagName('baseQty')[0].firstChild.data;
var price =
xmldoc.getElementsByTagName('price')[0].firstChild.data;
var basePrice =
xmldoc.getElementsByTagName('basePrice')[0].firstChild.data;
var unit =
xmldoc.getElementsByTagName('unit')[0].firstChild.data;
var baseUnit =
xmldoc.getElementsByTagName('baseUnit')[0].firstChild.data;
var um =
xmldoc.getElementsByTagName('um_description')[0].firstChild.data;
var sales =
xmldoc.getElementsByTagName('sales')[0].firstChild.data;
var total =
xmldoc.getElementsByTagName('total')[0].firstChild.data;
if (document.getElementById(item))
document.getElementById(item).value = quantity;
if (document.getElementById('' + item + '_qty'))
document.getElementById('' + item + '_qty').value =
quantity;
if (document.getElementById('' + item + '_baseQty'))
document.getElementById('' + item + '_baseQty').innerHTML =
baseQty;
if (document.getElementById('' + item + '_price'))
document.getElementById('' + item + '_price').innerHTML =
price;
if (document.getElementById('' + item + '_basePrice'))
document.getElementById('' + item + '_basePrice').innerHTML
= price;
if (document.getElementById('' + item + '_unit'))
document.getElementById('' + item + '_unit').innerHTML =
unit;
if (document.getElementById('' + item + '_baseUnit'))
document.getElementById('' + item + '_baseUnit').innerHTML
= baseUnit;
if (document.getElementById('' + item + '_um'))
document.getElementById('' + item + '_um').innerHTML = um;
if (document.getElementById('' + item + '_sales'))
document.getElementById('' + item + '_sales').innerHTML =
sales;
if (document.getElementById('_total'))
document.getElementById('_total').innerHTML = total;
}
}
}

/*
*This function is in the parent window and opens the child window when
the
* appropriate hyperlink is clicked.
*/
function viewBreaks(item) {
window.open('/portal/webapps/customers/orders/breaks.jsp?item=' +
item, 'PriceBreaks',
'width=200,height=200,status=no,toolbar=no,scrollbars=yes');
}

/*
*This is the onclick event registered with the hyperlink in the CHILD
window. It blurs
* itself (in an attempt to give focus back to the parent window first)
and then calls
* the getSelectedPriceBreak method in the parent window, then closes
itself.
*/
onclick="javascript:window.blur();
window.opener.getSelectedPriceBreak('33500-00002', '1080');
window.close(); return false

/*
*Just for kicks, this is the onblur event handler that works just fine
in the parent
* window for all browsers.
*/
onblur="javascript:checkPrice('33114-00050');"

Again, all the execution steps happen without error on all browsers.
Only in Firefox
the component changes made in the updatePrice method don't appear until
the user clicks in the window (IE, Opera and Netscape all work
normally). Problem is I used AJAX so the user would get instantaneous
feedback.

Thanks again.

 

[RobG]

For the record books here's the javascript: [...]

if (document.getElementById('' + item + '_qty'))
document.getElementById('' + item + '_qty').value =
quantity;
if (document.getElementById('' + item + '_baseQty'))
document.getElementById('' + item + '_baseQty').innerHTML =
baseQty;

What are you trying to change using innerHTML? Changing the value
attribute in Firefox will not modify the element's innerHTML. Use DOM
methods only, not innerHTML.

innerHTML is a proprietary Microsoft invention that has been widely
copied. Since there is no public standard, implementations differ[1].
One of the most obvious is that IE updates the element's innerHTML
property to reflect its current HTML, Firefox tends to keep the
innerHTML property as it was when the page loaded - essentially a 'view
source'.

I hope that helps.

1. A public standard would not guarantee consistent implementation, but
it would probably help.

 

[Martin Honnen]

Again, all the execution steps happen without error on all browsers.
Only in Firefox
the component changes made in the updatePrice method don't appear until
the user clicks in the window (IE, Opera and Netscape all work
normally).

Netscape works fine and Firefox does not? Which versions of Netscape
respectively Firefox have you tried that?

 

[tcole6]

Sometimes I wonder where my brain is...

I was setting focus to the window and component but it wasn't updating
because the event was fired by onblur. I simply called
document.getElementById('id').blur() and all is updating fine.

Thanks.