Pass jquery value to php variable

JavaScript
1

Hi All,
I really hope someone can help as I’m having a tough time trying to sort this.
I’ve the following script in my header.php file:


$(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);
		//$("#single-home-container").text(post_id);

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

		return false;
	});
});

It passes the value I need into this div in my footer.php file:

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

However, I really need to get the value and pass it into a php variable so I can use it in a mysql query. So I’ve got this:


<?php
$locID = $_POST['locationID'];
echo 'Result: '.$locID;
?>
But it simply wont get the value. Any help is much appreciated!
2

Sorry for a dumb question, but how do you know it won’t get the value? From the code you presented, it doesn’t look like there’s any way to confirm or deny.

3

Thanks for the reply. Surely, if the code worked, I would be able to see the value when I print the php variable:


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

As $locID should contain the value from the jquery code

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

Or have I miss understood? :frowning:
Thanks

4

You may want to instead var_dump of the $_POST variable, so that you can determine whether the information you need is there or not and then troubleshoot from there.

5

Also, keep in mind that you’re sending an AJAX request without specifying a “success” function, so there still wouldn’t be any way to check what your PHP echos/dumps. You’d have to do something like this:


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

Thanks for the replies.

I tried var_dump and it just shows an empty array.

If I add:


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

It doesn’t do anything. I’m astounded it’s not so simple to just pass a value into PHP’s

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

:frowning:

7

A simple test shows that your scripting code works works without any problems.


<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var post_id = 20;
$.post("footer.php", {"locationID": post_id}, function (txt) {
    alert(txt);
});
</script>
</body>
</html>

footer.php


<?php
$location_id = filter_input(INPUT_POST, 'locationID', FILTER_SANITIZE_NUMBER_INT);
echo 'Footer with location id of ' . htmlentities($location_id);
?>

The footer would have worked too with only:


echo 'Footer with location id of ' . $_POST['locationID'];

but it’s best to make good use of input filtering and output protection as a normal way of doing things.

Given that the above JavaScript code works fine, this points the finger at something else other than the $.post() code being the problem.

8

Thanks paul_wilkins.

With that, I can see the result in the pop up/alert but the php statement doesn’t print the value? Is there a way to print it out in the php and not the alert?
Thanks again

9

Ahh, this may be something that you need to learn more about,

When jQuery’s posts to the php file, the output of that PHP file is sent back to the function in the txt variable.

10

Oh I see.:frowning: hmmm, this is proving tricky.

Please can I ask you to advise how i get it from the text variable to the php variable as in:

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

Thanks again, your help really is very much appreciated!

11

That all depends on how the needed value appears in the HTML code.

12

Hi,
I’m simply trying to get the ID of a link so I can pass it to a query. So for example, if can do this:

<?php $locationID  = $_POST['locationID']; echo 'Location Id is: '.$locationID; ?>

to ensure that it’s working.

As I’m trying to load a list of properties on a site and by clicking each one, will load them on the page you’re currently on. So I figure, get the ID of the property onclick and pass it to the query. I therefore assume, if the above code works, I can pass the $locationID value to the query to load the info needed. If that helps?

13

Yes that does indeed. The code in post #7 demonstrates how to achieve that type of communication, where jQuery is used to post an ajax message to a .php file, and the successful output of that php file is passed back to the function, whereupon you can do something with it.

14

Ok. I’ve been playing around but am still none-the-wiser! So if I post my code, it may help.
I’ve got header.php with this:


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

I then have footer.php which lists all the dynamic links:


			<ul>
			<?php	
			$args = array(
						  'post_type' => 'locations',
						  'order'    => 'DESC'
						  );
			$loop = new WP_Query( $args );
			while ( $loop->have_posts() ) : $loop->the_post();
			?>	
				<li><a href="#" rel="<?php the_ID(); ?>" class="locationID"><?php the_title(); ?></a></li>
			<?php	
			endwhile;	
			wp_reset_query();
			?>												
			</ul>

In footer.php, I also include a call to a file:

<?php include(TEMPLATEPATH."/test.php"); ?>

In test.php I want to show the result of the selected link:


echo 'Footer with location id of ' . $_POST['locationID'];
$the_location_id = $_POST['locationID'];

			<?php	
			$args = array(
						  'post_type' => 'locations',
						  'posts_per_page' => 1,
						  'p' => $the_location_id ,
						  );
			$loop = new WP_Query( $args );
			while ( $loop->have_posts() ) : $loop->the_post();
			?>	
			<?php the_title(); ?>
			<?php	
			endwhile;	
			wp_reset_query();
			?>

So As you can see, I’m trying to get the id of the clicked link, pass it to a php variable which I can then use in a query. From what’s shown above, surely that’s correct? But if I echo the variable

echo $the_location_id;

nothing is shown

Sorry to keep posting but I really would like to get to grips with it and see what I’ve done wrong.

Thanks again

15

So when the page loads, header.php, footer.php and test.php all get included at the same time, and are used to create the page.

If you perform the echo from that test.php page, there naturally won’t be any post data for it to use.
It’s only when you click a link and the jQuery post occurs on a second access of test.php that the post data will be available, and the output will be sent back to the function as the txt string.

16

Yes, they all load at the same time. It’s a wordpress site and this is how the pages are constructed.

So does this mean I can’t achieve what I’m after? As I say, if I add

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

to test.php, whenever I click a link, this shows the right value. So I just need to somehow do something as daft as

<?php $this_id = '<div id="single-home-container"></div>'; ?>

although I know that doesn’t assign the value but I think you know what I mean?

17

Would you mind listing down step-by-step what you want to achieve and why?
Perhaps that will help us to understand what you need to achieve, and how to help you achieve it.

18

Sure, no problem.
I have a wordpress template. This consists of a header.php, page.php and footer.php

page.php
This shows the information from wordpress for standard pages: Home, About, Contact etc

page.php calls header.php and footer.php in

footer.php contains a loop which pulls in a list of properties from a custom post type. Each propoerty has a unique ID.

I’m trying to show the details of any of the properties on the page you’re currently on. The site does not need to load a seperate page for each property. So like having an iframe I guess. Therefore, if you’re on About Us. You will see the list of properties. If I click the first property, it will load the details into test.php. I therefore assumed jquery/ajax would best suit as it refreshes page content without reloading the page

Does that help?

19

Yes, that does help.

You can use the jQuery’s .load() method instead, to more easily achieve that for you.

For example:
[highlight=-“javascript”]
$(“#objectID”).load(“test.php”, { ‘choices’: [“Jon”, “Susan”] } );



Or as you might want to use it:

[highlight=-"javascript"]
$("#single-home-container").load("test.php", { 'locationID': $(this).attr("rel") } );
20

Ok thanks, so if I add

$("#single-home-container").load("test.php", { 'locationID': $(this).attr("rel") } );

to the header.
How do I get that in the test.php file to be linked as I’ve tried:


echo 'Footer with location id of ' . $_POST['locationID'];
$the_location_id = $_POST['locationID'];
echo '<br>Loc ID '. $the_location_id;
$this_id = '<div id="single-home-container"></div>'; echo $this_id;

Thanks again for your help, it really is appreciated!