Help With AJAX getting PHP generated HTML

[computermax2328]

Hey All,

 

I am relatively new to jQuery and AJAX. Doing pretty fine with basic jQuery functions, but I am having a hard time understanding AJAX. Here is what I am trying to do:

 

1. I have a PHP generated nav-bar, which works and generates fine, and each link in this nav-bar gets an id number that is provided to them from a database of photo galleries. I store this id number in each link using HTML data-type. 
2. When one of these links is clicked, it passes its id number to a jQuery on click function using .data("id"). This number is stored in a variable x. 
3. Here is where I am getting messed up. I have an AJAX request that on click asks for a PHP file, get-gallery.php, and this PHP file queries the database to get all of the photos in the photo gallery. Get-gallery.php works fine. I tested it and it echos each photo perfectly. The file paths are wrong right now, but I am not worried about that.

I was wondering, how do I get the gallery-get.php to echo where I need it to in the DOM? Take a look below and let me know what you think. 

 

Thanks in advance,

 

PHP generated nav bar:

<ul id="categories">
		<?php
			$go = "SELECT * FROM `wp_ngg_gallery` ORDER BY `gid` DESC LIMIT 30";
			$look = mysqli_query($con, $go);
				if(!$look) {
					echo "This does not work " . mysqli_errno();
				}
				while ($find = mysqli_fetch_array($look)) {
					$name = $find['name'];
					$gid = $find['gid'];
					echo "<li><a href='#' data-id='" . $gid . "'>" . $name . "</a></li>";
				}							
		?>
			</ul>

jQuery AJAX request: 

<script type="text/javascript">
$(document).ready(function() {
	$("#categories li").on("click", "a", function(){
	var x = $(this).data("id");
	$.ajax({
		url: "php/gallery-get.php",
		data: {"p": x},
		success: function(response){
			$(this).html(response).insertAfter("#content");
		};
	});
	});
});
</script>

gallery-get.php

<?php
$id = $_GET['p'];
	$select = "SELECT * FROM wp_ngg_pictures WHERE `galleryid`=$id";
	$query = mysqli_query($con, $select);
		echo "<ul id='gallery' class='width'>";
			while ($row = mysqli_fetch_array($query)) {
				$file = $row['filename'];
				$pid = $row['post_id'];
				$alt = $row['alttext'];
					echo "<li><img alt='" . $alt . "' src='images/" . $file . "'></li>";
			}
		echo "</ul>";

?>

EDIT: If you can see a database connection in gallery-get.php, refresh the page. That was in there for testing pages on my local machine.

Edited July 23, 2013 by computermax2328

[Muddy_Funster]

in the success function of the $.ajax() change $(this). to $('#divID'). Where divID is the id of your desired target div. (  if it's a class rather than an ID the used $('.classID')   )

[computermax2328]

That was a good point, but not the right answer. I am going to rehash some code and then I will update what I did. Any other ideas, let me know.