On click give variable another value - php

Question

I am trying to implement pagination functionality to a page. I have custom post types and I have looped through and gathered all the posts for this page. I display the first post and hide the rest and I have next/previous buttons that will show the next post and hide the current post. It seems to be working, however I am not able to view all the posts - only 2 of them.
Here is my code:
<?php
$currProj = 1;
$countposts = 3;
?>
<?php if ($countposts>1) {
$prevID = $currProj - 1;
if ($prevID <= 0) {
$prevID = $countposts;
?>
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
<?php } else {
?>
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
<?php
//$currProj = $prevID;
}
echo $currProj; //This outputs 3 where it should be 1
$nextID = $currProj + 1;
if ($nextID > $countposts) {
$nextID = 1;
?>
<a class="btn-next" id="nextlink" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $nextID; ?>')" onclick="<?php $currProj=$nextID; ?>"> Next > </a>
<?php } else {
?>
<a class="btn-next" id="nextlink" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $nextID; ?>')" onclick="<?php $currProj=$nextID; ?>"> Next > </a>
<?php
//$currProj = $nextID;
}
} ?>
The javascript function is working correctly, the issue seems to be the $currProj variable. I think the issue is my onClick attribute in the tag - is there a better way of having an onClick event that will give my variable a different value? Or a way of checking if this link has been clicked then give the currProj the value of prevID/nextID ?
I have been stuck on this for a while now and I don't seem to be getting anywhere. Any help would be greatly appreciated.

Answer 1

Your code above seems to be conflating what's happening on the server side and what's happening on the client side. Anything wrapped in <?php ... ?> is going to be executed on the server and then sent to the client as HTML -- for example, this line:
<a class="btn-previous" href="javascript:showProject('<?php echo $currProj; ?>','<?php echo $prevID; ?>')" onclick="<?php $currProj=$prevID; ?>"> < Previous </a>
will end up being sent to the client with all of the PHP interpreted:
<a class="btn-previous" href="javascript:showProject(1,3)" onclick=""> < Previous </a>
The key thing here is this you're not re-running the PHP when you click -- the client is completely agnostic to the PHP ever having been there. Every time you click the Previous button, its href attribute is still javascript:showProject(1,3).
You have two options; namely, you can go back to the server and have it re-render the page whenever you click the next / previous button by including those variables as parameters to your page, e.g., get the current project from the URL and link like so:
$currProj = ( $_REQUEST['currProj'] ? $_REQUEST['currProj'] : 1 );
...
<a class="btn-previous" href="<?php echo '[your_url_here]?currProj=' . $prevID ?>">
However, it looks like you're interested in doing this without ever pinging the server again. In that case, you'll need to store, reference, and update these variables in javascript. There are probably a thousand ways to do this; the closes to what you seem to want to do would be to have your showProject function take no arguments and instead figure out what it needs to do based on the value of the current project, something like
var currProj = <?php echo $currProj; ?>; // this initializes the JS variable currProj from whatever it is in PHP when the server sends the page contents
var countposts = <?php echo $countposts; ?>; // initialize this too
var showPrevProject = function showPrevProject() {
// hide the current project using jQuery; assumes the DOM element you want to hide is given ID #project-[currProj]
$('#project-' + currProj).hide();
// Update the current project variable in JS; scope should update globally
currProj = currProj - 1;
if (currProj === 0) { currProj = countposts; }
// Now show that element
$('#project-' + currProj).show();
}
Then in your link you can use showNextProject or showPrevProject as appropriate.
More generally, though, it's probably better to include your javascript as a separate file and register event handlers to deal with this sort of thing. I would also recommend checking out jQuery, which is a powerful library that greatly simplifies accessing and manipulating DOM elements.

Answer 2

What about creating a HTML hidden input for storing those values?
<input type="hidden" value="<?php echo $currProj ?>" id="currProj">
So you can access it and modify it in client side with javascript or jQuery. If you want a solution server-side you can do it with ajax and POST or GET requests.
Maybe this isn't what you are looking for (modify the php attributes) and I misunderstood you. Let me know if this is your case.