Hello Everyone,
I have been going crazy over this for the past couple of hours. What I
have is a tabbed page. Depending on the page id, content is included
into the site with php include. Now, two of these tabs have forms
which when submitted get caught by Event.observe and form handling
gets taken over by Ajax. My even handler is as follows:
document.observe('dom:loaded', function() {
function sendNewClientSettingForm(event){
Event.stop(event);
alert("Entered sendNewClientSettingForm Function");
var oOpt1 = {
method: "POST",
parameters: Form.serialize("addClientSettingForm"),
asynchronous: true,
onFailure: function (oXHR) {
$('clientSettingTable').update(oXHR.statusText);
},
onSuccess: function(oXHR) {
$('clientSettingTable').update(oXHR.responseText);
}
};
var oRequest = new Ajax.Updater({success:
oOpt1.onSuccess.bindAsEventListener(oOpt1)}, "formProcessor.php",
oOpt1);
}
function sendNewServerSettingForm(event){
Event.stop(event);
alert("Entered sendNewServerSettingForm Function");
var oOpt2 = {
method: "POST",
parameters: Form.serialize("addServerSettingForm"),
asynchronous: true,
onFailure: function (oXHR) {
$('serverSettingTable').update(oXHR.statusText);
},
onSuccess: function(oXHR) {
$('serverSettingTable').update(oXHR.responseText);
}
};
var oRequest = new Ajax.Updater({success:
oOpt2.onSuccess.bindAsEventListener(oOpt2)}, "formProcessor.php",
oOpt2);
}
function updateClientSettings(event){
Event.stop(event);
alert("Entered updateClientSettings Function");
var oOpt3 = {
method: "POST",
parameters: Form.serialize("clientSettingTable"),
asynchronous: true,
onFailure: function (oXHR) {
$('clientSettingTable').update(oXHR.statusText);
},
onSuccess: function(oXHR) {
$('clientSettingTable').update(oXHR.responseText);
}
};
var oRequest = new Ajax.Updater({success:
oOpt3.onSuccess.bindAsEventListener(oOpt3)}, "formProcessor.php",
oOpt3);
}
function updateServerSettings(event){
Event.stop(event);
alert("Entered updateServerSettings Function");
var oOpt4 = {
method: "POST",
parameters: Form.serialize("serverSettingTable"),
asynchronous: true,
onFailure: function (oXHR) {
$('serverSettingTable').update(oXHR.statusText);
},
onSuccess: function(oXHR) {
$('serverSettingTable').update(oXHR.responseText);
}
};
var oRequest = new Ajax.Updater({success:
oOpt4.onSuccess.bindAsEventListener(oOpt4)}, "formProcessor.php",
oOpt4);
}
Event.observe('addServerSettingForm', 'submit',
sendNewServerSettingForm, false);
Event.observe('saintSettings', 'submit', updateServerSettings,
false);
Event.observe('addClientSettingForm', 'submit',
sendNewClientSettingForm, false);
Event.observe('clientSettings', 'submit', updateClientSettings,
false);
});
Now... The first two Event.observe's work fine and stuff acts just
like i want. However, the second pair DO NOT work. Funny part is, if I
flip the pairs the ones that always work are the first two. I am JUST
getting into Ajax stuff and event handling so I am SURE that I am not
handling stuff properly or timings are off somewhere. What did I
miss?
Please help.
Thank You,
~inq
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
