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" <t...@crowdersoftware.com> 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 <nickloganpa...@gmail.com> 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 prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to