[Proto-Scripty] Beginners question, trouble with Event.stop in AJAX
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Beginners question, trouble with Event.stop in AJAX
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Using a prototype function in dynamic content.
Hi, I wasn't talking about String#evalScripts function, I was talking about the evalScripts *option* on Ajax.Updater: http://prototypejs.org/api/ajax/updater If you're not using Ajax.Updater, if you're doing the update yourself, Element#update[1] will eval the scripts for you as part of its processing. But if you need to do it yourself, you'd use String#evalScripts on the responseText member of the Ajax.Response passed into your onSuccess handler. [1] http://prototypejs.org/api/element/update HTH, -- T.J. Crowder tj / crowder software / com Independent Software Engineer, consulting services available On Aug 1, 7:26 pm, Drum csteph2...@gmail.com wrote: Ah, now, that's interesting. I did try to use evalScripts, but I couldn't find any clear examples of how or where to apply it. I tried putting it in the places it seemed logical, but without effect. So, ok, I have an HTML page includes an onclick to fetch some content which will include scripts. The JS functions to handle this are in an external file. Do I put the evalScripts() in onclick=getStuff(param, param).evalScipts(); or do I apply it to the returned text before putting it in innerHTML like var thereturn = http_request.responseText.evalScripts(); document.getElementById(div).innerHTML = thereturn; I tried both, but couldn't get either to work. C On 31 July, 11:13, T.J. Crowder t...@crowdersoftware.com wrote: Hi, You're using the evalScripts option in your ajax call? Can you produce a small, self-contained example[1]? [1]http://proto-scripty.wikidot.com/self-contained-test-page -- T.J. :-) On Jul 31, 1:22 am, Drum csteph2...@gmail.com wrote: P.S. I tried with both delete eds[id]; and eds[id] = undefined. --~--~-~--~~~---~--~~ 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 -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Event onDrop on Sortable class
I have found something.
For information, there is a callback onUpdate which seems to be called
once the mouse is released (during the drag).
Cheers,
Christophe
On Jul 30, 9:22 pm, Christophe cdebuss...@gmail.com wrote:
Yeah... But I am using a sortable...
What do you mean ?
Cheers,
Christophe
On Jul 30, 12:25 pm, Alex McAuley webmas...@thecarmarketplace.com
wrote:
There is some options in draggable
onEnd: function() {}
HTH
Alex Mcauleyhttp://www.thevacancymarket.com
- Original Message -
From: Christophe cdebuss...@gmail.com
To: Prototype script.aculo.us prototype-scriptaculous@googlegroups.com
Sent: Wednesday, July 29, 2009 10:53 PM
Subject: [Proto-Scripty] Event onDrop on Sortable class
Hello,
I am using the Sortable class for handling drag drop between 3
different columns. In my code, I would like to trigger some method
calls just after the drag is ended.
I was then looking for an onDrop option, but it doesn't seem to be
taken into account.
Is this option supposed to be handled by Sortable, if not, do you have
another option that could help ?
Thx in advance !
Christophe- Hide quoted text -
- Show quoted text -
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Will remove() method on top DIV element automatically remove children of that element?
Hi All,
I am wondering if remove() method executed on top DIV (parent DIV
element) will automatically remove the children of this element (as in
remove them from the page and memory if appropriate)? Currently, I am
doing the following to remove the children:
$('topdiv').childElements().each(function(e) {
RemoveChildren(e);
});
Where RemoveChildren(e) defined as:
function RemoveChildren(e)
{
if (e.childElements().length 0)
{
e.childElements().each(function(ee) {
RemoveChildren(ee);
});
}
e.remove();
}
The method above seems to work slow especially on IE where very
visible lag is apparent when executing this type of cleanup.
Thank you in advance,
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Will remove() method on top DIV element automatically remove children of that element?
Hi,
Yes, it will, removing an element (via Prototype or directly with
Node.removeChild) removes that element and its children. Which is
just as well, as the children would have no where to be otherwise.
Note that neither Prototype nor the underlying DOM methods will
automatically remove event handlers from the removed elements, which
can mean that memory remains in use even though the element isn't on
the page anymore. You want to track what children you have event
handlers on and remove the handlers as well. This is much easier if
you're using event delegation to keep the number of handlers to a
minimum.
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Aug 2, 11:25 pm, Kostil kostia.iva...@gmail.com wrote:
Hi All,
I am wondering if remove() method executed on top DIV (parent DIV
element) will automatically remove the children of this element (as in
remove them from the page and memory if appropriate)? Currently, I am
doing the following to remove the children:
$('topdiv').childElements().each(function(e) {
RemoveChildren(e);
});
Where RemoveChildren(e) defined as:
function RemoveChildren(e)
{
if (e.childElements().length 0)
{
e.childElements().each(function(ee) {
RemoveChildren(ee);
});
}
e.remove();
}
The method above seems to work slow especially on IE where very
visible lag is apparent when executing this type of cleanup.
Thank you in advance,
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
