SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery dialog() to update database content

    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:
    Code:
    $(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:
    HTML Code:
    <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:
    Code:
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,446
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    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:

    Code JavaScript:
    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. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,446
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Quote Originally Posted by donboe View Post
    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).

  5. #5
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,048
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Off Topic:

    Nice link, fretburner. Bookmarked!

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    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!
    Hi fretburner

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

    --
    [16:38:25.822] POST http://127.0.0.1/Hotelamaryllis/admi...scriptions.cfm [HTTP/1.1 500 Variable PHOTO_ID is undefined. 128ms]

    To me it doesn't make any sense?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  7. #7
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,446
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Quote Originally Posted by donboe View Post
    [16:38:25.822] POST http://127.0.0.1/Hotelamaryllis/admi...scriptions.cfm [HTTP/1.1 500 Variable PHOTO_ID is undefined. 128ms]
    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. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi fretburner.Thank you again. 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
    Code:
    <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
    Code:
    data: $(this).serialize()
    Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  9. #9
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,446
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Quote Originally Posted by donboe View Post
    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 update was successful. Instead I would like to have some kind of a success message replacing the form.
    In the success callback, instead of closing the dialog, use the .html() method to replace the content of the dialog with your message:
    Code JavaScript:
    $dialog.html('<p>The image details have been updated successfully</p>');

    Quote Originally Posted by donboe View Post
    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
    Code:
    data: $(this).serialize()
    Within the event handler function
    Code JavaScript:
    $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. #10
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much fretburner, It works great. Thanks for your explanation as well. Very staightforward!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •