Updating URL - pushState not working
<p>I have a comics site (<a href="http://www.hittingtreeswithsticks.com" rel="nofollow">www.hittingtreeswithsticks.com</a>) where I'd like to allow a user to click on a thumbnail of a comic (on homepage.php) to view the full size of it (on viewcomic.php).</p>

<p>I'd like to associate a function to a particular comic.</p>

<p>I do so by getting the imgid, and checking if it equals the comic I want to associate the function with:</p>

<pre><code>&lt;?php 
if ($imgid == 1) {
?&gt;
&lt;button id="generateButton"&gt;Generate&lt;/button&gt;

&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
        $("#generateButton").click(function(e) {
            //alert("called");
           $.get("../scripts/NameGenerator2.php", 
                function(returned_data) {
                    $("#generated").html(returned_data);
                }
            )
        });
    });
&lt;/script&gt;

&lt;?php } ?&gt;
&lt;br /&gt;&lt;span id="generated"&gt;&lt;/span&gt;&lt;br /&gt;
</code></pre>

<p><strong>Which calls this PHP script:</strong></p>

<pre><code>&lt;?php 
$adj = array("Happy", "Great", "Mandarin", "New", "Golden", "Ming's");
$noun = array("Dragon", "Sea", "Wok", "Fortune", "Rice", "Empire");
$place = array("Garden", "China", "Village", "Palace", "Kitchen", "Mountain");


$x = rand(0, count($adj)-1);
$y = rand(0, count($noun)-1);
$z = rand(0, count($place)-1);

echo '&lt;p&gt;' . $adj[$x] . " " . $noun[$y] . " " . $place[$z] . '&lt;/p&gt;';
?&gt;
</code></pre>

<p>This works fine. The issue is, I want users to be able to press right keys to go to the next image in an array. That works fine, but it's not updating the url with the new ID. This means that the function above will not disappear when a new image is shown.</p>

<p>I'm trying to use window.history.pushState to update the comic ID, but it's throwing errors: </p>

<blockquote>
  <p>Error: Object doesn't support this property or method</p>
</blockquote>

<p><strong>Script that takes keyinput and cycles through array</strong>... need to update the ID in the URL so that the function won't appear for the next/last image.</p>

<pre><code>&lt;script type="text/javascript"&gt;

var imgArray = [&lt;?php echo implode(',', getImages()) ?&gt;];
$(document).ready(function() {      

    var img = document.getElementById("theImage");
    img.src = imgArray[&lt;?php echo $imgid ?&gt;];
    var imgIndex = &lt;?php echo $imgid ?&gt;;

    $(document).keydown(function (e) {
        //next image: right arrow
        if (e.which == 39) 
        {
            imgIndex++;
            if (imgIndex &gt; imgArray.length-1) 
            {
                imgIndex = 0;
            }
            img.src = imgArray[imgIndex];
            window.history.pushState(null, null, 'http://www.hittingtreeswithsticks.com/?action=viewimage&amp;id=' + imgIndex);
        }
        //last image: left arrow
        if (e.which == 37) 
        {
            if (imgIndex == 0) 
            {
                imgIndex = imgArray.length;
            }
            img.src = imgArray[--imgIndex];
        }
        //random: spacebar
        if (e.which == 32) 
        {
            //Range is: 1 to imgArray.length
            imgIndex = Math.floor((Math.random()*(imgArray.length-1))+1);
            img.src = imgArray[imgIndex];
        }
    });         
}); 
&lt;/script&gt;

&lt;?php
function  getImages() {
//$test = "getImages function called";
include '../scripts/dbconnect.php';
$catResult = $mysqli-&gt;query("SELECT imgid, imgname, imgthumb, catfk FROM child_images");

$img = array();
while($row = $catResult-&gt;fetch_assoc()) 
{
    $img[] = "'../images/all_comics/" . $row['imgname'] . "'";
}
return $img;
}
?&gt;
</code></pre>

<p>Any thoughts?</p>

<p>Thanks!</p>
