gregnnylf94 gregnnylf94 - 25 days ago 5
Javascript Question

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.

Answer Source

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