How to read a $_SESSION properly on IE-11?
Question
I'm working on a task trying to submit a form on IE:
1.- When I'm on page1.php and click on "Submit" I get a dialog jQuery UI popup and then I click on "Yes I accept" it takes me to page2.php, and if I click on the "back" button it takes me back to page1.php
2.- I also have a php SESSION called 'inProgress' that gets assign a value of 1 when user goes from page1.php to page2.php. This basically means that as long as the user clicks only once on the "Yes I accept" button, the user shouldn't get the popup to show anymore (even if the user goes back and forth).
Issues:
a) Somehow when user clicks on "Submit" button (on page1.php) the pop up shows and it gets clicked on "Yes I accept" automatically, but then I don't get the pop up again even if I go back which is a Good thing. However I would prefer to click on the "Yes I accept" button myself.
b) The main issue is that I keep getting the pop up to show even if I go back and forth when I'm using IE-11 (I only want the pop up to show only once).
How can I have the pop up to show ONLY ONCE after clicking on "Yes I accept" on IE-11, or in other words how can I make sure the session is being read it on IE-11 correctly? I thought about using cookies with javascript but not sure how to implement that...Someone help me please. Thank you so much in advanced!! Here's my code for page1.php and page2.php
page1.php
<?php
session_start();
if ($_POST) {
$_SESSION['inProgress'] = "1";
header("Location: page2.php");
exit;
}
?>
<html>
<head>
<title>Page1</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<form id="homeForm" name="homeForm" method = "POST">
<input type = "submit" id="btnOpenDialog" name = "submit">
<input type="text" id="inProgress" value="<?php echo $_SESSION['inProgress'] ?>"/>
</form>
<h1>This is Page 1</h1>
<div id="dialog-confirm"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#btnOpenDialog").click(function(){
var inProgress = $('#inProgress').val();
if (inProgress !== "1") {
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Title",
height: 250,
width: 350,
closeOnEscape: false,
buttons: {
"Yes, I accept": function () {
$('#homeForm').submit();
},
"No, thanks": function () {
$(this).dialog('close');
}
}
});
}
});
});
</script>
</body>
</html>
page2.php
<html ng-app="store">
<head>
<title>Page1</title>
</head>
<body>
<h1>This is Page 2</h1>
<div id="dialog-confirm"></div>
<script type="text/javascript">
function myfunction() {
window.location.href="page1.php";
}
</script>
<input type="button" id="btnOpenDialog" onclick = "myfunction()" value="Back" />
</body>
</html>
2 answers
solution1
2 ACCPTED 2016-04-06 07:03:00
Thnink it's not a browser problem (we're talking about sessions, that is read only server side, on the client you just have the token to indentify what is your session).
Guess when you go back the server code is not being executed (the browser has the page cached and will only load assets like images or javascript).
You can improve the behavior doing that kind of checking client-side with localStorage . There're libraries to write to localStorage with fallback to cookies for old browsers (if you need old browser support) like SimpleStorage.js (in github).
It would be something like this using localStorage (i'll use localStorage with no fallback or wrap library), whenever the Yes I accept button gets clicked and you go to page2 store a flag :
$('#btnOpenDialog').on('click', function(){
localStorage.setItem('dialogAccepted', 'true'); //you can string just strings, if you ever need to store comples data use JSON.stringify(variable) so it's parsed to json
})
And then in the page1 , you do the checking you're already doing server side (the session thingy) and you add this client-side :
if(localStorage.getItem('dialogAccepted') === 'true'){
//code to disable the dialog pop up
}
To solve the "automatic" click: It's not an automatic click, it's just that the dialog is not preventing the form submision . You can solve it like this:
$(document).ready(function () {
var preventedDefaultMet = false;
$("#btnOpenDialog").on('click', function (event) {
var inProgress = $('#inProgress').val();
if (inProgress !== "1") {
if (!preventedDefaultMet) {//so when the dialog was accepted we can trigger the click event and do not enter an infinite loop of dialogs
event.preventDefault();//to prevent the browser from making the POST call
}
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Title",
height: 250,
width: 350,
closeOnEscape: false,
buttons: {
"Yes, I accept": function () {
preventedDefaultMet = true; // set flag
$('#homeForm').trigger('submit');//accepted! just trigger the click! yay!
},
"No, thanks": function () {
$(this).dialog('close');//trigger the click
}
}
});
}
});
});
Just mix the two answers I gave you and you should be having the behavior you want. By the way, don't know if you do the $_SESSION['inProgress'] = "1"; for a reason, but you can write some javascript and store that flag in browser memory like this:
<form id="homeForm" name="homeForm" method = "POST">
<input type = "submit" id="btnOpenDialog" name = "submit">
<input type="text" id="inProgress" value="<?php echo $_SESSION['inProgress'] ?>"/>
</form>
<script>
// when the browser reads this it will store the value PHP printed into the javascript variable
var someJavaScriptVar = <? echo $_POST ? true : false ;?>;
</script>
This way you do not have to do that $_SESSION['inProgress'] = "1"; and the input will have the value the user entered. You would have to change the if (inProgress !== "1") { for if (someJavaScriptVar) { . Give it some tries.
solution2
1 2016-04-02 15:02:11
On page 1 your function is running automatically when loaded instead of waiting for the user action. What you can do is to change the <input type = "submit" id="btnOpenDialog" name = "submit"> to a ordinary button which then triggers your function.
It could look like this:
<?php
session_start();
if ($_POST) {
$_SESSION['inProgress'] = "1";
header("Location: page2.php");
exit;
}
?>
<html>
<head>
<title>Page1</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<form id="homeForm" name="homeForm" method = "POST">
<input type = "button" id="btnOpenDialog" name = "submit" onclick="yourfunctionABC()">
<input type="text" id="inProgress" value="<?php echo $_SESSION['inProgress'] ?>"/>
</form>
<h1>This is Page 1</h1>
<div id="dialog-confirm"></div>
<script type="text/javascript">
function yourfunctionABC(){
xxx}
Are you also checking if the session is already set? Could look like:
if(session_id() == '' || !isset($_SESSION)) {
session_set_cookie_params(3600, '/', '.example.com');
// session isn't started
session_start();//create unique session for user
}
Do you actually reset the session variable on the 2nd page? If not the session variable remains set all the time and that's why no other pop-up will be shown.
Hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.