Session Flag doesn't work in Javascript

Question

I use session flag in javascript for IF function. If session flag is 1, the javascript will show a specifict div on click. I have tried it manually, but the code doesn't seem to work.

This is my JS code:

$(document).ready(function(){
check = <?= $_SESSION['flag'] ?>;
$("#bag").click(function(){
    if(check==0){
        $("#login").show();
        $("#notlogin").hide();
    } else {
        $("#login").hide();
        $("#notlogin").show();
    }
});
});

And this is the session in the head of html file:

<?php @session_start();
$_SESSION['flag']=0;
?>

Please check it in the fiddle: http://jsfiddle.net/9mm5ougu/

config-haslogin.php

<?php
error_reporting(E_ALL ^ E_NOTICE); 
ini_set("display_errors", 1);
mysql_connect("mysql.com","name","password") or die("cannot connect");
mysql_select_db("databasename") or die("Fail here");
$myemail= $_POST['myemail'];
$mypassword= $_POST['mypassword'];
$sql= "SELECT * FROM user WHERE myemail='".$myemail."' and mypassword='".$mypassword."'";
$result=mysql_query($sql);
$count=mysql_num_rows($result);
if($count==1)
{
echo "Login successful";
$_SESSION['flag']=0;
header("Location:index.php");
}
?>

it's a normal behavior, you can't do that, <?= $_SESSION['flag'] ?> is PHP code, not JavaScript. PHP is executed on the server side, JavaScript is executed on the client side (at least in your example). — pomeh
– pomeh, Commented Sep 1, 2014 at 9:22
Do you know about Client Side and Server Side Scripting? How can you define server side code in jsfiddler? — Amit Soni
– Amit Soni, Commented Sep 1, 2014 at 9:25
With Javascipt I always find it useful to look at the error message in the browser's console window. It would have probably given you a hint at to what was wrong. (ie. not quoted, or not interpreted) — KIKO Software
– KIKO Software, Commented Sep 1, 2014 at 9:38

pomeh · Accepted Answer · 2014-09-01 12:58:51Z

3

You can't put PHP code into a JavaScript file, because PHP is interpreted on the server side, while JavaScript is interpreted on the client side (at least here in your use case).

If you really have to do conditional treatment based on the PHP $_SESSION value, you have multiple choices (listed from the worst to the best one IMHO):

Solution 1: use a dynamic JavaScript file (the worst)

Put PHP code in your JavaScript file, but use the .php extension instead of .js. Your JavaScript code would look like something like this:

file.js.php

$("#bag").click(function(){
    <?php if ($_SESSION['flag'] === 0): ?>
        $("#login").show();
        $("#notlogin").hide();
    <?php else: ?>
        $("#login").hide();
        $("#notlogin").show();
    <?php endif; ?>
});

And you can include this PHP file as a JavaScript file:

index.php

<script src="file.js.php"></script>

This is the worst solution: - as you're mixing both languages, your file will soon become unreadable - because the file is now dynamic, the user's browser can't put it on the client-side cache - you're using PHP server's resources where it's not really necessary - you can't deploy your file on a CDN, or on a simple server dedicated to serve static file - you can't minify your JavaScript file

Solution 2: use two different JavaScript files

Create two different JavaScript file, one for logged in user and one for logged out. Load the correct file using the $_SESSION value.

loggedOut.js

$("#bag").click(function(){
    $("#login").hide();
    $("#notlogin").show();
});

loggedIn.js

$("#bag").click(function(){
    $("#login").show();
    $("#notlogin").hide();
});

index.php

<body>
    <!-- page content here -->


    <?php if ($_SESSION['flag'] === 0): ?>
        <script src="loggedIn.js"></script>
    <?php else: ?>
        <script src="loggedOut.js"></script>
    <?php endif; ?>

</body>

This solution is better than the first one because it resolves almost all points: the file is cached on the client and you don't mix PHP and JavaScript code. But this is not the best solution you can have, because it brings a lot of code duplication and it would be harder to maintain the code base.

Solution 3: bring the model client side (or sort of)

You can pass your data model to the JavaScript file, and use it directly from there. As an example, you can have a class name on the <body> tag that depends on the $_SESSION['flag'] value, and your JavaScript file will behave differently based on this value. Here is an example:

index.php

<?php
$className = $_SESSION['flag'] ? 'logged-in' : 'logged-out';
?>

<body class="<?php echo $className; ?>">
    <!-- page content here -->

    <script src="yourFile.js"></script>
</body>

yourFile.js

$(document).ready(function(){

    var isLoggedIn = $('body').hasClass('logged-in');

    $("#bag").click(function() {
        if (isLoggedIn)
        {
            $("#login").show();
            $("#notlogin").hide();
        }
        else
        {
            $("#login").hide();
            $("#notlogin").show();
        }
    });

});

If this class is only used by the JavaScript code (it means this class will no be used in the CSS code), you should prefix it with this js- to differentiate it from real CSS class names.

edited Sep 1, 2014 at 12:58

answered Sep 1, 2014 at 9:53

pomeh

4,9424 gold badges26 silver badges44 bronze badges

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

6 Comments

Al Kush Over a year ago

Wow, the explanations are so complete. I have to accept this as the best answer. I will give it a try and be back soon to ask a question again if I found a problem. Thank you for your spare time. Cheers!

pomeh Over a year ago

@AlKush you're welcome. Let me know if you have questions :) To me, it's important you understand what was the problem IMHO in your initial approach, not just to have a "copy/paste" answer

Al Kush Over a year ago

How can the file of index.php (in the solution 2) know if the session flag is 0 or not? Because it always result the same event eventhough the user has login succesfully.

pomeh Over a year ago

you have to start the session with the session_start function

Al Kush Over a year ago

I have started it with session_start but the result is still the same.

|

Jenz · Accepted Answer · 2014-09-01 09:24:17Z

1

While you are accessing PHP variables inside Javascript, enclose that within quotes like

check = "<?= $_SESSION['flag'] ?>";

Check this fiddle.

answered Sep 1, 2014 at 9:24

Jenz

8,3718 gold badges50 silver badges83 bronze badges

10 Comments

user1233508 Over a year ago

check = <?php echo json_encode($_SESSION['flag']); ?>; (note, no quotes in the javascript side) is better, because it properly encodes the content of the variable without forcing it into a string (or tripping over stray quotes in the value).

pomeh Over a year ago

in any case, you can't put PHP code into a JavaScript file. And IMHO it would be better to user json_encode($_SESSION['flag']) directly, it avoid simple/double escape hell and a lot of other tricky stuff

Jenz Over a year ago

@pomeh..Anyway it is possible to do like that. I just helped the user to meet his requirement in the way he needs.

pomeh Over a year ago

Jenz while your remark is good, IMHO it might no be the right answer. PHP in JavaScript file can't work, as PHP in a JSFiddle can't either, it's not interpreted. Did you at least test your own code ? Try this console.log(check) or echo 'hello from PHP'; in JSFiddle, you'll be surprised. You can't say 'it works, check this fiddle' and have PHP code in that fiddle, I don't have to test it to know it's not working ! So in that way, your answer is not valid IMHO: the tip is good (using quotes), but the demo doesn't work, and it doesn't resolve the initial problem (mixing PHP with JS).

pomeh Over a year ago

@KIKOSoftware I think it's our doing to explain what is wrong in OP approach, not only to solve is problem in a "one-shot" way. If we don't explain it, OP will ask again and again the same sort of questions because it doesn't understand where is the problem at first (mixing server side and client side code in this case). The strength of StackOverflow is its community and its users, and sometimes answers are just more than answers, they are way more than that, have a look at the accepted answer for this question: stackoverflow.com/q/23569441/827168.

|

Trone · Accepted Answer · 2014-09-01 09:50:37Z

1

Use AJAX to get the data you need from the server.

For example create get-data.php:

<?php @session_start();
_SESSION['flag'] = 0;
json_encode(_SESSION['flag']);
?>

Call it from ajax:

$(document).ready(function(){ // your DOM loaded
    $.ajax({
        url: '/get-data.php',
        success: function(response){
            $("#bag").click(function(){
                if(JSON.parse(response) == 0){
                    $("#login").show();
                    $("#notlogin").hide();
                } else {
                    $("#login").hide();
                    $("#notlogin").show();
                }
                });

        },
        error: function(){
            alert('data not loaded');
        },
         complete: function(){

       }
    })

})

answered Sep 1, 2014 at 9:50

Trone

1347 bronze badges

3 Comments

Al Kush Over a year ago

It is interesting, I have voted it up. My question is: what is it in the get-data.php? Is it the user information such as the username and the password? Thanks.

Trone Over a year ago

the file contains a simple code that returns the user to the necessary data, it can be used to obtain the required parameters and for storing data, for example, you can create a template and use it for the return parameters, such as <?php echo json_encode( array( 'success' => isset($success) ? ( $success ? true : false) : true, 'data' => $data, 'message' => empty($message) ? '' : $message) ) ?> Where success - it was successful your query or not , message - a message in case of an error, the date - it's your data

Al Kush Over a year ago

I think your code will work if I know how to do that. But the problem is I am still confused between the get-data.php (which you suggest) and the config-haslogin.php (the config php file that get the user information) In the config-haslogin.php I alwo write a session flag (echo "Login successful"; $_SESSION['flag']=0; exit(header("Location:index.html"));)

Collectives™ on Stack Overflow

Session Flag doesn't work in Javascript

3 Answers 3

Solution 1: use a dynamic JavaScript file (the worst)

Solution 2: use two different JavaScript files

Solution 3: bring the model client side (or sort of)

6 Comments

10 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Solution 1: use a dynamic JavaScript file (the worst)

Solution 2: use two different JavaScript files

Solution 3: bring the model client side (or sort of)

6 Comments

10 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related