Hello
First a bit about me and my setup. I'm an entirely self-taught (the
worst kind, I'm sure!) JavaScript, PHP and MySQL developer. I have a
PowerMac G5 with Apache running on it purely for local development
purposes, after which the code's all uploaded to a shared Linux host.
I use the Prototype library but not, so far, script.aculo.us (maybe I
should look into that).
I should also say that my understanding of Ajax is, erm, a little
hazy, but I have made it work very nicely with the help of
Prototype... until now.
So, my current problem. I'm working on a CMS for a client which
involves a large-ish form via which they add information to their
MySQL database. There are three points in the form where a smaller
form can be called up, via JS, into a 'lightbox' (like a popup but
not a popup) so they can enter subsidiary data which goes into the
database via Ajax and updates a <select> or whatever in the main
form. At the end of each JS function that does the Ajax there's a
'return false;' to prevent the form data being sent in the
traditional manner and calling the main script.
I've made this work perfectly in a couple of places, but in the third
case the 'return false;' is being ignored, the form is being sent in
the traditional way and of course the whole thing falls over because
the data is not what the main script expects. But... apart from the
details, the way this works is identical to the two which work
perfectly well, so I've hit an impasse.
The functions that work (with the irrelevant parts taken out):
============
// handle form for recording a new event venue and adding it to a <select>
function venFormHandler() {
var pars = 'venue=' + encodeURIComponent ($F('venue')) +
'&cityid=' + $F('cityid');
if ($F('url').match (/\w/)) {
pars += '&url=' + encodeURIComponent ($F('url'));
}
if ($F('address').match (/\w/)) {
pars += '&address=' + encodeURIComponent ($F('address'));
}
if ($F('postcode').match (/\w/)) {
pars += '&postcode=' + encodeURIComponent ($F('postcode'));
}
var url = base + 'ajaxnewvenue';
// send request to do the business
var myAjax = new Ajax.Request (
url,
{
method: 'post',
parameters: pars,
onSuccess: function (req) {
// get new venue id from returned xml
var xml = req.responseXML;
var newvenid =
xml.getElementsByTagName('newvenid')[0].firstChild.nodeValue;
if (newvenid) {
// get new venue info from returned xml
// and do the necessary to put it in
the <select>
}
else {
alert ('Unable to add new venue to
database.');
}
$('newvenmsg').style.display = 'none';
},
onFailure: function() {
alert ('Unable to add new venue - script
failure.');
}
}
);
return false;
}
As you can see, this calls the script ajaxnewvenue.php (I always use
multiViews, hence no file extension), and this works like a charm. As
does:
============
// handle form for recording a new speaker and adding him/her to a <select>
function spkrFormHandler() {
var pars = 'surname=' + encodeURIComponent ($F('surname'));
if ($F('sptitle').match (/\w/)) {
pars += '&title=' + encodeURIComponent ($F('sptitle'));
}
if ($F('forename').match (/\w/)) {
pars += '&forename=' + encodeURIComponent ($F('forename'));
}
if ($F('suffix').match (/\w/)) {
pars += '&suffix=' + encodeURIComponent ($F('suffix'));
}
if ($F('urls').match (/\w/)) {
pars += '&urls=' + encodeURIComponent ($F('urls'));
}
var url = base + 'ajaxnewspeaker';
// send request to do the business
var myAjax = new Ajax.Request (
url,
{
method: 'post',
parameters: pars,
onSuccess: function (req) {
var xml = req.responseXML;
// get new speaker id from returned xml
var newspkrid =
xml.getElementsByTagName('newspkrid')[0].firstChild.nodeValue;
// new speaker has been added
if (newspkrid > 0) {
// get info and add to several <select>s
}
// duplicate found (script returns -1 if so)
else if (newspkrid < 0) {
// confirm or reject duplicate
var yesnew = confirm ('There is already
a ' +
name + ' in the database.\nClick OK to add a new ' + name + ' or
Cancel to use the existing one.');
// add new one (further ajax call)
if (yesnew) {
url = base +
'ajaxnewspeakernocheck';
var myAjax = new Ajax.Request (
url,
{
method: 'post',
parameters:
pars,
onSuccess:
function (req) {
var xml
= req.responseXML;
// get
new speaker id from returned xml
var
newspkrid =
xml.getElementsByTagName('newspkrid')[0].firstChild.nodeValue;
// new
speaker has been added
if
(newspkrid > 0) {
// get info and add to
several <select>s
}
// or
not
else {
alert ('Unable to add new
speaker to database.');
}
},
onFailure:
function() {
alert
('Unable to add new speaker
- script failure.');
}
}
);
}
// use existing
else {
// select the existing name in
the <select>
}
}
else {
alert ('Unable to add new speaker to
database.');
}
},
onFailure: function() {
alert ('Unable to add new speaker - script
failure.');
}
}
);
return false;
}
This calls ajaxnewspeaker.php and, if a duplicate is found which the
user accepts (two people can have the same name!),
ajaxnewspeakernocheck.php - and this all works fine and dandy.
However...
============
// handle form for recording a new book and adding a new field to the
main form function bookFormHandler() {
var pars = 'title=' + encodeURIComponent ($F('btitle'));
if ($F('isbn').match (/\w/)) {
pars += '&isbn=' + encodeURIComponent ($F('isbn'));
}
if ($F('publisher').match (/\w/)) {
pars += '&publisher=' + encodeURIComponent ($F('publisher'));
}
if ($F('rrp').match (/\w/)) {
pars += '&rrp=' + encodeURIComponent ($F('rrp'));
}
// complicated stuff about authors omitted here, but trust me, it
still doesn't work without it!
var url = base + 'ajaxnewbook';
// send request to do the business
var myAjax = new Ajax.Request (
url,
{
method: 'post',
parameters: pars,
onSuccess: function (req) {
var xml = req.responseXML;
// get new book id from returned xml
var newbookid =
xml.getElementsByTagName('newbookid')[0].firstChild.nodeValue;
// new book has been added
if (newbookid > 0) {
// get info and insert new field in form
}
// duplicate found (-1 returned)
else if (newbookid < 0) {
// alert about duplication
alert ('There is already a book in the
database
with this ISBN.\nTo make changes to this book, use the Manage Books
page.');
}
// db failure
else {
alert ('Unable to add new book to
database.');
}
},
onFailure: function() {
alert ('Unable to add new book - script
failure.');
}
}
);
return false;
}
I know this makes the correct query string and url for
ajaxnewbook.php, but it simply isn't getting as far as calling that
script. There's no sign of it in my access logs and the Firefox
LiveHTTPHeaders extension shows that it calls the main script
(admin.php) - so for some reason 'return false' isn't working. The
other thing that's clear from LiveHTTPHeaders is that the query
string is definitely as read straight from the form fields, rather
than after the necessary JS processing that's done to it (that
'complicated stuff' I took out) before calling the Ajax.
But what the heck is the difference from the two functions that work?
Sure, there's plenty of difference in the details of the processing
it does, but even if I comment all that out and reduce it to:
var myAjax = new Ajax.Request (
url,
{
method: 'post'
}
);
... and set ajaxnewbook.php to write something in a file, it /still/
fails and calls admin.php.
And for what it's worth, the forms that trigger these functions -
which are very small and simple - are identical apart from the
necessary name changes and the details of the data fields themselves.
Oh, and I get no errors of any sort reported!
I'm tearing the remains of my hair out here, so any clues would be
more than welcome.
--
Cheers... Chris
Highway 57 Web Development -- http://highway57.co.uk/
Mac users swear by their computers.
PC users swear at their computers.
--~--~---------~--~----~------------~-------~--~----~
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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
