[Proto-Scripty] Re: Ajax.Updater not working in IE, works fine in FF Chrome and Safari
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 On Mar 16, 6:22 pm, David Behler wrote: > 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 > > Am 16.03.2010 15:25, schrieb 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("")` 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 > > > On Mar 16, 11:53 am, David Behler wrote: > > >> 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(""); > > >> Any other ideas? > > >> David > > >> Am 16.03.2010 12:37, schrieb 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: > > >>> > > >>> and then later in the document a '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 > > >>> On Mar 15, 11:28 pm, David Behler wrote: > > 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 { > catO
Re: [Proto-Scripty] Re: Ajax.Updater not working in IE, works fine in FF Chrome and Safari
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 Am 16.03.2010 15:25, schrieb 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("")` 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 On Mar 16, 11:53 am, David Behler wrote: 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(""); Any other ideas? David Am 16.03.2010 12:37, schrieb 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: and then later in the document a '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 On Mar 15, 11:28 pm, David Behlerwrote: 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(""); 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 s
[Proto-Scripty] Re: Ajax.Updater not working in IE, works fine in FF Chrome and Safari
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("")` 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 On Mar 16, 11:53 am, David Behler wrote: > 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(""); > > Any other ideas? > > David > > Am 16.03.2010 12:37, schrieb 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: > > > > > > and then later in the document a '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 > > > On Mar 15, 11:28 pm, David Behler wrote: > > >> 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(""); > >> 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, >
Re: [Proto-Scripty] Re: Ajax.Updater not working in IE, works fine in FF Chrome and Safari
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(""); Any other ideas? David Am 16.03.2010 12:37, schrieb 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: and then later in the document a '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 On Mar 15, 11:28 pm, David Behler wrote: 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(""); 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 -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Ajax.Updater not working in IE, works fine in FF Chrome and Safari
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: and then later in the document a '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 On Mar 15, 11:28 pm, David Behler wrote: > 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(""); > 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 -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.