Ajax.Updater not working in IE, works fine in FF Chrome and Safari

[David Behler]

Hey folks,
maybe you can help me out with this.

I got a simple function that I use to load sub-categories when clicking
on a parent category:

function toggleSubCats(cat, id)
{
/* Vars and stuff */
catObj = $(cat);
var send=null;

/* Now figure out the status of the element and open or close based
on what's found */
if( catObj.getStyle('display') == 'none') {
catObj.setStyle({display : 'block'});
} else {
catObj.setStyle({display : 'none'});
return;
}

/* Let's first dump a loading image in the target div then send the
AJAX request */
catObj.update("<img src='" + base_images + "loading_small.gif' />");
var url= base + 'galleryback/showSubCat/'+id;

new Ajax.Updater(catObj,url);

/* Alternative to Ajax.Updater() call
new Ajax.Request(url, {
method: 'get',
onSuccess: function(transport) {
$(cat).update(transport.responseText);
}
});
*/
}

All it's supposed to do, is to get the element (in this case a div)
with the id submitted in the cat parameter and display/hide it. If
display is set to block, then an loading image is shown and ajax.updater
is called to load the sub-categories to the higher category (id parameter).

This works fine in FF3.6, Chrome and Safari, but in IE8 the loading
image is not replaced with the loaded sub-categories. If I replace the
Ajax.Updater call with an Ajax.Request call (see commented section below
Ajax.Updater) it does not work either in IE8, but I can alert the
responseText and the catObj.update() does not raise an error, it just
doesn't have any effect.

Not sure this is important but here is another info that might help you
solving this:
On intital loading of the page I display only the top categories,
clicking on one of them calls the above shown function and displays the
child categories. But clicking on one of the loaded child categories,
it's where the problem starts and it does not work anymore in IE8. Do
you think it's some weird problem caused by adding elements after the
DOM was loaded?

I really hope you can help me with this!

Thanks in advance,

David

[T.J. Crowder]

Hi,

> Do
> you think it's some weird problem caused by adding elements after the
> DOM was loaded?

No, people do that all the time.

I'm not immediately seeing the problem, I think it's probably in the
markup or code outside what you quoted. But some things to look for:

1. Unless you're intentionally using `catObj` as a global, you'll want
to declare it in the function (there's no `var` that I see). Otherwise
it becomes an implicit global, which is so high on my list of Bad
Things(tm) I blogged about it[1] (which I don't often do).

2. IE has issues with conflating the namespaces of the `id` and `name`
attributes, which should be separate. I see you're using IDs for the
things to show/hide (perfectly normal, that). Is there *anything* on
your page that has _either_ an `id` or a `name` with the value you're
providing to `toggleSubCats` other than the element you're trying to
show/hide? For instance, if you have a 'stuff' input field:

<input name='stuff' type='text'>

and then later in the document a 'stuff' div:

<div id='stuff'>....</div>

...on IE, document.getElementById('stuff') will get you the input
field element rather than the div, despite that being perfectly valid
HTML markup. It's wrong, but that's the way it is, so it's worth
looking whether that might be an issue.

[1] http://blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html

HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com

[David Behler]

Hi,
thanks for the quick answer.

1. I did not do that intentionally, it's some code I inherited from the
former coder. I fixed that and now declare the variable inside the
function, thanks for pointing it out.

2. As far as I can tell, there is no namespace conflict, the div has the
id 'cat_1' and there is no other element with that id or name.

The strange thing is, that the update works the first time when the
loading image is displayed:

catObj.update("<img src='" + base_images + "loading_small.gif' />");

Any other ideas?

David

[T.J. Crowder]

Hi,

> Any other ideas?

From what you're saying, you've already verified (in your version
using Ajax.Request) that:

1. `onSuccess` is getting triggered

2. The `response.responseText` has the correct markup

3. That `catObj.update("<img ... />")` works (`catObj` having been set
via `catObj = $(cat);`)

4. But the `$(cat).update(response.responseText);` within `onSuccess`
doesn't work.

With the quoted code, I don't see how all four of those statements can
be true; I'd recommend double-checking (sorry! I know!). If they
really are, you'll have to walk through it with Visual Studio or
InterDev to see what's going wrong in the update call.

Very strange!

Good luck,

--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com

[David Behler]

Hi,

I tried some more stuff and it's getting stranger and stranger:

Using the Ajax.Request approach, it still does not work calling

`$(cat).update(transport.responseText);`

But calling this

`$(cat).update('test');`

actually works and replaces the loading image with the string 'test'.

The returned responseText is a table with multiple rows and columns
inside a div. The responseText was no valid html, but even after fixing
that it does not work.

I have neither Visual Studio nor InterDev, all I can use to debug
javascript in IE8 are the built in Developer Tools and stepping through
it looks fine to me.

David

[T.J. Crowder]

Hi,

> I tried some more stuff and it's getting stranger and stranger:

Can you post a complete, self-contained, *minimalist* example[1],
perhaps to Pastie[2]? I'm sure it's something simple, it's just not (I
don't think) in the code and markup you've quoted so far.

[1] http://proto-scripty.wikidot.com/self-contained-test-page
[2] http://pastie.org

--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com