Hi again Nick,
Sorry, final note: My second example assumes that the server-side
doesn't know the structure of your page, merely the agreed contract
for how to tell someone what information to display.
If the server-side has intrinsic knowledge of your page (e.g., is very
strongly bound to it), then you can use a generalized function for
updating multiple divs by having the JSON data use the IDs of the divs
as its members, e.g.:
{
"paidDiv": "Content for paidDiv",
"otherDiv": "Content for otherDiv"
}
It would look something like this:
function processUpdatesFromResponse(resp) {
var updates; // The updates from the response
var id; // Each ID in the response
var elm; // Each matching element
updates = resp.responseJSON;
if (updates) {
for (id in updates) {
elm = $(id);
if (elm) {
elm.update(updates[id]);
}
}
}
}
That lets your server-side dictate an arbitrary set of divs to be
updated, allowing the same response handling code to be used for
multiple types of requests -- but again, intrinsically tying your
server-side code to the structure of your page.
FWIW,
-- T.J.
On Jan 11, 12:24 pm, "T.J. Crowder" <[email protected]> wrote:
> 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-re...
>
> 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
-~----------~----~----~----~------~----~------~--~---
