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 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 -~----------~----~----~----~------~----~------~--~---