Help passing values to listener function for AJAX

4 views
Skip to first unread message

david

unread,
May 31, 2009, 5:27:01 PM5/31/09
to Prototype & script.aculo.us
Repost of message:
http://groups.google.com/group/prototype-core/browse_thread/thread/bf0bed52184001c2?hl=fr


Hello,

I have a function i found on the web that allows you to submit a form
through POST and obviously this function uses the prototype lib. Now
it works as it should but you have to "hard code" 3 parameters into
the function.

1) The form id of the form you want to post
2) The name of the php script that the form/ajax is posted too
3) The name of the html element that you want the ajax reposnsetext
set into.

Can i make this function more generic so that i can pass the above 3
parameters to the function from the html. In In the said function
(below),the hard coded paramaters are contactForm, feedback and
login.php. So this listener function wathces for a form click on the
form with id = contactForm etc...and then grabs the form POST data,
but as i said what if i have more than one form with different ids,
different output elements and different php scripts,

document.observe('dom:loaded', function() {

function sendForm(event){
// we stop the default
submit behaviour
Event.stop(event);
var oOptions = {
method:
"POST",
parameters:
Form.serialize("contactForm"),
asynchronous:
true,
onFailure:
function (oXHR) {
$
('feedback').update(oXHR.statusText);
},

onSuccess:
function(oXHR) {
$
('feedback').update(oXHR.responseText);
}
};
var oRequest = new
Ajax.Updater({success:

oOptions.onSuccess.bindAsEventListener(oOptions)}, "login.php",
oOptions);
}
Event.observe('submitButton',
'click', sendForm, false);

});

david

unread,
May 31, 2009, 6:02:41 PM5/31/09
to Prototype & script.aculo.us
Hi,

to preserve simplicity, you could do something like that:

document.observe('dom:loaded', function() {

[['Form1','login1.php','feedback1','submitButton1'],
['Form2','login2.php','feedback2','submitButton2']].each(function
(aInput){
function sendForm(event){
// we stop the default submit behaviour
Event.stop(event);
var oOptions = {
method: "POST",
parameters: Form.serialize(aInput[0]),
asynchronous: true,
onFailure: function (oXHR) {
$(aInput[2]).update(oXHR.statusText);
},

onSuccess: function(oXHR) {
$(aInput[2]).update(oXHR.responseText);
}
};
var oRequest = new Ajax.Updater(
{success:oOptions.onSuccess.bindAsEventListener
(oOptions)},
aInput[1],
oOptions);
}
Event.observe(aInput[3], 'click', sendForm, false);
});
});

--
david

On 31 mai, 23:27, david <david.brill...@gmail.com> wrote:
> Repost of message:http://groups.google.com/group/prototype-core/browse_thread/thread/bf...
Message has been deleted

Miguel Beltran R.

unread,
Jun 1, 2009, 9:45:55 PM6/1/09
to prototype-s...@googlegroups.com


2009/5/31 js_dev <smac...@hotmail.co.uk>


Maybe this can help you
http://www.mail-archive.com/prototype-s...@googlegroups.com/msg06148.html
foo=function (evt, idForm, phpscript, htmlelement){
}
document.observe('dom:loaded',foo('id1', 'php1', 'ele1').curry);
document.observe('dom:loaded',foo('id2', 'php1', 'ele2').curry);
Reply all
Reply to author
Forward
0 new messages