As you can see did I try to use my server side scripting (Coldfusion) to tricker the update query, but when I click the description_button in the form, the dialog is closing and the update doesn’t take place. This is the update query:
UPDATE
gallery_photos
SET
description_eng = "Form.description_eng"
description_gre = "Form.description_gre"
WHERE
photo_id = photo_id
I’m assuming that the HTML/Coldfusion code you posted is the form that gets returned to the initial ajax request when the dialog is opened? That being the case, you could do something like this:
The last block of code catches a form submission event, and submits the data via ajax instead. On success, the dialog is closed, but you probably want to add some kind of success/failure status messages for your end-user to see so they know what’s going on.
As the $(“#gallery_descriptions”) selector was being used quite a bit throughout the code, I’ve cached it to a variable at the beginning of the script, which is more efficient.
Thank you very much for the reply! It all looks very staightforward but somehow nothing is happening when I click the form button. Tha database table isn’t updated and the $dialog is not closing. What could be the reason?
Try opening your browser’s console and check if you’re getting any error messages, and you could also check if the form is actually being submitted (in Chrome, there is a Network tab available in the developer tools, where you can inspect requests and see what data is sent back and forth).
It seems like the script is expecting to be passed a value for PHOTO_ID, but there’s no form field with that name, so perhaps the ID should be passed as part of the URL? Without seeing the code for update_descriptions.cfm, it’s hard to say.
Hi fretburner.Thank you again. :tup: You were absolutely right. I was wrongly under the impression that I could use the data: { photo_id: id } from $(“#gallery a”).on(“click”, function(e). I have now added a hidden field to the form
I have two last questions if you don’t mind. The first one is. I actually don’t want the dialog to close when the updat was successful. Instead I would like to have some kind of a success message replacing the form, The second question I have has to do with AJAX itself. I am not very familiar with it as yet and I try to understand it a bit better. Can you please explain what this means
In the success callback, instead of closing the dialog, use the .html() method to replace the content of the dialog with your message:
$dialog.html('<p>The image details have been updated successfully</p>');
Within the event handler function
$dialog.on('submit', 'form', function(e){ });
the value of this is the form element. We’re wrapping it in a jQuery object and calling the Serialize() method that returns the values from the form fields in a format that the ajax function understands.