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!

I think you mentioned it, but you are aware of the mixing in HTTP Request methods in your example, right?. By that I mean, the JS code is calling a POST with "_postID" and your PHP Example is using $_GET["_getID"]. — Pat Burke
– Pat Burke, Commented Feb 18, 2013 at 18:41
Shouldn't you be using $_post['_postID'] since your javascript uses post? — Yoav Kadosh
– Yoav Kadosh, Commented Feb 18, 2013 at 18:41
I can see that you fixed it, but why are you using $_POST['_getID'] instead of $_post['_postID'] when your javascript query uses _postID? — Yoav Kadosh
– Yoav Kadosh, Commented Feb 18, 2013 at 18:50
@WebDeskIL damnit, another typo! As I said, I was going back and forth between the $.get and $.post, so I kept changing variables around. My bad — user3871
– user3871, Commented Feb 18, 2013 at 18:51

Community · Accepted Answer · 2017-05-23 11:49:17Z

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/

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Feb 18, 2013 at 19:19

Yoav Kadosh

5,2154 gold badges44 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user3871 Over a year ago

I thought the whole point of AJAX was to send a request to the server to update a certain portion of a loaded page- in this case that certain portion would be the server-side $imgid value.

user3871 Over a year ago

So you're saying the only way to refresh the server-side $imgid is to refresh the page? And this is the only way that things like Facebook comments/likes will be updated with their associated ID?

Yoav Kadosh Over a year ago

@Growler You could also use an Iframe, having the "Like" button within it thus avoiding refreshing the entire page. See my update

user3871 Over a year ago

According to JQuery4u.com, "A GET request is used to get data from the server. A POST request is used for modifying data on the server." So, if I change the request to $.post(), shouldn't I just be able to modify the data on the server (data being $imgid) without refreshing the page or using an iframe? (source: jquery4u.com/ajax/key-differences-post)

Yoav Kadosh Over a year ago

@Growler Not really, but you can use ajax to change the Like button's url in the client side without refreshing the page or using an Iframe. see this answer: stackoverflow.com/questions/2764129/…

|

Collectives™ on Stack Overflow

jquery AJAX requests not updating php variable

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related