Ajax.Updater output garbled only on iPhone first load

[Junkshops]

Hi all,

I'm stumped on an iPhone only problem (works fine on Android, IE, FF,
Opera, Chrome, Safari) so I'm hoping someone here can point me in the
right direction.

When a user loads my page for the first time on an iPhone, the two
portions of the page generated by an Ajax.Updater call are garbled -
they look as if a binary file were injected into the page or the
character map was scrambled. If the user then reloads the page, or
uses the page's tabs to navigate around via Ajax.Updater requests,
everything is then fine. It's only the very first time the page is
loaded in a browser session that this occurs. Here are the relevant
calls with a bit of context:

soundManager.onready(function(){
new Ajax.Updater('PlayerSet', 'http://' + location.host +
playerHTMLloc, {method: 'post', onComplete: startPlayer});
});

This is only called once per site visit (so the user has to reload in
order to get it to display correctly). It calls a python script that
writes html to stdout.

Here's the other:

show: function(elm) {
var id = elm.identify();
elm.addClassName(id.sub('-html', '-selected'));
var link = 'ajax/' + id.sub('-', '.');
$('centercontent').update('<div id="floaterForSpinner"></div><div
id="centerSpinner"><img src="images/ajax-loader.gif"></div>');
new Ajax.Updater('centercontent', link, {evalScripts: 'true',
method: 'post'});
}

This is part of a small class that handles tabs on the page. Again,
only the first time show() is called does the error occur. After that
the tabber works normally. The updater is just pulling html text files
from the server.

The issue occurs with both Prototype/Scripty 1.6.1/1.8.3 and
1.7/1.9.0.

What the heck is going on here?

Thanks for any help.

P.S. I don't have an iPhone myself, and none of the online iPhone
simulators reproduce the problem, so testing this is going to be a
nightmare...

[Victor]

When a user loads my page for the first time on an iPhone, the two
portions of the page generated by an Ajax.Updater call are garbled -
they look as if a binary file were injected into the page or the
character map was scrambled. If the user then reloads the page, or
uses the page's tabs to navigate around via Ajax.Updater requests,
everything is then fine. It's only the very first time the page is

 

I would try to capture requests/responses in first and second time and compare if they are same (in other words, assure problem isn't somewhere on the server side).

[Walter Lee Davis]

Look very carefully at the headers being sent by your server at the initial request and subsequent ones -- make sure everything is Unicode all the way through. (You don't need anything more exotic than Firebug to see that.) Garbled characters can mean that Unicode is being sent as if it was another charset. Maybe your initial load isn't explicitly setting the UTF-8 charset as the desired response, but since all subsequent responses are to Ajax loads (where the charset is explicitly requested) the text appears to "correct" itself.

Walter

>
> --
> 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-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
>

[Junkshops]

Hi guys, thanks for the responses.

Walter said:
> Look very carefully at the headers being sent by your server at the
initial request and subsequent ones -- make sure everything is Unicode
all the way through. (You don't need anything more exotic than Firebug
to see that.) Garbled characters can mean that Unicode is being sent as
if it was another charset. Maybe your initial load isn't explicitly
setting the UTF-8 charset as the desired response, but since all
subsequent responses are to Ajax loads (where the charset is explicitly
requested) the text appears to "correct" itself.

I checked the headers from the Ajax.Updater calls on the initial load
and on reloads and they're identical (other than the date and timeout
max numbers). The charset request in the post is: Accept-Charset
ISO-8859-1,utf-8;q=0.7,*;q=0.7

I should also make it clear that all the loads I'm talking about are
Ajax loads - the initial as well as all subsequent ones.

Victor said:
>I would try to capture requests/responses in first and second time and
compare if they are same (in other words, assure problem isn't somewhere
on the server side).

The best I can do is check them out in Firebug and they're exactly as
I'd expect. I don't see how the problem could be on the server side - in
one of the loads all I'm doing is grabbing a static html file.

Thanks for the advice so far.

[Brian Marquis]

Not sure if you are still having issues with this. Might be a dom loading issue. Try changing to window onload instead of onready.

[Junkshops]

Hi Brian

On Apr 3, 6:22 am, Brian Marquis <br...@quotepro.com> wrote:
> Not sure if you are still having issues with this. Might be a dom loading issue. Try changing to window onload instead of onready.

Yep, still stumped. However, all the code I mentioned is called after
the dom is loaded:

document.observe('dom:loaded', function() {
Ajax.Responders.register({onCreate: removeListeners});
Ajax.Responders.register({onComplete: postAJAX});
new Lightbox();
initMailList();
AT = new AjaxTabber('tablist');
initInternalLinkListener();
initIE6msgClose();
$('PlayerSet').update('<div style="text-align:center"><img
src="images/ajax-loader.gif"></div>');

soundManager.onready(function(){
new Ajax.Updater('PlayerSet', 'http://' + location.host +
playerHTMLloc, {method: 'post', onComplete: startPlayer});
});

});

AjaxTabber is the class I mentioned in my first post that contains the
show() function.

Thanks for the advice, though.

[Victor]

Is the response header `Content-Type` always properly set? (e.g. Content-Type: text/html;charset=UTF-8)

[Brian Marquis]

This turned out to be a page loading/timing issue. The original poster resolved it by switching from document.observe('dom:loaded"… to Event.observe(window,'load'…

 

 

Brian Marquis | Quotepro® | Senior Developer | bm@quotepro.com | Phone: 312.654.8045 x122 / Fax: 312.654.1285

The information in this e-mail is confidential and may be legally privileged.  It is intended solely for the addressee.   Access to this e-mail by anyone else is unauthorized.

[Junkshops]

On Apr 4, 8:49 am, "Brian Marquis" <br...@quotepro.com> wrote:
> This turned out to be a page loading/timing issue. The original poster resolved it by switching from document.observe('dom:loaded"… to Event.observe(window,'load'…

Yes, thanks very much to Brian for helping me resolve the garbled load
issue. That being said, I'd also appreciate any ideas anyone might
have as to why the Ajax.Updater loads are garbled on the iPhone (and
nowhere else) if I only wait for the DOM to load rather than the whole
page. I don't understand why the ajax loads need to have all the
images loaded to work - doesn't make any sense to me. Does dom:loaded
not trigger correctly on the iPhone or something?

I'd also prefer. if possible, to go back to triggering the ajax loads
based on the DOM load so the user doesn't have to wait so long before
the page is ready. It's definitely a drag to degrade the overall
performance of the page to fix an iPhone only problem.

Thanks again to everyone who's offered advice.

[Victor]

> This turned out to be a page loading/timing issue. The original poster resolved it by switching from document.observe('dom:loaded"… to Event.observe(window,'load'…

Does dom:loaded

not trigger correctly on the iPhone or something?

It sounds possible. Prototype now has 4 ways to detect that DOM is loaded:

1. 'DOMContentLoaded' event on document - for all browsers with standard document.addEventListener() method
2. 'onreadystatechange' event on document - for the rest, standards-incompatible, without document.addEventListener() (IE8-)
3. document.documentElement.doScroll('left') - the same browsers as previous
4. 'load' event on window - universal fallback

Some other implementations (e.g. Ext Core - see initDocReady()) are explicitly checking document.readyState in WebKit-family.