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

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';
}