jQuery dialog() to update database content

JavaScript
1

I modal dialog which is working fine. I want to use the dialog to update certain content in the database.; This is what I have so far:
Javascript:


$(document).ready(function(){
    var width = 500; height = 350;
    $("#gallery_descriptions").dialog({
        autoOpen: false,
        resizable: false,
        width: width,
        height: height		
  });
    $("#gallery a").on("click", function(e){
        e.preventDefault();
  	var id = $(this).data("photo");
  $.ajax({
  type: "GET",
	url:  "gallery_descriptions.cfm",
  dataType: "html",
	data: {
	photo_id: id},
	success:function(res)  {
	 $("#gallery_descriptions").html(res);
	 $("#gallery_descriptions").dialog("open");	
  	}
     });
  });	
});

HTML:


<cfif structKeyExists( FORM, 'description_button' )>
	<cfscript> 
		adminCFC				   = createObject("component", "components.cfcAdmin");
		updateDescriptions = adminCFC.updatePhotoDescriptions(photo_id);
	</cfscript>
  <p>The description for this photo was successfully updated!</p>
<cfelse>
	<cfform method="post" preservedata="true">
			<div class="form_wrapper">
				<label class="label medium_label">Description (English)</label>
			</div>
			<div class="form_wrapper">
				<div class="input_bg input_bg_wide">
					<cfinput type="text" name="description_eng" class="input input_wide" value="#getDescriptions.description_eng#">
				</div>
			</div>  
			<div class="form_wrapper">
				<label class="label medium_label">Description (Greek)</label>
			</div>
			<div class="form_wrapper">
				<div class="input_bg input_bg_wide">
					<cfinput type="text" name="description_gre" class="input input_wide" value="#getDescriptions.description_gre#">
				</div>
			</div>
			<div class="form_wrapper"> 
				<cfinput type="submit" name="description_button" value="Update" class="submit_button">        
			</div>
  	</cfform>
</cfif>

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

What should I do to make this work?

Thank you in advance

2

Hi donboe,

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:

var $dialog = $("#gallery_descriptions"),
    width = 500,
    height = 350;

$dialog.dialog({
    autoOpen: false,
    resizable: false,
    width: width,
    height: height		
});

$("#gallery a").on("click", function(e){
    e.preventDefault();
    var id = $(this).data("photo");
    $.ajax({
        type: "GET",
      	url:  "gallery_descriptions.cfm",
        dataType: "html",
      	data: { photo_id: id },
      	success:function(res)  {
            $dialog.html(res);
            $dialog.dialog("open");
        }
    });
});

$dialog.on('submit', 'form', function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url:  "gallery_descriptions.cfm",
        data: $(this).serialize(),
        success: function(res) {
            $dialog.dialog('close');
        }
    });
});

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.

3

Hi fretburner.

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?

Thank you in advance!

4

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).

5
Off Topic:

Nice link, fretburner. Bookmarked!

6

Hi fretburner

This is the error I get after pressing the form button:

–
[16:38:25.822] POST http://127.0.0.1/Hotelamaryllis/admin/update_descriptions.cfm [HTTP/1.1 500 Variable PHOTO_ID is undefined. 128ms]

To me it doesn’t make any sense?

7

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.

8

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

<cfinput type="hidden" name="photo_id" value="#getDescriptions.photo_id#">

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

data: $(this).serialize()

Thank you in advance

9

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.

10

Thank you so much fretburner, It works great. Thanks for your explanation as well. Very staightforward!