nested page cannot find parent .js file

Question

I have nested .php pages -- for example, 'oneNestedPhpWebPage.php' -- in a subfolder "mysite/theSubfolder".

These pages in the subfolder includes a nav bar .php file which is located in the parent folder:

 // this is code inside my nested .php page "oneNestedPhpWebPage.php"
 <?php
   require_once('../TopNav.php');
 ?>

This TopNav.php is also being used by webpages in the site's root folder and I have to leave TopNav.php in the root folder.

When I visit the page "oneNestedPhpWebPage.php" all is well initially -- I can see the page. And I can see the TopNav.php nav bar too.

But the TopNav.php page has the following line of code:

          <script src="nb.js"></script>

And, like TopNav.php itself, the javascript file "nb.js" is in the site's root folder.

If the TopNav.php is being used by one of my nested .php pages, such as oneNestedPhpWebPage.php -- this nb.js file's javascript functions are not being found when called from the included TopNav.php.

The javascript file nb.js is in the site's root folder, which is one folder above the nested web pages like my "oneNestedPhpWebPage.php"

Now, I'm also using TopNav.php -- my navbar code -- in a bunch of .php web pages in the parent folder of the site -- for example, in my index.php web page in the site's root folder, I have the following -- note the difference here from the similar line of code above:

  // this is code inside my index.php page located in the site's root folder
 <?php
   require_once('TopNav.php');
 ?>

Here, because my nb.js file is located in the parent folder with index.php, the TopNav.php's calls to javascript functions in nb.js work fine.

So to try to get around this problem, I added 2 lines of code:

• this line of code at the bottom of my nested file "oneNestedPhpWebPage.php" :

  <input type="hidden" id="nestedBnbPage" value="1" />
  

• And then I tried something I've not tried before, I put this inside TopNav.php:

     <script src="nb.js">if(document.getElementById('nestedBnbPage'))this.src="../nb.js";
  

This did not solve the problem.

I have 53 .php web page files that are located in the nested "mysite/theSubfolder" subfolder. I have more than that in the root folder of the site.

And I need to use the Navbar code in both sets of root-folder pages and nested-folder pages.

And I cannot put the nb.js javascript code inside of TopNav.php.

How can I configure TopNav.php so that, when it's in use by one of the nested web pages, TopNav.php will be able to "find" its nb.js javascript file in the site's root folder?

Answer 1

The best—and only—real way to solve an issue like this is to set absolute paths and base URLs for all of your requires/includes. I recommend the best way to do this is to set a $BASE_PATH variable in your app like so.

$BASE_PATH='/var/www/path/to/my/website/';

And the require all files like this:

require($BASE_PATH . 'TopNav.php');

That way no matter where the files are called from, the require will use an absolute path to the file. And since $BASE_PATH is a one-time variable you set you can just set it in your main config file—or any common file that TopNav.php or other element pages load—and not worry about it. To make the code portable, just change $BASE_PATH based on system setups.

I’d also recommend setting a base URL variable for browser side things such as Javascript.

$BASE_URL='http://my.website/';

And then make sure your PHP file properly set the $BASE_URL when the script URL is rendered:

<script src="<?php echo $BASE_URL; ?>nb.js"></script>