Search code examples
javascriptmojolicious

Mojolicious External References Not working on only one page

Please let me know if there are more code or errors that would be helpful.

My issue is that I have external JS files and all of my pages can find them accept for one. When I go to my "User" section I get a 404 for each external file. Also it looks like it requests each one twice?

I have my external JS in the public folder. I also have my references in the main layout that each page shares.

I'm at a complete loss as to what this could be...

My default layout contains.

<head>
  <script type="text/javascript" src="./search.js"></script>
  <script type="text/javascript" src="./employee_information.js"></script>
  <script type="text/javascript" src="./requests.js"></script>
</head>

In my public folder I have (employee_information.js, requests.js, and search.js)

Each of my navbar links are asa follows

   %= link_to 'Home' => 'phone_book_form'
   %= link_to 'Users' => 'user_index'
   %= link_to 'Account' => 'account_details'

My paths are as follows

$r->get('/')->name('phone_book_form')->to('PhoneBook#form');
  $admin_authorized->get('/user_list')->name('user_index')->to('User#index');
  $authorized->get('/account_details')->name('account_details')->to('Account#details');

Only my User Index page can't find the external js.

In Firefox Developer tools

I get a 200 initially, then on the next i get a 304 , then On my User Index page I get 6 404s.

I think I found the issue... enter image description here

Any direction is much appreciated.

Solution

  • Your javascript files are referenced in a relative way, because you start the paths with ./.

    When you are on the route / (i.e. http://localhost:3000/), that works fine, because ./search.js starting at / is http://localhost:3000/search.js. But when you are on the /user_list route (i.e. http://localhost:3000/user_list), your ./ is now in /user_list, so it's looking for a file http://localhost:3000/user_list/search.js. The webserver now looks for the file user_list/search.js in the public folder, but that doesn't exist, so it renders a 404 error.

                                          | here 
<head>                                V
  <script type="text/javascript" src="./search.js"></script>
  <script type="text/javascript" src="./user_information.js"></script>
  <script type="text/javascript" src="./requests.js"></script>
</head>

    Instead, use absolute paths starting at the root directory /. So the URIs should be:

    /search.js
/user_information.js
/request.js