Forum:

HTML Pages with CSS and JavaScript

help with Prototype

Ranch Hand

Posts: 197

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

In prototype, there's a function called Ajax.Request, which trying but I'm having difficulty understanding it.

Here is a sample script from a very good online tutorial:

My question is this:

The function "showResponse()", which is passed to Ajax.Request, calls another function "originalRequest()". No mention is made of this "originalRequest()" function in the tutorial, and I have no idea what it means. I have emailed the author twice and he said this:

The function you pass in will be called by the object with two arguments, the first one will be the XMLHttpRequest
To be clear, it is the XmlHttpRequest object that carried out the request/response. There's no reference to myAjax in the callback.

Not sure what this means.
I have some Ajax code that is currently not working, and I feel this is the reason. I have tried creating XHR object and passing it in, but that did not work. Please help!!!
[ July 18, 2007: Message edited by: Bear Bibeault ]

Who dares, wins! (SAS motto)

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by kwame Iwegbue:
The function "showResponse()", which is passed to Ajax.Request, calls another function "originalRequest()"

No, it doesn't. Where do you see a function call? The name originalRequest is the parameter that is passed to the showResponses function. It is a reference to the XMLHttpRequest instance used to make the Ajax call.

Not sure what this means.

Do you understand how functions are called and passed parameters?

I have tried creating XHR object and passing it in,

No, it is passed for you.

I have some Ajax code that is currently not working

If you follow the pattern of the tutorial, it should work.

And by the way, when talking about the Prototype library, be sure to capitalize the "P". Otherwise, it could be confused with a constructor's prototype property (with a small "p").

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

kwame Iwegbue

Ranch Hand

Posts: 197

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks Bear. I understand now. Also I understood already how functions are passed parameters. My issue was that, it just wasn't explained well in the tutorial. Now you've explained it.

I'm still unable to make my code work though.

<html>
  <head>
      <script type="text/javascript" src="${pageContext.request.contextPath}/conf/scripts/ajax/prototype.js"></script>
      <script type="text/javascript" xml:space="preserve">
          
          
/** Function that handles the update when the async request returns. */
function update(xhr) {
    var output = e'val(xhr.responseText); //edited to e'val for javaranch
    $('result').innerHtml = output;
}
 
/** Function to submit a request and invoke a handler when it completes. */
function invoke(form, event, handler) {
    var params = Form.serialize(form);
    if (event != null) params = event + '&' + params;
        new Ajax.Request(form.action, {method:'post', postBody : params, onSuccess: handler});
    }
}
</script>
</head>
  
  <body>
    <h1>Stripes Ajax Calculator</h1>
 
  <stripes:form action="/calc.action">
         <table>
            <tr>
                <td>Number 1:</td>
                <td><stripes:text name="numberOne"/></td>
            </tr>
            <tr>
                <td>Number 2:</td>
                <td><stripes:text name="numberTwo"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <stripes:button name="add" value="Add"
                        on'click="invoke(this.form, this.name, update);"/>  //edited for javaranch
 
                    <stripes:button name="divide" value="Divide"
                        on'click="invoke(this.form, this.name, update);"/>
                </td>
            </tr>
            <tr>
                <td>Result:</td>
                <td id="result"></td>
            </tr>
        </table>
    </stripes:form>
  </body>
</html>

It looks like everythings in place, yet it doesn't work. I'm not so sure anymore that its an Ajax or Prototype problem. Could simply be a Javascript syntax issue on my part. Either way I would surely appreciate some help.

(p.s i had to re-write onclick and eval because this system won't allow them in the code)
[ July 18, 2007: Message edited by: kwame Iwegbue ]

Who dares, wins! (SAS motto)

Gregg Bolinger

Ranch Hand

Posts: 15304

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Well, without knowing what exactly "it doesn't work" means, my first guess is this:

new Ajax.Request(form.action, {method:'post', postBody : params, onSuccess: handler});

postBody should be parameters

new Ajax.Request(form.action, {method:'post', parameters : params, onSuccess: handler});

kwame Iwegbue

Ranch Hand

Posts: 197

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks Greg. The code comes from the Stripes Ajax page.

By it doesn't work, I mean there's something in this script block thats either not proper syntax or just not the way its supposed to be. It doesn't matter what test code I put in the 'update' function, its simply not being called:

I've even tried calling onFailure:

However, if I replace 'handler' in onSuccess: handler, with alert('works'), it produces an alert box!. Whats that about?
[ July 18, 2007: Message edited by: kwame Iwegbue ]

Who dares, wins! (SAS motto)

Gregg Bolinger

Ranch Hand

Posts: 15304

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Do you have a javascript function that looks like this?

The onSuccess defines a call back method that you need to implement.

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I see no function named "handler" defined in your code.

[Asking smart questions] [About Bear] [Books by Bear]

kwame Iwegbue

Ranch Hand

Posts: 197

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'm finally getting somewhere. Someone on the Stripes forum recommended I use Firebug, a Firefox pluggin. It did great. Turns out the problem is a missing closing curly brace, and innerHtml should be innerHTML. The code gets to the server now, but I'm still not getting a result. Instead the Result span reads: [object Object]

Who dares, wins! (SAS motto)

Bear Bibeault

Sheriff

Posts: 67753

173

I like...

posted 17 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Originally posted by kwame Iwegbue:
Instead the Result span reads: [object Object]

That's what you get when an instance of Object gets serialized to a string.

[Asking smart questions] [About Bear] [Books by Bear]

He's giving us the slip! Quick! Grab this tiny ad!

Smokeless wood heat with a rocket mass heater

https://woodheat.net