Get rel=id and pass to query

[jarvis]

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

[trq]

http://api.jquery.com/jQuery.ajax/

[jarvis]

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 

[trq]

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?

[jarvis]

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

[trq]

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

[jarvis]

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

[jarvis]

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

[trq]

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'].

 

[jarvis]

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

[jarvis]

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.

[trq]

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.

 

[AyKay47]

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);
});

[jarvis]

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

[Andy-H]

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  
});  
});

[jarvis]

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

[Andy-H]

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.

[jarvis]

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

[jarvis]

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

[trq]

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

[jarvis]

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

[trq]

Show us test.php

[jarvis]

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

[trq]

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.

[jarvis]

Ok thanks Thorpe.

 

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

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

Thanks