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 getSelectedPric eBreak(item, quantity) {
if (document.getEl ementById(item) ) {
document.getEle mentById(item). value = quantity;
this.window.foc us();
checkPrice(item );
document.getEle mentById(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
* getSelectedPric eBreak (via a child window) that the update doesn't
appear in Firefox
* until the user clicks anywhere in the parent window.
*/
function checkPrice(para m) {
if (document.getEl ementById(param )) {
request = getRequest(upda tePrice);
var value = document.getEle mentById(param) .value;
request.open("G ET", "/portal/servlet/update.do?item= " + param +
"&qty=" + value, true);
request.send(nu ll);
}
else {
alert("Can't find the element.");
}
}

/*
*This method is called onreadystatecha nged. There are no execution
problems
*whatsoever, just view issues in Firefox.
*/
function updatePrice() {
if (request.readyS tate == 4) {
if (request.status == 200) {
var xmldoc = request.respons eXML.documentEl ement;
var item =
xmldoc.getEleme ntsByTagName('i tem')[0].firstChild.dat a;
var quantity =
xmldoc.getEleme ntsByTagName('q uantity')[0].firstChild.dat a;
var baseQty =
xmldoc.getEleme ntsByTagName('b aseQty')[0].firstChild.dat a;
var price =
xmldoc.getEleme ntsByTagName('p rice')[0].firstChild.dat a;
var basePrice =
xmldoc.getEleme ntsByTagName('b asePrice')[0].firstChild.dat a;
var unit =
xmldoc.getEleme ntsByTagName('u nit')[0].firstChild.dat a;
var baseUnit =
xmldoc.getEleme ntsByTagName('b aseUnit')[0].firstChild.dat a;
var um =
xmldoc.getEleme ntsByTagName('u m_description')[0].firstChild.dat a;
var sales =
xmldoc.getEleme ntsByTagName('s ales')[0].firstChild.dat a;
var total =
xmldoc.getEleme ntsByTagName('t otal')[0].firstChild.dat a;
if (document.getEl ementById(item) )
document.getEle mentById(item). value = quantity;
if (document.getEl ementById('' + item + '_qty'))
document.getEle mentById('' + item + '_qty').value =
quantity;
if (document.getEl ementById('' + item + '_baseQty'))
document.getEle mentById('' + item + '_baseQty').inn erHTML =
baseQty;
if (document.getEl ementById('' + item + '_price'))
document.getEle mentById('' + item + '_price').inner HTML =
price;
if (document.getEl ementById('' + item + '_basePrice'))
document.getEle mentById('' + item + '_basePrice').i nnerHTML
= price;
if (document.getEl ementById('' + item + '_unit'))
document.getEle mentById('' + item + '_unit').innerH TML =
unit;
if (document.getEl ementById('' + item + '_baseUnit'))
document.getEle mentById('' + item + '_baseUnit').in nerHTML
= baseUnit;
if (document.getEl ementById('' + item + '_um'))
document.getEle mentById('' + item + '_um').innerHTM L = um;
if (document.getEl ementById('' + item + '_sales'))
document.getEle mentById('' + item + '_sales').inner HTML =
sales;
if (document.getEl ementById('_tot al'))
document.getEle mentById('_tota l').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,heig ht=200,status=n o,toolbar=no,sc rollbars=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 getSelectedPric eBreak method in the parent window, then closes
itself.
*/
onclick="javasc ript:window.blu r();
window.opener.g etSelectedPrice Break('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="javascr ipt: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]

tc****@gmail.co m wrote:

For the record books here's the javascript: [...]
if (document.getEl ementById('' + item + '_qty'))
document.getEle mentById('' + item + '_qty').value =
quantity;
if (document.getEl ementById('' + item + '_baseQty'))
document.getEle mentById('' + item + '_baseQty').inn erHTML =
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.

--
Rob

[Martin Honnen]

tc****@gmail.co m wrote:

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?
--

Martin Honnen
http://JavaScript.FAQTs.com/

[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.getEle mentById('id'). blur() and all is updating fine.

Thanks.