Passing js variables to php using jquery

Question

I'm trying to do a realllly simple post of a javascript variable to a php file.

Jquery bit in keyinput.php:

<script type="text/javascript">

var imgArray = [<?php echo implode(',', getImages($cat, $site)) ?>];
$(document).ready(function() {      

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

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

        if (key != rightarrow && key != leftarrow && key != random) {
            return;
        }
        else {
            //next image: right arrow
            if (key == rightarrow) 
            {
                imgIndex++;
                if (imgIndex > imgArray.length-1) 
                {
                    imgIndex = 0;
                }
                img.src = imgArray[imgIndex];
            }
            //last image: left arrow
            if (key == leftarrow) 
            {
                if (imgIndex == 0) 
                {
                    imgIndex = imgArray.length;
                }
                img.src = imgArray[--imgIndex];
            }
            //random: r
            if (key == random) 
            {
                imgIndex = Math.floor((Math.random()*(imgArray.length-1))+1);
                img.src = imgArray[imgIndex];
            }   
        }
        $.post('./templates/viewcomic.php', {variable: imgIndex});
    });
});

</script>
<?php
function  getImages($catParam, $siteParam) {
include './scripts/dbconnect.php';

if ($siteParam == 'artwork') { 
    $table = "artwork"; 
}       
else { 
    $table = "comics"; 
}   

if ($catParam != null) {
    $catResult = $mysqli->query("SELECT id, title, path, thumb, catidFK FROM $table WHERE catidFK = $catParam");
}
else {
    $catResult = $mysqli->query("SELECT id, title, path, thumb, catidFK FROM $table");
}

$img = array();
while($row = $catResult->fetch_assoc()) 
{
    $img[] = "'" . $row['path'] . "'";
}
return $img;
}
?>

PHP bit in viewcomic.php:

include './scripts/keyinput.php'; 

$JSIndex = $_POST['variable'];
echo "Index = " . $JSIndex;
//$JSIndex should be equal to the javascript variable imgIndex... but it outputs nothing

Any thoughts would be extremely helpful! I'm trying to get my comics website to go live.

Thanks!

Answer 1

Your logic is wrong: at the moment you define your key variable, e is undefined. Then you attach your event handler inside an if statement that will always evaluate to false so that will never work.

The assignment to key should be inside your event handler and the conditional needs to go, you already have that inside your event handler.

Edit: you should also only do your ajax call if one of your action keys is pressed (put it inside the event handler) and do something with the result.

Edit 2: Checkout the manual on $.post, you should add a callback function to process the return value of your php script.

For example:

$.post(
       './templates/viewcomic.php',
       { variable: imgIndex },
       function(data) {    /* data contains what you have echoed out in your php script */
           alert(data);
       }
      );