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:


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


SELECT photo_id, description FROM portfolio WHERE photo_id = :photo_id

And the photos in the gallery looks like this:


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

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:

$.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 :tup:

This is what I have now:


$(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