PHP Logic not running when called from a Javascript String not working

Question

I am currently trying to encase a navigation bar in a javascript file so I do not need to put the whole code on every page. The navigation bar was working perfectly..... until I inserted some php logic into the string variable... here is what I mean.

    strVar += "             <?php if($_COOKIE['username'] != \"\"){ ?>";
    strVar += "             <div class=\"stack\">";
    strVar += "                 <ul class=\"nav pull-right\">";
    strVar += "                     ";
    strVar += "                         <li>";
    strVar += "                         <p class=\"navbar-text login\">Logged In as: <\/p>";
    strVar += "                         <\/li>";
    strVar += "                         <li>";
    strVar += "                         <p class=\"navbar-text user\">";
    strVar += "                     <?php echo $_COOKIE['username'];?>";
    strVar += "                         <\/p>";
    strVar += "                         <\/li>";
    strVar += "                     ";
    strVar += "                         <p>";
    strVar += "                         <a href=\"..\/php\/logout.php\">";
    strVar += "                         Logout";
    strVar += "                         <\/a>";
    strVar += "                         | ";
    strVar += "                         <a href=\"#\">Control Panel";
    strVar += "                         <\/a>";
    strVar += "                         <\/p>";
    strVar += "";
    strVar += "                 <\/ul>";
    strVar += "             <\/div>";
    strVar += "             <?php } ?>";
document.getElementById("customNav").innerHTML= strVar;

I am calling this script from a .php file:

<! --NavBar-->
        <header class="row">
            <div id="customNav" class="span12">
                <script src="js/topNavBar.js" type="text/javascript">
            </script>
            </div>
        </header>
        <!--NavBar-->

As of right now, If i embed the JS script as normal html/php code, it works completely normal. But, when I do the case above, it completely ignores the php code, but and displays the bar correctly as if the php was never written. Does anyone know why?

Thank you

Answer 1

You are getting it completely wrong. Browser could not see any of your php logic as it is compiled on the server and sent to the browser as plain html(or javascript). Also, you can't write php code in a .js file.

Here is what you can do :

1. Collect the html you are trying to populate into the div(customNav) into a php variable(say $navHtml), keeping the logic also in PHP and then assign it in the js variable like below:

   strVar = "<?php echo $navHTML; ?>";  
   document.getElementById("customNav").innerHTML= strVar;
   

2. Change the extension of your file from js to php.

3. Include it like below within the script tags:

   <?php include_once "topNavBar.php"; ?>