Make div text change on click based on PHP data using Ajax

Question

Let's say I have in a PHP file a div called myDiv, an image called myImg, and a PHP variable called $x. When someone clicks on myImg, I need myDiv's text to change based on the value of $x.

For example, let's say I want myDiv's text to change to "Hello" if $x==1, and to "Bye" if $x==2.

Everytime the text changes, the value of $x will change too, in this case, let's say if $x==1 when myImg is clicked, then $x's value will become 2($x=2), and viceversa.

I'm using jQuery, but I read that I need to use Ajax too for this (To check on the server the value of $x), but I can't figure out how to do it. I read about Ajax, but none of the examples explains something like this.

Answer 1

I'll add the revised solution in a new answer so you can still see the earlier examples as the code may provide useful examples.

In this example, we use a session variable to store the value between ajax calls.

FILE1.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#myImg').click(function() {
            $.ajax({
                type: "POST",
                url: "FILE2.php",
                data: '',
                success:function(data){
                    alert(data);
                }
            });
        });
    });
</script>

<div id="myDiv">
    Click picture below to GO:<br />
    <img id="myImg" src="http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG">
</div>

---

FILE2.php

<?php
session_start();

if (isset($_SESSION['myNum'])) {
    $x = $_SESSION['myNum'];
}else{
    //No session set yet, so initialize with x = 1
    $x = 1;
}

if ($x == 1) {
    $_SESSION['myNum'] = 2;
    echo 'Hello its a one';
}else{
    $_SESSION['myNum'] = 1;
    echo 'Goodbye TWO';
}
?>

Answer 2

You don't need ajax, but you could use it. If you use AJAX, then you'll need a second php file that simply echoes back the Hello or Bye.

This first example gives the result you want without ajax. Just save this into a PHP file and browse to that page:

<?php
    $x = 2;
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#myImg').click(function() {
            if (<?php echo $x;?> == 1) {
                alert ('Hello, its a one');
            }else{
                alert('Goodbye TWO');
            }
        });
    });
</script>

<div id="myDiv">
    Click on the image below:<br />
    <img id="myImg" src="http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG">
</div>

---

To do the same thing using AJAX, change it to be like this:

First file: FILE1.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#myImg').click(function() {
            var theNumber = $('#myInput').val();
            $.ajax({
                type: "POST",
                url: "FILE2.php",
                data: 'myNumber=' + theNumber,
                success:function(data){
                    alert(data);
                }
            });
        });
    });
</script>

<div id="myDiv">
    Enter number to send to FILE2:
    <input type="text" id="myInput"><br />
    <br />
    Click picture below to GO:<br />
    <img id="myImg" src="http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG">
</div>

---

and FILE2.php

$x = $_POST['myNumber'];

if ($x == 1) {
    echo 'Hello its a one';
}else{
    echo 'Goodbye TWO';
}