jquery AJAX requests not updating php variable
<p>I have a comics website, <a href="http://HittingTreesWithSticks.com" rel="nofollow">Hitting Trees with Sticks</a>, that allows a user to get next, previous, or random comic id by pressing next or simply pressing arrow keys.</p>

<p>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.</p>

<p>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.</p>

<p>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.</p>

<p><strong>Here are snippets:</strong></p>

<p><strong>KeyInput.php</strong>: This is the client-side javascript:</p>

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

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

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

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

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

        }
</code></pre>

<p><strong>viewimage.php</strong> 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 <code>$newID = $_POST['_newImgId];</code>. When I echo out $newID, it says it's not defined.</p>

<pre><code>&lt;?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
</code></pre>

<p>Any thoughts?</p>

<p>Thanks!</p>
