Set a specific stylesheet based on session variable in javascript

Question

I have an option for a user to select his/her own theme while logged into the system and this theme is set in a MYSQL Database and called each time the user logs in, this is called by:

<?php $_SESSION['SESS_THEME_NAME']; ?>

Now, I had this working in a PHP file but I need it to work in Javascript instead unfortunately. And I need some help. I looked at the code using the developers tools on Google Chrome and looks like the above code is not resolving within the javascript file. Which makes sense because you can't access session variables within a javascript file (as I found by searching Google.)

The code is basically supposed to set the specific stylesheet based on the value extracted from the MYSQL database. So if the database says Default the script needs to tell the webpage to use the default.css file. And so on and so forth.

My attempt at writing this is as follows:

var themName="<?php $_SESSION['SESS_THEME_NAME']; ?>";

if (themeName == "Default") 
{
    document.write("<link re='stylesheet' type='text/css' href='css/mws-theme.css'>");
};
if (themeName == "Army")
{
    document.write("<link rel='stylesheet' type='text/css' href='css/mws-theme-army.css'>");
};
if (themeName == "Rocky Mountains")
{
    document.write("<link rel='stylesheet' type='text/css' href='css/mws-theme-rocky.css'>");
};
if (themeName == "Chinese Temple")
{
    document.write("<link rel='stylesheet' type='text/css' href='css/mws-theme-chinese.css'>");
};
if (themeName == "Boutique")
{
    document.write("<link rel='stylesheet' type='text/css' href='css/mws-theme-boutique.css'>");
};
if (themeName == "Toxic")
{
    document.write("<link rel='stylesheet' type='text/css' href='css/mws-theme-toxic.css'>");
};
if (themeName == "Aquamarine")
{
    document.write("<link rel='stylesheet' type='text/css' href='css/mws-theme-aquamarine.css'>");
};

Any help once so ever would be awesome and much much appreciated! I am reaching a deadline :/

Also, you'll likely want to `json_encode` that since you're using it in JS code: `` — Richard JP Le Guen, Jun 26 '13 at 04:19
... and one of your `` elements has a typo in the `@rel` attribute name. — Richard JP Le Guen, Jun 26 '13 at 04:19
Also, some PHP installations support the shorthand `= $x; ?>` instead of `` — DaoWen, Jun 26 '13 at 04:29

DaoWen · Answer 1 · 2013-06-26T04:22:15.030

3

I think you're making this way too complicated. Why not just write out the <link> tag directly using PHP?

$themes = array(
  'Default' => '',
  'Army' => '-army',
  'Rocky Mountains' => '-rocky'
  // etc...
);

echo "<link rel='stylesheet' type='text/css' href='css/mws-theme-{$themes[$_SESSION['SESS_THEME_NAME']]}.css'>";

edited Jun 26 '13 at 04:22

answered Jun 26 '13 at 04:16

DaoWen

32,589
6
74
101

Because this is stored in an external file in the base of the program. And pages multiple folders must access it to get the stylesheet. I have even tried using a `` url and it still wouldn't reach it unless it was on the same base folder of the program. Basically I have multiple pages that all link to a `head.php` folder that includes all the stylesheet and javascript. – user2371301 Jun 26 '13 at 04:21
@user2371301 - Your should be able to use [root-relative URLs](http://stackoverflow.com/questions/5559578/having-links-relative-to-root) for that. – DaoWen Jun 26 '13 at 04:24
While your answer is logical and that is a more logical approach to this issue, I have already written out the code above and taken the time to make it. Since I already had it, I would rather make it work than make something else. I will keep your code in mind and use it in a future project that I'm sure I'll have. Thanks for your input :) – user2371301 Jun 26 '13 at 04:31
@user2371301 - I'm glad you got it working! If you do apply this strategy in the future, I'd also recommend adding a column in your database with the stylesheet name. That way each time you add a theme you'll be forced to add the path to the stylesheet as well. Keeping all the updates in one place really helps for maintainability! – DaoWen Jun 26 '13 at 04:43

dtbarne · Accepted Answer · 2013-06-26T04:33:01.357

1

"Now, I had this working in a PHP file but I need it to work in Javascript instead unfortunately. And I need some help. I looked at the code using the developers tools on Google Chrome and looks like the above code is not resolving within the javascript file. Which makes sense because you can't access session variables within a javascript file (as I found by searching Google.)"

Sure you can. Name your javascript file foo.php.

Inside, you can use PHP:

<?php
header('Content-type: application/x-javascript');
session_start();
?>
var theme_name = "<?php echo $_SESSION['SESS_THEME_NAME']; ?>";
...

edited Jun 26 '13 at 04:33

answered Jun 26 '13 at 04:22

dtbarne

8,110
5
43
49

Thank you! This made everything just work wonderful. Thank you Thank you Thank you! – user2371301 Jun 26 '13 at 04:31

Set a specific stylesheet based on session variable in javascript

2 Answers2