SitePoint Sponsor

User Tag List

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

    jQuery dialog box with database values

    I'm working on the CMS for a website. In the CMS I have a page where you can handle the photos in a gallery (add photos and delete photos). What I try to accomplish is to manage the descriptions (3 languages) for each photo. What I have in mind is the following.

    When you click on one of the photos a dialog will open with 3 input fields with the 3 descriptions belonging to the photo that was clicked.
    This is the function that I thought would do the trick:
    Code:
    <script type="text/javascript">
      $(function() {
        $("#descriptions").dialog({
    				autoOpen: false
        });
    		$("#gallery a").on("click", function(e){
    		  e.preventDefault();
          var id = $(this).data("photo");
    			$("#descriptions").dialog("open");
    			$.ajax({
    			data: {photo_id: id}
    		  });	
    	  });
      });
    </script>
    And in the dialog box I have a form with the three text fields holding the descriptions and the following query:
    Code:
    SELECT photo_id, description FROM portfolio WHERE photo_id = :photo_id
    And the photos in the gallery looks like this:
    HTML Code:
    <li><a href="javascript:void(0)" data-photo="#getGallery.photo_id#"><img src="portfolio/thumbnails/#getGallery.photo#"></a></li>
    But that isn't working! What is wrong in this approach?

    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,389
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi donboe,

    The main problem you have here is with your $.ajax call - you haven't specified a URL, or a callback for if the request is successful. It should look something like this:

    Code JavaScript:
    $.ajax({
      type: "POST",
      url: "photo_details.php",
      data: { photo_id: id }
    })
    .done(function( data ) {
      // Add data to dialog form fields
    });

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    Hi donboe,

    The main problem you have here is with your $.ajax call - you haven't specified a URL, or a callback for if the request is successful. It should look something like this:

    Code JavaScript:
    $.ajax({
      type: "POST",
      url: "photo_details.php",
      data: { photo_id: id }
    })
    .done(function( data ) {
      // Add data to dialog form fields
    });
    You're absolutely right. What was I thinking? Thank you so much for your reply

    This is what I have now:
    Code:
    $(document).ready(function(){
      $("#descriptions").dialog({
    			autoOpen: false
      });
    	$("#gallery a").on("click", function(e){
    		e.preventDefault();
      	var id = $(this).data("photo");
      $.ajax({
      type: "GET",
    	url:  "descriptions.cfm",
      dataType: "html",
    	data: {
    	photo_id: id},
    	success:function(res)  {
    	 $("#descriptions").html(res);
    	 $("#descriptions").dialog("open");	
      	}
    		});
      });	
    });
    Again thank you
    “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
  •