Smalltalk › Frameworks & Tools › Seaside › Seaside General

Space Breaking LiveCallback in IE

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

9 messages Options

Ron Teitelbaum

Space Breaking LiveCallback in IE

Hi All,

I just found an error that was interesting so I thought I’d pass it along:

This is just a test app, but it has a toggle anchor that shows different search forms. If a form has a table that has table data that only includes a space the live update fails in a strange way. By uncommenting the alerts on the #ajax method I saw the error:

Reference to undefined entity ‘nbsp’

Which caused the form to render without any surrounding components.

This works fine for Firefox. But I also noted that having an alert in the fireFox code causes the liveUpdate to not work at all.

So only use the alerts for debugging IE only, and don’t include TD spaces in your live updates. html text: ‘ ‘ does work.

Ron Teitelbaum

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Michel Bany

Re: Space Breaking LiveCallback in IE

Hi Ron,

This is just a test app, but it has a toggle anchor that shows different search forms. If a form has a table that has table data that only includes a space the live update fails in a strange way. By uncommenting the alerts on the #ajax method I saw the error:

From your description, I understand that your callback generates a form, i.e. something like

liveCallback: [:renderer |

...

renderer form: [ ... ]

...

I believe this won't work with IE. The #ajax js, uses innerHTML to update the DOM and I believe

that IE does not allow form tags in this case.

But, maybe, you are trying something else....

This works fine for Firefox. But I also noted that having an alert in the fireFox code causes the liveUpdate to not work at all.

As far as I can remember, I believe that only the last two alerts are specific to IE, i.e. the ones sending parseError.

HTH

Michel.

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Ron Teitelbaum

RE: Space Breaking LiveCallback in IE

It does appear to work in IE as long as the space is not there

renderContentOn: html

html break.

html anchor

id: 'advancedSearch';

callback: ["noop"];

liveCallback: [:h | self toggleSearchType.

self renderContentOn: h];

text: (self isSimpleSearch ifTrue: ['Advanced Search'] ifFalse: ['Simple Search']).

html div id: 'searchForm'; with: [

self isSimpleSearch ifTrue: [self renderSimpleSearchOn: html]

ifFalse: [self renderAdvancedSearchOn: html]].

From: Michel Bany [mailto:[hidden email]]
Sent: Monday, October 30, 2006 4:31 PM
To: [hidden email]; The Squeak Enterprise Aubergines Server - general discussion.
Subject: Re: [Seaside] Space Breaking LiveCallback in IE

Hi Ron,

This is just a test app, but it has a toggle anchor that shows different search forms. If a form has a table that has table data that only includes a space the live update fails in a strange way. By uncommenting the alerts on the #ajax method I saw the error:

From your description, I understand that your callback generates a form, i.e. something like

liveCallback: [:renderer |

...

renderer form: [ ... ]

...

I believe this won't work with IE. The #ajax js, uses innerHTML to update the DOM and I believe

that IE does not allow form tags in this case.

But, maybe, you are trying something else....

This works fine for Firefox. But I also noted that having an alert in the fireFox code causes the liveUpdate to not work at all.

As far as I can remember, I believe that only the last two alerts are specific to IE, i.e. the ones sending parseError.

HTH

Michel.

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Ron Teitelbaum

RE: Space Breaking LiveCallback in IE

In reply to this post by Ron Teitelbaum

Teach me to hit alt-s in an email! Sorry.

It does appear to work just fine in IE as long as the space is not there. The rest of the code is here:

renderSimpleSearchOn: html

html form defaultAction: [self search]; with: [

html table id: 'searchTable'; with: [

html tableRow: [

html tableData: [html text: 'First Name: '].

html tableData: [html textInput value: 'Enter First Name'].

html tableRow: [

html tableData: [html text: 'Last Name: '].

html tableData: [html textInput value: 'Enter Last Name'].

html submitButton

id: 'findPerson';

callback: [self search];

text: 'Search'.

renderAdvancedSearchOn: html

html form defaultAction: [self search]; with: [

html table id: 'searchTable'; with: [

html tableRow: [

html tableData: [html text: 'First Name: '].

html tableData: [html textInput value: 'Enter First Name'].

html tableRow: [

html tableData: [html text: 'Middle Name: '].

html tableData: [html textInput value: 'Enter Middle Name'].

html tableRow: [

html tableData: [html text: 'Last Name: '].

html tableData: [html textInput value: 'Enter Last Name'].

html tableRow: [

html tableData: [html text: 'Name Suffix: '].

html tableData: [html textInput value: 'Enter Name Suffix'].

html tableData: [html text: '(Sr. Jr. III ...)'].

html submitButton

id: 'findPerson';

callback: [self search];

text: 'Search'

I wasn’t aware that the last two alerts were causing the problem. Funny too cause those were the only ones I tried! Thanks for pointing that out!

Ron Teitelbaum

From: Ron Teitelbaum [mailto:[hidden email]]
Sent: Monday, October 30, 2006 6:10 PM
To: 'Michel Bany'; 'The Squeak Enterprise Aubergines Server - general discussion.'
Subject: RE: [Seaside] Space Breaking LiveCallback in IE

It does appear to work in IE as long as the space is not there

renderContentOn: html

html break.

html anchor

id: 'advancedSearch';

callback: ["noop"];

liveCallback: [:h | self toggleSearchType.

self renderContentOn: h];

text: (self isSimpleSearch ifTrue: ['Advanced Search'] ifFalse: ['Simple Search']).

html div id: 'searchForm'; with: [

self isSimpleSearch ifTrue: [self renderSimpleSearchOn: html]

ifFalse: [self renderAdvancedSearchOn: html]].

Hi Ron,

This is just a test app, but it has a toggle anchor that shows different search forms. If a form has a table that has table data that only includes a space the live update fails in a strange way. By uncommenting the alerts on the #ajax method I saw the error:

From your description, I understand that your callback generates a form, i.e. something like

liveCallback: [:renderer |

...

renderer form: [ ... ]

...

I believe this won't work with IE. The #ajax js, uses innerHTML to update the DOM and I believe

that IE does not allow form tags in this case.

But, maybe, you are trying something else....

This works fine for Firefox. But I also noted that having an alert in the fireFox code causes the liveUpdate to not work at all.

As far as I can remember, I believe that only the last two alerts are specific to IE, i.e. the ones sending parseError.

HTH

Michel.

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Michel Bany

Re: Space Breaking LiveCallback in IE

In reply to this post by Ron Teitelbaum

On 31 Oct 2006, at 00:10 , Ron Teitelbaum wrote:

It does appear to work in IE as long as the space is not there

Well, it all depends what you mean exactly with "it works".

The live callback only replaces in the page those elements that have

the id= attribute. In your example, the div with id "searchForm" is to be

replaced, however, since it contains a form tag, it is not replaced in IE.

However the table with id "searchTable" does not contain a form and

is not included in something that has been replaced and is therefore

replaced. The button with is "findPerson" is also replaced for the

same reasons. If you had some element without an id inside the

form, it would not be replaced.

You could verify this with the following debugging change

} catch (e) {

// Some browsers (like Safari) have read-only elements

alert(replacement);

alert(e)

}

Reference to undefined entity ‘nbsp’

This is ringing a bell.

SeasideAsync overrides the two #space methods in Seaside.

If you have reloaded Seaside without reloading SeasideAsync,

then you are missing the two overrides. If this is the case,

then you only need to reload SeasideAsync.

HTH

Michel.

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Ron Teitelbaum

RE: Space Breaking LiveCallback in IE

Ok you were right I loaded seaside after seasideAsync, loading async after seaside fixed the problem.

Before fixing it with loading order I added your exception alert. MS IE 6.0 didn’t catch the exception, I got no alert.

Having the space in the table causes the updated code to show on the page, the problem is that it replaces the entire page with the update stream. All the other components disappear.

What I have is a tab menu, then a form with a link that switches the form from simple to advanced. When I press advanced (which does not contain space) it switches fine. Pressing simple again (the update stream table has a space) causes only the simple form to display the tab navigation is gone. Pressing advanced to go back and everything shows back up.

So the space change fixes everything. There appears to be no exception, when nbsp is used. It works in FireFox but not IE.

I get the feeling that I’m going to need to download some more browsers. I was looking around at web sites using the different browsers and I was amazed at how many things work in IE but do not work in FireFox. Some things work the other way around, and some things don’t work in either! Amazing! I never really had much faith in standards and much less now. What a pain.

Ron Teitelbaum

From: Michel Bany [mailto:[hidden email]]
Sent: Tuesday, October 31, 2006 2:45 AM
To: [hidden email]
Cc: 'The Squeak Enterprise Aubergines Server - general discussion.'
Subject: Re: [Seaside] Space Breaking LiveCallback in IE

On 31 Oct 2006, at 00:10 , Ron Teitelbaum wrote:

It does appear to work in IE as long as the space is not there

Well, it all depends what you mean exactly with "it works".

The live callback only replaces in the page those elements that have

the id= attribute. In your example, the div with id "searchForm" is to be

replaced, however, since it contains a form tag, it is not replaced in IE.

However the table with id "searchTable" does not contain a form and

is not included in something that has been replaced and is therefore

replaced. The button with is "findPerson" is also replaced for the

same reasons. If you had some element without an id inside the

form, it would not be replaced.

You could verify this with the following debugging change

} catch (e) {

// Some browsers (like Safari) have read-only elements

alert(replacement);

alert(e)

}

Reference to undefined entity ‘nbsp’

This is ringing a bell.

SeasideAsync overrides the two #space methods in Seaside.

If you have reloaded Seaside without reloading SeasideAsync,

then you are missing the two overrides. If this is the case,

then you only need to reload SeasideAsync.

HTH

Michel.

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Ron Teitelbaum

RE: Space Breaking LiveCallback in IE

In reply to this post by Ron Teitelbaum

With the alert still loaded and the space error gone, there is no alert for MS IE 6.0. The form is replaced and the search button on both forms works fine. Is there some other way I can see the form replacement error. I’d hate to hit it later with something more complicated. Do I need to load an older version of IE to see it?

Thanks for your help!

Ron

From: Michel Bany [mailto:[hidden email]]
Sent: Tuesday, October 31, 2006 9:42 AM
To: [hidden email]
Subject: Re: [Seaside] Space Breaking LiveCallback in IE

Before fixing it with loading order I added your exception alert. MS IE 6.0 didn’t catch the exception, I got no alert.

That makes sense.

You had two errors, (1) the nbsp error and (2) the form error.

The alerts I suggested were supposed to demonstrate the form error.

However, the nbsp error occurs first.

Now that the nbsp error is fixed, try again the alerts and you should get them.

Having the space in the table causes the updated code to show on the page, the problem is that it replaces the entire page with the update stream. All the other components disappear.

With Seaside reloaded on top of SeasideAsync, "html space" is output as &nbsp

which is invalid XML (valid XML is &#160). This causes an XML parsing error in the

javascript and the javascrit assumes that the server has responded with a debug

page. That's why the entire page is replaced.

Good to hear that your problem is fixed.

Cheers,

Michel.

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Rick Flower

Re: Space Breaking LiveCallback in IE

In reply to this post by Ron Teitelbaum

Ron Teitelbaum wrote:

[ ... ]

I get the feeling that I’m going to need to download some more browsers. I was looking around at web sites using the different browsers and I was amazed at how many things work in IE but do not work in FireFox. Some things work the other way around, and some things don’t work in either! Amazing! I never really had much faith in standards and much less now. What a pain.

This is one of the reasons I'm a bit hesitant to start using anything that has DHTML being generated behind your back in the browsers DOM care of some Javascript code.. My first whack at a site used DHTML all over the place and it was a nightmare to keep going since things would break whenever someone patched IE (I wrote this PHP app about 3-4 years ago). My next incarnation uses no DHTML and obviously does not suffer any of the side effects.. However, I'm finding the lure of SeasideAsync interesting enough to put my feet back in the water again and may mandate that people use at least IE6 or Firefox as the main browsers and will have to ensure that everything is thoroughly tested before unleashing the public on my (next incarnation of the) new site.. I'm hoping that most of the problem I had with my JS & DHTML code were due to perhaps poor browser detection/workarounds and that sort of thing -- and that SeasideAsync does a much better job. As to whether or not anyone is using it in a production environment, I'd be interested in hearing about any issues they've run across -- if any.

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Bany, Michel

New SeasideAsync package (was: Space Breaking LiveCallback in IE)

To all interested,

I published a new version of SeasideAsync (47, both Squeaksource and public store).

It requires the most current version of the main Seaside package. The integration is looser

and will make it possible to reload Seaside on top of SeasideAsync.

This new version also supports Firefox 2.0, should work fine with Seaside2.7a1 and

uses #fixCallbackTemps.

Enjoy,

Michel.

_______________________________________________
Seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside