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.
