Jump to content


Photo

Help With AJAX getting PHP generated HTML


  • Please log in to reply
2 replies to this topic

#1 computermax2328

computermax2328

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • LocationUnited States
  • Age:22

Posted 23 July 2013 - 01:46 PM

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, 23 July 2013 - 01:56 PM.

Follow me on Twitter @maxrbaldwin


#2 Muddy_Funster

Muddy_Funster

    Advanced Member

  • Members
  • PipPipPip
  • 2,993 posts

Posted 24 July 2013 - 10:51 AM

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')   )


A simple password hash :

function makePass($word=''){
  $dbSalt = '$2a$07$'.substr(hash('whirlpool',$word),0,22);
  $dbPass = crypt($word, $dbSalt);
 return substr($dbPass,12);
}



My SQL/PHP Blog

#3 computermax2328

computermax2328

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • LocationUnited States
  • Age:22

Posted 24 July 2013 - 05:04 PM

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.


Follow me on Twitter @maxrbaldwin





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com