views:

382

answers:

1

I need to be able to replace the entire document content with a response obtained from an ajax request.

I have tried assigning to document.body.innerHTML and also tried using document.write(). While both of these are functional on desktop Safari, I need a solution for the iPhone/iPod Touch. Attempting to modify document.body.innerHTML produces exception 7 and the document.write() function is undefined on mobile safari.

I am essentially displaying an activity indicator while waiting for a form post to complete. I do not want safari to begin rendering the response until it completes in it's entirety as it could take some time to complete.

A: 

I just tested on my 3G iphone and it worked fine by setting document.body.innerHTML. I did use jQuery in my test to make sure the body was loaded before running the js:

<html>
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {  
    document.body.innerHTML = 'it worked';
});
</script>

</head>
<body>
This is a test
</body>
</html>
kbosak
I'm on safari 4 beta on windows, with the user agent set to IPhone.This does not work on the iPod touch I have.Also, I'm assigning an entire HTML response to the innerHTML property.
Martin OConnor
Hm, have you tried stripping off the html, head, and body tags from the HTML response before handing it off to the javascript? Maybe it doesn't like loading an html or body tag into a body tag.
kbosak
@Martin I'm assuming the ajax request contains a full page based on your response to this answer. Assuming this is true, why are you using AJAX, why not just load the new body content as an entirely new page. Why use AJAX? Isn't the purpose of setting document.location.href and using anchor tags to do what you're looking for?
coderjoe