Jump to content

Help With AJAX getting PHP generated HTML


computermax2328

Recommended Posts

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 by computermax2328
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.