Hi Nick,
For updating just a single div, look at Ajax.Updater[1] rather than
Ajax.Request -- there's nothing wrong with how you did it, it's just
that it replicates some of what Ajax.Updater does.
But for updating more than one div, of course, you probably want to
stick with Ajax.Request. There are a couple of ways you can go.
For a quick-and-easy solution (but also a bit ugly), you could include
the content for the other div in the same update as for the first div,
and then after putting it in, you could move it. So for instance,
suppose you want to update 'otherDiv' with some content that we'll
wrap in a container in the response with the ID 'contentToMove'.
Something like this:
* * * *
// A function that moves the content with the ID 'contentToMove'
// from where it is to 'otherDiv'
function moveResult() {
$('otherDiv').update($('contentToMove'));
}
// Handle the successful completion of our response
function getResponsePaid(resp) {
$('paidDiv').update(resp.responseText);
moveResult.defer();
}
* * * *
Note that getResponsePaid uses Function#defer[2] to call moveResult
rather than immediately moving the content; you have to give the
browser a moment to get its work done. (I'm also using Element#update
[3] rather than directly setting innerHTML, but the latter works --
update just provides some useful features, like handling it when you
pass in an Element rather than a string as we are in moveResult.)
That would probably work, but it's ugly. For any kind of production
app, I'd probably return the content as data (probably in JSON format)
and then update the divs directly. Something like this:
* * * *
function getResponsePaid(resp) {
var data;
data = resp.responseJSON;
if (data) {
$('paidDiv').update(data.paidContent);
$('otherDiv').update(data.otherContent);
}
}
* * * *
This requires that you change your server-side stuff to return
"application/json" content rather than HTML. You probably know about
JSON[4], but if not, worth having a quick read up on it. In this
case, the JSON returned by the page might look like this:
{
"paidContent": "Paid",
"otherContent": "Your payment was successful."
}
or
{
"paidContent": "<span class='error'>Error</span>",
"otherContent": "There was a problem charging your Visa card, the
response was <blockquote>AVS mismatch</blockquote>"
}
Note that when embedding HTML in JSON responses, you have to be sure
to quote it appropriately (the same way you would if you were writing
HTML within a literal JavaScript string).
This article[5] on the unofficial Prototype & script.aculo.us wiki
about Ajax requests and JSON may also be useful; it talks about making
"bulletproof" requests and happens to use a JSON response as its
example.
[1] http://prototypejs.org/api/ajax/updater
[2] http://prototypejs.org/api/function/defer
[3] http://prototypejs.org/api/element/update
[4] http://json.org
[5] http://proto-scripty.wikidot.com/prototype:how-to-bulletproof-ajax-requests
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 11, 12:36 am, Nick P <[email protected]> wrote:
> Hi Everyone, new to prototype, and need some help. Thanks in advance
> for reading this.
>
> Basically I am connecting to a php script, passing some values to it,
> and putting whatever it returns into the div 'paidDiv'. However, I
> have another div I need to update in addition to paidDiv. How would I
> do that?
>
> Here is my javascript:
>
> /* ajax.Request */
> function ajaxRequestPaid(url,data) {
> var aj = new Ajax.Request(
> url, {
> method:'get',
> parameters: data,
> onComplete: getResponsePaid
> }
> );
>
> }
>
> /* ajax.Response */
> function getResponsePaid(oReq) {
> $('paidDiv').innerHTML = oReq.responseText;
>
> }
>
>
--~--~---------~--~----~------------~-------~--~----~
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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
