Get rel=id and pass to query

Hi all,

I hope someone can help!!?

I've a series of links which are generated dynamically when a new page is added. Within the link I've added:

rel="<?php the_ID(); ?>

This contains the ID for that page.

What I'm trying to do, is grab the ID and pass it into a query to load content inline on an existing page. But in order to do so, I need to get the ID and I guess use some trickery to pass it into a query without reloading the page. So I figured Ajax is the key.

So once I have the ID, how could I use Ajax to pass it to the query?

Thanks

Thanks Thorpe.

Ok, so I now have my link as:

<a href="#" rel="<?php the_ID(); ?>"><?php title(); ?></a>

I've then got:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	$.ajaxSetup({cache:false});
	$("li a").click(function(){
		var post_id = $(this).attr("rel")
		$("#your_post_here").html("loading...");
		$("#your_post_here").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/",{id:post_id});
		return false;
	});
});
</script> 

So this grabs the ID from the link and passes it back :

<div id="your_post_here"></div>
<?php $post = get_post($_POST['id']); ?>

Problem is, if can't see the ID. If I echo out $post it gives me an error:

Catchable fatal error: Object of class stdClass could not be converted to string in

If I can check the ID is right, I can then pass it into my query - or so I figure in my head 

Obviously if your echoing $post and it is displaying that error then $post is an object. We wouldn't know because you haven't shown us that code.

Where is $post defined?

It's not defined as on reflection, I dont think I need it. However, if I remove it, I'm not sure how I would check to see it's getting the ID from the rel in the link

I hinted at it earlier but you really need to post some relevant code.

Thanks again Thorpe.

I've made some headway but stuck on one part.

My code now has

$("#single-home-container").html(post_id);

This nicely displays what I need on my page by using:

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

Is there a way I can assign whatever the value of

$("#single-home-container").html(post_id);

to a php variable?

I can then pass this into my query

Thanks, your help is appreciated

Hi All,

I'm sorry to bother you again but I seem to be struggling somewhat with getting the jquery value to PHP. Here's my script:

<script>
$(document).ready(function(){      
$.ajaxSetup({cache:false});     
$(".locationID").click(function(){         
	var post_id = $(this).attr("rel");           
	$("#single-home-container").html("loading...");         
	$("#single-home-container").html(post_id);

	//pass the locationID to php
	 $.post("/footer.php", {"locationID": rel});

	return false;    
});  
}); 
</script>

That's located in header.php. Then in footer.php where I wish to show the info I have:

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

This shows the locationID value which works.

What doesn't work is this part:

<?php 
$locID = $_POST['a']; 
echo $locID;
?>

It should also show the same info as the div so I can pass it to a query. I believe it's the jquery that's at fault. Any help is much appreciated

Thanks

This line:

$.post("/footer.php", {"locationID": rel});

should read:

$.post("/footer.php", {"locationID": post_id});

You'll then also be expecting the data in $_POST['locationID'], I'm not sure what your expecting in $_POST['a'].

Thanks Thorpe.

Ok I now have my header.php with:

$(document).ready(function(){      
$.ajaxSetup({cache:false});     
$(".locationID").click(function(){         
	var post_id = $(this).attr("rel"); 
	//alert($(this).attr('rel'));
	$("#single-home-container").html("loading...");         
	$("#single-home-container").html(post_id);

	$.post("/footer.php", {"locationID": post_id});

	return false;    
});  
})

Then in my footer.php script I have:

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

This very nicely shows the ID which is great.

If I then try to output the value with php like so:

<?php $locID = $_POST['locationID']; echo 'Result: '.$locID;?>

I don't see anything other than Result:

Looking at other examples, I thought this may work but guess I'm missing something? I tried an absolute URL to footer.php, then /footer.php and just footer.php but that had no impact either.

Am sorry to keep posting but the help is very much appreciated

Thanks

Ok as a really simple test I have in my header.php script:

$.get("footer.php", { name: "John", time: "2pm" } );

Which on my footer.php I have :

$n = $_GET['name']; echo $n;

Surely, that should work and show on my page? Sadly it's not and I can't see/understand why.

Your not doing anything with the response. It's been a long while since I've used jQuery, but I suggest you have  another look at there examples. You probably need to use a callback of some sort.

Ok as a really simple test I have in my header.php script:

$.get("footer.php", { name: "John", time: "2pm" } );

Which on my footer.php I have :

$n = $_GET['name']; echo $n;

Surely, that should work and show on my page? Sadly it's not and I can't see/understand why.

as thorpe stated, nothing is being done with the data retrieved from the request, echoing the data in footer.php does not mean that you will see it, a callback function is needed. What do you want to do with the data? I will post code that alerts the data, to give you an idea of how to go about ouputting the retrieved data.

$.get("footer.php", { name: "John", time: "2pm" }, function(data) {
alert("Data Retreved: " + data);
});

Thanks AyKay47

all i'm trying to do is get the value and pass it to a php variable so I can use it with a mysql query. So looking at the code, if I change my original to:

$.get("footer.php", { "locationID": post_id} }, function(data) {	
alert("Data Retreved: " + data);
});

Instead of alert though, I want to get it into my footer script like so:

<?php $locID = $_POST['locationID']; echo 'Result: '.$locID;?>

So if the value from the rel is 2, for example, post_id would be 2 and therefore I should see Result: 2

Am sorry to keep posting, am just trying to understand and get my head around it. So all help is appreciated

The footer.php script is already loaded, AJAX will not reload it live on the page with the get vars. You need to do:

<?php $locID = $_POST['locationID']; echo 'Result: '.$locID;?>

$.get("footer.php", { "locationID": post_id} }, function(data) {
   /* NOW "data" CONTAINS "Result: {$locID}" SO YOU SHOULD UPDATE THE FOOTER ELEMENTS TEXT (OR HTML) WITH THE DATA VALUE */
   $('#footer').text(data);
});

// EDIT - Of course the footer.php is redundant in the above, all your really need to do is:

$(document).ready(function(){      
$(".locationID").click(function(){         
	var post_id = $(this).attr("rel");
	$('#footer').text(post_id); // replace #footer with the proper selector for your footer element  
});  
});

Hi Andy-H

Thanks for the reply. So if I understand right, if I put:

$(document).ready(function(){      	
  $(".locationID").click(function(){         		
  var post_id = $(this).attr("rel");		
  $('#footer').text(post_id); // replace #footer with the proper selector for your footer element  	
  });  
});

That will only show if I use a

<div id="footer"></div>

So how do I assign the value to a php variable? Or once again, have I misunderstood?

Thanks

Yes it will update the innerhtml of anything with the id of footer. If you want to use the value in a query as a PHP variable then you need to pass it to footer.php as suggested earlier, then get the output in the way I showed in my last post.

Thanks again.

I'm clearly missing something though. In header.php I have this:

<script type="text/javascript">		
$(document).ready(function(){      	
$.ajaxSetup({cache:false});     	
$(".locationID").click(function(){         		
	var post_id = $(this).attr("rel"); 		
	//alert($(this).attr('rel'));		
	$("#single-home-container").html("loading...");         						
	$("#single-home-container").html(post_id);				

	//$.post("footer.php", {"locationID": post_id});	

	$.get("footer.php", { "locationID": post_id} }, function(data) {   
		/* NOW "data" CONTAINS "Result: {$locID}" SO YOU SHOULD UPDATE THE FOOTER ELEMENTS TEXT (OR HTML) WITH THE DATA VALUE */   
		$('#single-home-container').text(data);
	});		

	return false;    	
});  
})	
</script>

In footer.php I have:

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

which shows the value but:

<?php $locID = $_POST['locationID']; echo 'Result: '.$locID;   ?>

Still just says Result: and doesn't add the value at the end, for example Result: 2

I'm sure I've irritated everyone by constantly posting on this but I simply can't seem to get it to work! Yet I've done what's been suggested and still can't see why :-(

Have I missed something or put a part of code in the wrong place?

Thanks again

OK, making headway. I've got a compact version of the page code below.

It shows the value in the pop up/alert. I just can't work out how to stop the alert showing and get the php to print the value.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){      	
$.ajaxSetup({cache:false});     	
$(".locationID").click(function(){         		
	var post_id = $(this).attr("rel"); 		

	//alert($(this).attr('rel'));		
	$("#single-home-container").html("loading...");         						
	$("#single-home-container").html(post_id);

	$.post("test.php", {"locationID": post_id}, function (txt) {
		alert(txt);
	});

	return false;    	
});  
})	
</script>
</head>
<body>

<?php echo 'Footer with location id of ' . $_POST['locationID'];?>

<hr>
<div id="single-home-container"></div>
<hr>
<a href="#" rel="1" class="locationID">1</a><br>
<a href="#" rel="2" class="locationID">2</a><br>
<a href="#" rel="3" class="locationID">3</a><br>
<a href="#" rel="4" class="locationID">4</a><br>
</body>
</html>

Any helps appreciated, as I think it's nearly there.

Thanks again

$.post("test.php", {"locationID": post_id}, function (txt) {
    $('#single-home-container').text(txt);
});

Thanks again Thorpe

However, that just outputs the entire page again. I simply need the id value. It's also not assigned to the php

<?php echo 'Footer with location id of ' . $_POST['locationID'];?>

I'm simply trying to get it so I can pass the ID into a query later on, so need to physically see that the ID can be assigned or printed out.

Thanks

Show us test.php

Here's test.php

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){      	
$.ajaxSetup({cache:false});     	
$(".locationID").click(function(){         		
	var post_id = $(this).attr("rel"); 		

	//alert($(this).attr('rel'));		

	$("#single-home-container").html("loading...");         						
	$("#single-home-container").html(post_id);

	$.post("test.php", {"locationID": post_id}, function (txt) {
		alert(txt);
	});

	return false;    	
});  
})	
</script>
</head>
<body>

<div id="single-home-container"></div>
<hr>
<?php $id = $_POST['locationID']; echo 'Result: '.$id;?>
<hr>
<a href="#" rel="1" class="locationID">1</a><br>
<a href="#" rel="2" class="locationID">2</a><br>
<a href="#" rel="3" class="locationID">3</a><br>
<a href="#" rel="4" class="locationID">4</a><br>
</body>
</html>

Thanks

See the problem? That is always going to return an entire page. test.php should only return the data you want.

I think your missing a big part of what Ajax is and how it works. Generally, you use it to return fragments of a page.

Ok thanks Thorpe.

In which case, is it possible to return the page but without the:

<html>
<body>
</body>
</html>

Thanks