How to update the SESSION value on same page after AJAX call on post JSON value without refreshing page.
I’m stuck here. Any help solving the problem is highly appreciated. I what to run particular class in PHP based on the action button clicked. I.e When the user clicks the add button it initiates the AJAX call and sends the ‘ADD’ ID else if he/she clicks the update button it sends the ‘UPDATE ID. I want to perform this without updating the page.
I have achieved getting the data, but the only issue is it updates only when I refresh the page
How do I update the SESSION in PHP once the AJAX sends the data. I’m a newbie, please take easy on me 🙂 Thanks u
Index.php
<?php session_start(); echo "SESSION: ".$_SESSION['pageType']; ?> <!DOCTYPE> <html lang="en-OM"> <div >AJAX: </div><div id="msg" style="display:inline"></div></div> <a id="btnAdd" value="add" class="btnType" href="#" role="button">ADD</a><br> <a id="btnUpdate" value="update" class="btnType" href="#" role="button">UPDATE</a><br> <a id="btnDelete" value="delete" class="btnType" href="#" role="button">DELETE</a> </html>
Jquery
<script>
$(document).ready(function () {
$('.btnType').click(function (ev) {
ev.preventDefault();
ev.stopImmediatePropagation();
let pageID;
pageID = $(this).attr('value');
$.ajax({
type: 'POST',
url: 'postData.php',
dataType: 'json',
data: {
pageType: pageID
},
beforeSend: function (data) {
},
success: function (data) {
$('#msg').text(data);
console.log(data);
return data;
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('<p>status code: ' + jqXHR.status +
'</p><p>errorThrown: ' + errorThrown +
'</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText +
'</div>');
console.log('jqXHR:');
console.log(jqXHR);
console.log('textStatus:');
console.log(textStatus);
console.log('errorThrown:');
console.log(errorThrown);
}
});
});
});
</script>
postData.php
session_start();
if (!empty($_POST['pageType'])) {
echo json_encode($_POST['pageType']);
$_SESSION['pageType']=$_POST['pageType'];
exit;
}
Advertisement
Answer
This should work better:
Index.php
<?php session_start(); ?> <!DOCTYPE> <html lang="en-OM"> <div >SESSION: </div><div id="msg" style="display:inline"><?php echo $_SESSION['pageType']; ?></div></div> <a id="btnAdd" value="add" class="btnType" href="#" role="button">ADD</a><br> <a id="btnUpdate" value="update" class="btnType" href="#" role="button">UPDATE</a><br> <a id="btnDelete" value="delete" class="btnType" href="#" role="button">DELETE</a> </html>
jQuery
$(document).ready(function () {
$('.btnType').click(function (ev) {
ev.preventDefault();
ev.stopImmediatePropagation();
let pageID;
pageID = $(this).attr('value');
$.ajax({
type: 'POST',
url: 'postData.php',
data: {
pageType: pageID
},
success: function (data) {
$('#msg').text(data);
console.log(data);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('<p>status code: ' + jqXHR.status +
'</p><p>errorThrown: ' + errorThrown +
'</p><p>jqXHR.responseText:</p><div>' + jqXHR.responseText +
'</div>');
console.log('jqXHR:');
console.log(jqXHR);
console.log('textStatus:');
console.log(textStatus);
console.log('errorThrown:');
console.log(errorThrown);
}
});
});
});
postData.php
session_start();
if (!empty($_POST['pageType'])) {
echo $_POST['pageType'];
$_SESSION['pageType']=$_POST['pageType'];
}
else
{
echo "error - no pagetype specified";
}
exit;
What I did:
1) move the initial echo of the Session value inside the “msg” div, so it can be overwritten by the result of the AJAX call
2) remove all references to JSON from the AJAX options and from the PHP. You aren’t using (and don’t need to use) JSON here to send a single piece of text.
3) added some basic fault tolerance to postData.php to ensure there is always some kind of output.