AJAX: showing updated variable after button click

Question

I just started to use AJAX, so I apologize if the question is very basic.

I use a simple AJAX script to update a session variable depending on which button you click, but I cant get it to update the heading with the new value when clicking the button. At the moment I got a button to reload the page, but I want to remove that and make the header update on each buttonclick.

index.php

<?php session_start(); ?>
<html>
<head>
<script type='text/javascript'>
function setSession( value) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "setSession.php?variable=rider&value=" + value, true);
    xmlhttp.send();
}
</script>
</head>
<body>
<?php

echo "<h1>You selected: " . $_SESSION['rider'] . "</h1>";
echo "<button type='button' onclick='javascript:setSession(this.value)'     value='Kristoff'>Kristoff</button> ";
echo "<button type='button' onclick='javascript:setSession(this.value)' value='Edvald Boasson Hagen'>Edvald Boasson Hagen</button> ";
echo "<a href=\"index.php\"><input type='submit' value='Re-Load Page'></a>";
?>
</body>
</html>

setSession.php

<?php
session_start();
if(isset($_REQUEST['variable']) && isset($_REQUEST['value']))
{
 $variable = $_REQUEST['variable'];
 $value = $_REQUEST['value'];
 $_SESSION[$variable] = $value;
}
?>

mallik1055 · Accepted Answer · 2015-10-11 22:33:41Z

1

@Chris and @tej explains the procedure.This is how you do it.

setSession.php

<?php
session_start();
if(isset($_REQUEST['variable']) && isset($_REQUEST['value'])){
     $variable = $_REQUEST['variable'];
     $value = $_REQUEST['value'];
     $_SESSION[$variable] = $value;
     echo $_SESSION[$variable];
}
?>

index.php

echo "<h1 id='selection'>You selected: " . $_SESSION['rider'] . "</h1>";    
function setSession( value) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "setSession.php?variable=rider&value=" + value,     true);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             document.getElementById("selection").innerHTML = "You selected ".xmlhttp.responseText;
        }
    }
    xmlhttp.send();
}

answered Oct 11, 2015 at 22:33

mallik1055

991 silver badge11 bronze badges

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

Comments

Chris · Accepted Answer · 2015-10-11 22:20:11Z

0

At the moment index.php is only loaded once. Therefore $_SESSION['rider'] has been output once and only once so it won't change. You need to use javascript to read the response from the xhr you're doing (and at the same time output $_SESSION['rider'] in the setSession.php file.

I'm not sure of what your application is trying to do but this can be achieved without any php at all.

edited Oct 11, 2015 at 22:20

answered Oct 11, 2015 at 22:15

Chris

1656 bronze badges

2 Comments

FingeNB Over a year ago

I made the script as simple as I could in order to make it to work first. Then it will be part of an php-site where the button values will come from php-variables. But first I need it to work in this simple form.

Chris Over a year ago

I'm all for keeping things simple to start with. I'd actually use jquerys .ajax method as its cleaner than using XMLHttpRequest but at the moment you havent got enough functionality for it to work. This should be of help to get your response data. w3schools.com/ajax/ajax_xmlhttprequest_response.asp

marc_s · Accepted Answer · 2016-02-06 16:38:18Z

0

After triggering ajax call you have to modify the h1 already displayed.

Add a class to h1 and use jQuery or JavaScript to modify the value once ajax is complete.

if(xhr.status===200){
     $('.header').text(//rider text);
}

This will set the value after ajax and if user refreshes page it will automatically load from session.

But as other answer suggests this can easily be attained without php itself but I will leave application technology decision to you.

edited Feb 6, 2016 at 16:38

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Oct 11, 2015 at 22:24

Tej

4142 silver badges7 bronze badges

Collectives™ on Stack Overflow

AJAX: showing updated variable after button click

index.php

setSession.php

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.php

setSession.php

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related