Hi,
> But this stops the whole function from working - where should the
> observe line be placed to ensure it will work properly?
Right, because this new line:
> Event.observe('password-form', 'submit', callProcBasketPassword);
...will cause an error, because there is no element with the ID
'password-form' yet. Remember that Ajax calls are *asynchronous*
(that's what the "A" in Ajax stands for). You start the call at the
point in your code where you create the Ajax.Updater object, but then
your code continues immediately without waiting for the Ajax call to
finish. As DJ pointed out, that's what the onSuccess callback is for
-- so you can execute code once the Ajx call has successfully
completed. So it would look something like this:
http://pastie.org/569908
In terms of getting you past these initial hurtles, some recommended
reading:
http://prototypejs.org/learn/introduction-to-ajax
http://proto-scripty.wikidot.com/prototype:how-to-bulletproof-ajax-requests
http://prototypejs.org/api/ajax/request
http://prototypejs.org/api/ajax/updater
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Aug 3, 2:23 pm, Ash <ashley.kenner...@gmail.com> wrote:
> Thanks for the help, I just tried replacing Event.stop(e); with return
> false; in the function but it still submits the form.
>
> I would prefer to do it the new way anyway, if you would be able to
> help me...
>
> The first function is called from Event.observe('email-form',
> 'submit', callProcBasketEmail); which is within a function that is
> called when the document loads.
>
> The question is, where to put the event observe to watch the second
> form.
>
> My first instinct would be to put it in the function which outputs the
> form EG
>
> function callProcBasketEmail(e) {
> var pars = Form.serialize('email-form');
> var myAjax = new Ajax.Updater('email-response',
> 'procBasketEmail.php', {method: 'post', parameters: pars});
> Event.observe('password-form', 'submit', callProcBasketPassword);
> Event.stop(e);
>
> }
>
> (line added just after the ajax function has drawn 'password-form' to
> the screen)
>
> But this stops the whole function from working - where should the
> observe line be placed to ensure it will work properly?
>
> Thanks in advance, I think once I get over these initial few hurdles
> of getting to grips with good practices, I will be fine!
>
> Ashley
>
> Here is the javascript in full:
>
> // Attach handler to window load event
> Event.observe(window, 'load', init, false);
>
> function init(){
> Event.observe('email-form', 'submit', callProcBasketEmail);
>
> }
>
> function callProcBasketEmail(e) {
> var pars = Form.serialize('email-form');
> var myAjax = new Ajax.Updater('email-response',
> 'procBasketEmail.php', {method: 'post', parameters: pars});
> Event.observe('password-form', 'submit', callProcBasketPassword);
> Event.stop(e);
>
> }
>
> function callProcBasketPassword(e) {
> var pars = Form.serialize('password-form');
> alert(pars);
> var myAjax = new Ajax.Updater('password-response',
> 'procBasketPassword.php', {method: 'post', parameters: pars});
> Event.stop(e);
>
> }
>
> On Aug 2, 11:19 am, "T.J. Crowder" <t...@crowdersoftware.com> wrote:
>
>
>
> > Hi Ashley,
>
> > In the one that's not working, you're using what's called a "DOM0-
> > style" handler -- that's where you're attaching the handler the old-
> > fashioned way, by using an attribute on the form element:
>
> > > <form id="password-form" onsubmit="callProcBasketPassword()"
> > > action="procBasketPasswordNoJS.php" method="post">
>
> > Event.stop works only for handlers registered with more modern methods
> > like the Event.observe you used with your first form.
>
> > To correct the problem, I'd recommend using Event.observe to set up
> > the handler for the second form as you did with the first. If there's
> > a reason you can't do that, though, the "DOM0" equivalent of
> > Event.stop is to return false from callProcBasketPassword.
>
> > HTH,
> > --
> > T.J. Crowder
> > tj / crowder software / com
> > Independent Software Engineer, consulting services available
>
> > On Aug 1, 4:35 pm, Ash <ashley.kenner...@gmail.com> wrote:
>
> > > Hi, I just started my first experiment with AJAX today. Got the basics
> > > working, but when I add a tiny bit more complexity I have a problem,
> > > Event.stop doesn't work properly for me.
>
> > > I've followed a couple of basic tutorials to submit an e-mail address
> > > to a PHP script, the PHP looks up the e-mail address and if it finds
> > > it, it shows an input to enter a password. This all works fine except
> > > the function with the ajax call to the password PHP script does not
> > > stop the form submitting.
>
> > > There is probably something very obvious I am doing wrong so hopefully
> > > someone will be able to spot this a mile away! :)
>
> > > The HTML looks like this, once the second form has been displayed
>
> > > <form id="email-form" action="procBasketEmailNoJS.php" method="post">
> > > <input id="email" class="texterwide" type="text" name="email"/>
> > > <input id="email-submit" class="button" type="submit" value="Submit"/>
> > > </form>
>
> > > <div id="email-response">
> > > we have saved details on file for you, please enter your password
> > > below to retrieve them
> > > <br/>
> > > <form id="password-form" onsubmit="callProcBasketPassword()"
> > > action="procBasketPasswordNoJS.php" method="post">
> > > <input id="password" class="texterwide" type="text"
> > > name="password"/>
> > > <input id="password-submit" class="button" type="submit"
> > > value="Submit"/>
> > > </form>
> > > </div>
>
> > > <div id="password-response" name="password-response"/>
> > > </div>
>
> > > Here is the ajax.js
>
> > > // Attach handler to window load event
> > > Event.observe(window, 'load', init, false);
>
> > > function init(){
> > > Event.observe('email-form', 'submit', callProcBasketEmail);
>
> > > }
>
> > > function callProcBasketEmail(e) {
> > > var pars = Form.serialize('email-form');
> > > var myAjax = new Ajax.Updater('email-response',
> > > 'procBasketEmail.php', {method: 'post', parameters: pars});
> > > Event.stop(e);
>
> > > }
>
> > > function callProcBasketPassword(e) {
> > > var pars = Form.serialize('password-form');
> > > var myAjax = new Ajax.Updater('password-response',
> > > 'procBasketPassword.php', {method: 'post', parameters: pars});
> > > Event.stop(e);
>
> > > }
>
> > > When I step through in Firebug I can see that the password-response
> > > div gets filled with the results of the procBasketPassword.php script,
> > > but then the page tries to reload where the form is pointing to -
> > > action="procBasketPasswordNoJS.php".
>
> > > Event.stop(e); works fine in the first function, but not in the second
> > > one. Please can you help?
>
> > > Thanks in advance.
> > > Ashley
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
