CODEWITHSUNDEEP
javascriptphpajax
Thobias Nordgaard
Thobias Nordgaard

Reputation: 295

Trying out Ajax

So Im trying to get a hold of ajax and I made a simple script that when a user presses an image ajax opens php page that sets a cookie and the image on the index page updates. But somehow it isn't working.

Index.php:

<html>
    <head>
            <title>AJAX request</title>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    </head>
    <body>
        <script>
            function upvote()
            {
                xmlhttp.open("GET","scripts/upvote.php",true);
                xmlhttp.send();
            }
        </script>

            <?php
                if($_COOKIE['xmltest'] == 1)
                {
                    echo "<img src='up.png' width='50px'>";
                }else{
                    echo "<img src='neutral_up.png' width='50px' onclick='upvote();'>";
                }
            ?>

    </body>
</html>

upvote.php

<?php
    $expire=time()+60*60*24*365*10;
    setcookie('xmltest', "1", $expire, '/');
?>

Upvotes: -1

Views: 59

Answers (3)

KarlPurk
KarlPurk

Reputation: 275

As has already been identified, your code does not work because nothing is updating the DOM - you must update the DOM manually (e.g. using jQuery) or by re-rendering a template. You're not using templates here so as others have suggested you will need to update the DOM manually with jQuery.

If jQuery is already available then you do not need to use the low level XMLHttpRequest object, instead you can use jQuery's ajax capabilities which provides a much cleaner solution:

$('img').on('click', function() {
    var img = $(this);
    $.get('scripts/upvote.php')
    .done(function() {      
        img.attr('src', 'up.png');
        img.unbind('click');
    })
    .error(function() {
        console.log('An error occurred');    
    })
});

With this solution, we also do not need to use inline JavaScript so we have successfully separated JavaScript from the HTML - this is a good thing to aim for.

http://jsfiddle.net/sW455/2/

The code from the above jsfiddle will work locally, but does not work in the fiddle because the XML request will fail due the the requested resource not being available. The following jsfiddle does however work because I've responded to the error() callback, rather than the done() callback.

http://jsfiddle.net/nq57m/2/

In the above fiddle, if you inspect the src of the image using dev tools you will see that upon clicking the image the src attribute changes.

With this update, your code would look like this:

<html>
    <head>
            <title>AJAX request</title>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $('img').on('click', function() {
            var img = $(this);
            $.get('scripts/upvote.php')
            .done(function() {      
                img.attr('src', 'up.png');
                img.unbind('click');
            })
            .error(function() {
                console.log('An error occurred');    
            });
        });
    </script>
    </head>
    <body>
            <?php
                if(isset($_COOKIE['xmltest']) && ($_COOKIE['xmltest'] == 1))
                {
                    echo "<img src='up.png' width='50px'>";
                }else {
                    echo "<img src='neutral_up.png' width='50px'>";
                }
            ?>

    </body>
</html>

Here's a breakdown of the process:

  1. User visits this page
  2. Server side code (PHP) renders the initial HTML based on user's cookie
  3. User interacts with the page by clicking on an image
  4. Upon clicking an image we send an XHR request to /scripts/upvote.php
  5. upvote.php modifies the user's cookie. If the user manually refreshes their page at this point they would see the correct img, up.png. However, if they don't refresh then the DOM will need to be manually updated to reflect the changes.
  6. If the XHR request was successful we change the src attribute of the img and set it to 'up.png'. We also stop observing the click action of the img because we no longer need it.
  7. If the XHR request fails we output a message to the console.

Upvotes: 0

Parziphal
Parziphal

Reputation: 6902

This worked for me (edited):

I'm adding a class to the image to manipulate it easier with jQuery:

        <?php
            // Using empty() to check for the cookie
            if (!empty($_COOKIE['xmltest']))
            {
                echo "<img src='up.png' width='50px'>";
            }else{
                // Adding a class "change-me" to the image
                echo "<img class='change-me' src='neutral_up.png' width='50px' onclick='upvote();'>";
            }
        ?>

Now add a callback function to your Ajax request, that will be called when request is done:

<script>
function upvote()
{
    $.get("scripts/upvote.php", function() {
        // Update image
        $('.change-me').attr('src', 'up.png');
    });
}
</script>

Just an advice, when working with cookies, never read them directly like this:

if ($_COOKIE['xmltest'] == 1) ...

because that will trigger a Undefined index: xmltest in ... notice. Check first if the index exists with isset() or empty():

if (isset($_COOKIE['xmltest']) && $_COOKIE['xmltest'] == 1) ...

or in this case, since the cookie is a boolean, you can do this too:

if (!empty($_COOKIE['xmltest'])) ...

Upvotes: 2

Alexandre Justino
Alexandre Justino

Reputation: 1726

I didn't understand well what you're trying to do, but you need to create a callback function to do something when the ajax request is over, do like this:

xmlhttp.onreadystatechange=function()
{
  //  do something here
}

And inside the function you have to manipulate the img tag to change its content.

Upvotes: 1

Related Questions