Complete page using AJAX, how?!?

[Martin]

Hello NG,

I've been doing some AJAX for a few weeks now. The basics worked fine so
far, but now I've got the following problem which I can't solve:

With AJAX you typically update/replace only parts of your page. But in
my application there are situation when I first notice on the server --
so AFTER sending an AJAX request -- that I have to update the complete
page instead of only some parts. And what do I do now???


- Possibility 1: (That's how I do it at the moment)
I send the complete html source code to the client and do the following:

document.open();
document.write(complete_html_code);
document.close();

Basically it works, however, my page is destroyed when I press F5
afterwards. It seems like the included CSS and JS in the header are not
"loaded" correctly - even though everything looks and functions
correctly before pressing F5. Any ideas???


- Possibility 2:
For a complete update I only send the URL for the according page to the
client. On the client I extract the this URL from the received XML and
do the following: document.location.href = extractedUrl;

Even though this should work, this solution always requires two requests
- the AJAX-request and the later JS-redirect. Thats not good either...


-Possibility 3:
I'm sure that I'm not the first person having this problem. Are the any
other solutions or maybe even some kind of patters to solve my problem?


Thanks in advance,

Martin

 

[Martin]

Of course the subject should be: "Complete page UPDATE using AJAX"


Sorry,

Martin

 

[Jeremy]

Hello NG,

I've been doing some AJAX for a few weeks now. The basics worked fine so
far, but now I've got the following problem which I can't solve:

With AJAX you typically update/replace only parts of your page. But in
my application there are situation when I first notice on the server --
so AFTER sending an AJAX request -- that I have to update the complete
page instead of only some parts. And what do I do now???


- Possibility 1: (That's how I do it at the moment)
I send the complete html source code to the client and do the following:

document.open();
document.write(complete_html_code);
document.close();

Basically it works, however, my page is destroyed when I press F5
afterwards. It seems like the included CSS and JS in the header are not
"loaded" correctly - even though everything looks and functions
correctly before pressing F5. Any ideas???


- Possibility 2:
For a complete update I only send the URL for the according page to the
client. On the client I extract the this URL from the received XML and
do the following: document.location.href = extractedUrl;

Even though this should work, this solution always requires two requests
- the AJAX-request and the later JS-redirect. Thats not good either...


-Possibility 3:
I'm sure that I'm not the first person having this problem. Are the any
other solutions or maybe even some kind of patters to solve my problem?


Thanks in advance,

Martin

A better question would be: "Complete page using AJAX, why?!?"

Ask yourself if AJAX is improving the user experience, or simply
complicating development. Is this the purpose for which the technology
was designed?

Remember the KISS principle: "Keep it simple, stupid!" AJAX is icing on
the cake; it's rare that it can be justified for an application's
usefulness to hinge upon it.

Jeremy

 

[Tom Cole]

I'm going to assume that you're using Ajax for server side validation
of form data and should all data be correct, then you want to go ahead
and submit the action?

This is generally speaking a bad idea. You should abandon this practice
immediately.

This is not that big a deal and is not a bad way to go.

Consider something like the following:

<form action="myserverside.php" onsubmit="return checkIt();">
....
</form>

Notice that the form has an action defined which would be the url to
your "next" page. It also has an onsubmit that returns the result of a
checkIt(0 function.

This checkIt() function would do your Ajax request and get the results
from your server. It would then return true should validation pass, or
if validation fails you would perform your page updates and then return
false.

This will still result in the 2 requests you mention in Option 2, but
somehow seems to be a more elegant solution. Why? I dunno...I also
prefer Miracle Whip over mayonnaise.

 

[Martin]

A better question would be: "Complete page using AJAX, why?!?"
I don't have the option to use AJAX or not. My boss and our client wants
it, so the question is definitely "how", not "why".


Regards,
Stephan

 

[Martin]

I'm going to assume that you're using Ajax for server side validation

of form data and should all data be correct, then you want to go ahead
and submit the action?

No, it's completely different but too complex to explain. So just take
it as a fact that in my application there are definitly some cases where
i have to do a full update after sending an AJAX request.

This is generally speaking a bad idea. You should abandon this practice
immediately.

Hmmm, and why?

This is not that big a deal and is not a bad way to go.

But won't this lead to problems when I later on try to support the back
button?

Consider something like the following:

<form action="myserverside.php" onsubmit="return checkIt();">
...
</form>

This checkIt() function would do your Ajax request and get the results
from your server. It would then return true should validation pass, or
if validation fails you would perform your page updates and then return
false.

As I said, the problem is a bit more complex. It's an existing
application in which I have to integrate AJAX and the current design
forces me to do a full update in certain situations. But is has nothing
to do with form validation.


Regards,
Martin