jquery AJAX requests not updating php variable

Question

I have a comics website, Hitting Trees with Sticks, that allows a user to get next, previous, or random comic id by pressing next or simply pressing arrow keys.

Since images are stored in a database, the only way for me cycle through these images on the client side was to store them in a javascript array, and store the php $imgid in a javascript variable as imgIndex. Then I could alter that index on the client side when they press keyboard keys.

When the user presses a key, I'm using pushstate to alter the imgid in the URL, but that's not actually updating the server side $imgid. I need to update the server side $imgid because I'm associating a liking function with each specific ID... but currently, the total likes associated with an img ID won't refresh/update when I press a key to get a new image.

My solution was to not only use the PushState to update the URL, but when a key is pressed, I use a $.post, and send the updated imgIndex to the php script.

Here are snippets:

KeyInput.php: This is the client-side javascript:

<script type="text/javascript">
  var imgArray = [<?php echo implode(',', getImages($site)) ?>];
  var imgIndex = <?php echo $imgid ?>;

$(document).ready(function() {      
    var img = document.getElementById("showimg");
    img.src = imgArray[<?php echo $imgid ?>];

    $(document).keydown(function (e) {
        var key = e.which;
        var rightarrow = 39;
        var leftarrow = 37;
        var random = 82;

        if (key == rightarrow) 
        {
            imgIndex++;
            if (imgIndex > imgArray.length-1) 
            {
                imgIndex = 0;
            }
            img.src = imgArray[imgIndex];
            window.history.pushState(null, null, '.?action=viewimage&site=comics&id=' + imgIndex);

            $.post('./templates/viewimage.php', { _newImgId : imgIndex },
                function(data) {
                    //alert(data);
                }
            );

        }

viewimage.php This is the file that originally gets the $imgid, then it calls the keyInput.php script to accept key input... that alters the javascript imgid. For testing purposes, I've tried using $.post and $.get AJAX to send the updated imgid, as you can see below, that's $newID = $_POST['_newImgId];. When I echo out $newID, it says it's not defined.

<?php 
/*
Controls display of comic on the viewComic template
*/
include 'include/header.php';

global $site, $imgid;

$cat = (isset($_GET['cat']) ? ($_GET['cat']) : null); 
$site = (isset($_GET['site']) ? ($_GET['site']) : null);
$title = (isset($_GET['title']) ? ($_GET['title']) : null);
$imgid = $_GET['id']; 

include './scripts/keyinput.php'; 

$newID = $_POST['_newImgId];
echo $newID; //THIS SHOULD ECHO THE UPDATED ID, but it says it is not defined

Any thoughts?

Thanks!

Answer 1

I think the problem with your code is that you are using your Ajax code after the page has already loaded, while trying to change the $_get variables for the initial page load. AFAIK, you need to update the entire page for the "Facebook like" button to change it's ID. Another option would be to use an Iframe. From what I can see, the button's data-href attributes always leads to http://hittingtreeswithsticks.com/ - and that can only be changed by reloading the page using a different attribute.

If you don't mind loading a page for each picture, this can work out for you:

<!-- This is the Like button code -->
<div [...] data-href="http://www.hittingtreeswithsticks.com/<?php echo $_get['id']; ?>"></div>

and the address for this page would be: http://www.hittingtreeswithsticks.com/?id=PAGE_ID

EDIT

Using AJAX, you are calling for data from the backend to be used in the client side, without having to reload the entire page. This data can then be used to alter the code in the client side. In your code, the data is being sent back to you but you are not using it at all, that's why it doesn't work:

$.get('./templates/viewimage.php', { _newImgId : imgIndex },
    function(data) {
        // This is where you should make use of the data received 
    }
);

EDIT #2

If you want to dynamically change the Like button's url, take a look at this answer.

Here is a fiddle of the working example: http://jsfiddle.net/TkFma/4/