Load Dynamic Content into DIV via AJAX

[jarvis]

Hi All,

 

Am hoping someone can point out my perhaps obvious issue here.

 

I've a series of links that are dynamically created:

<a class="team-link" rel="<?php the_ID(); ?>" href="#">

When a link is clicked, I'm trying to get content to load into this DIV:

<div id="single-post-container"></div>

I have the following jquery:

<script>
$(document).ready(function(){
 
        $.ajaxSetup({cache:false});
        $(".team-link").click(function(){

			var post_id = $(this).attr("rel");

            $.ajax({
                url        : "http://www.domain.co.uk/wp-content/themes/name/loop.php",				
                data       : {"the_team": post_id },
				type       : "POST",
                dataType   : "html",                
				success: function(response) {
					$("#single-post-container").html(response);						
				}
        return false;
        });
		
 
});
</script>

This is my loop.php file:

require_once('../../../wp-load.php');

// Our variables
$the_team = (isset($_GET['post_id'])) ? $_GET['post_id'] : 0;

echo $the_team;

query_posts(array(
			'post_type' => 'work',
			'meta_key' => 'author_name',
			'meta_value' => $the_team
));

// our loop
if (have_posts()) {
	while (have_posts()){
	the_post();	
	?>

		<h1><?php the_title(); ?></h1>
		<?php the_content(); ?>
        <hr />
	
	<?php
	}
}
wp_reset_query();

However, when you click the link, nothing happens. I know loop.php works as I can specify a value and manually browse to it to see the content.

 

I feel I'm missing something obvious as I'm new to AJAX.

 

Your help/patience is very much appreciated

[Psycho]

Well, this jumps out of me:

 

In the AJAX function you pass the value using this

 

type : "POST",

 

But, in the loop.php file you retrieve the value using

 

$the_team = (isset($_GET['post_id'])) ? $_GET['post_id'] : 0;

 

Note: You should set a default response from loop.php when there are no results so you can detect the root cause easier.

[jarvis]

Thanks Psycho for the prompt reply. I've tried as both POST and GET in each file but to no avail. It was a copy and paste error above. They were set as GET

 

I've also placed an ELSE statement in loop for testing as suggested.

 

Is there anything else I can try?

[jarvis]

I also noticed an error in my js file, so it now looks like this:

$.ajaxSetup({cache:false});
$(".team-link").click(function(){
	
	var post_id = $(this).attr("rel");
	
	$.ajax({
		url        : "http://www.domain.co.uk/wp-content/themes/name/loop.php",				
		data       : {"the_team": post_id },
		type       : "POST",
		dataType   : "html",                
		success: function(response) {
			alert("success");
			$("#single-post-container").html(response);						
		},
		error: function (jqXHR, textStatus, errorThrown) {
			$("#temp_load").remove();
			alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);			
		}
	});
}); 

Unfortunately, it still isn't working 

[jarvis]

Ok, making progress! My script now looks like:

$(".team-link").click(function(){
	
	var post_id = $(this).attr("rel");
	
	$.ajax({
		url        : "http://www.domain.co.uk/wp-content/themes/name/loop.php",				
		data       : {the_team: post_id},
		type       : "POST",
		dataType   : "html",                
		success: function(data) {
			alert("success");
			$("#single-post-container").html(data);						
		},
		error: function (jqXHR, textStatus, errorThrown) {
			$("#temp_load").remove();
			alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);			
		}
	});
}); 

It returns the success message but not getting the ID. 

 

Sorry to post in small amounts but seems to help the thought process. Just think I'm missing the total obvious now LOL

[fastsol]

Does this the_ID(); echo out an id automatically? Cause you don't have an echo in front of it in the script posted.  Are you sure an id is being output to the browser?  Check view source of the page to make sure it's placing an id in the link tag.

[jarvis]

Thanks Fastsol,

 

It does echo out an ID, if I view the source I can see 

rel="1"

Within my main JS call, I've added:

alert(work_post_id);

Which when I click the link, get the pop up with a 1 in it. So can see it's getting the value. It just seems to fail to pass it to the script, so guessing this is where the issue is but can't see why

[jarvis]

Ok, changing:

$the_team = (isset($_POST['post_id'])) ? $_POST['post_id'] : 0;

To:

$the_team = $_POST['post_id'];

Works but can I check this is the correct thing to do and isn't some glitchy fix?

[Psycho]

Ok, changing:

$the_team = (isset($_POST['post_id'])) ? $_POST['post_id'] : 0;

To:

$the_team = $_POST['post_id'];

Works but can I check this is the correct thing to do and isn't some glitchy fix?

 

That makes no sense. The first code snippet is checking to see if $_POST['post_id'] is set. If so, it sets that as the value of $the_team. Otherwise it sets the value to 0. That's a pretty common practice to prevent errors in case nothing is passed to the script. I don't see any typos in that line that would cause it to fail. So, I can't explain it.

 

Go with the second option if you want. Just understand that you could get an error if no value is passed to that script.