How to load javascript file from another directory

Question

My idea is to create a sidebar menu through a javascript file instead of manually, which I already completed. Previously I loaded this JS file from the same directory so obviously the sidebar menu loaded just fine but now, I want to load it from a different directory and it's not just loading even if I have the source just right.

This is more or less the structure of the directories:

js - public_html - leftNav.js

Ofertas - public_html - many html files (leftNav.js previously was here aswell but I moved it)

teste - public_html - many html files (leftNav.js previously was here aswell but I moved it)

HTML file -> offers.html located in Ofertas folder

<ul class="sidebar-menu">
 <li class="header">MAIN NAVIGATION</li>
 <li class="treeview active">
  <a href="#">
   <i class="fa fa-edit"></i> <span>Projects</span>
   <i class="fa fa-angle-left pull-right"></i>
  </a>
  <ul class="treeview-menu" id="leftNav" >             
  </ul>
 </li>
 </ul>
 <script src="../../js/public_html/leftNav.js" type="text/javascript"></script>

and this is the leftNav.js file:

window.addEventListener('load', leftNav, false);

var x = location.pathname;
alert(x);

function leftNav() {

 appendUl('leftNav', 'outerUL'); 

 appendLiA('outerUL', 'offers', '/Ofertas/offers.html', 'Offers');

 appendLiA('outerUL', 'mobilecarriers', '/Ofertas/mobilecarriers.html', 'Mobile Carriers');

 appendLiA('outerUL', 'affilpixeltracking', '/Ofertas/affiliatepixel.html', 'Affiliate Pixel Tracking');

 appendLiA('outerUL', 'carrierip', '/Ofertas/carrierip.html', 'Carrier IP');

 appendLiA('outerUL', 'updtconverstats', '/Ofertas/Pag1.html', 'Update Conversion Status');

 appendLiA('outerUL', 'updtconverstats2', '/Ofertas/Pag4.html', 'Update Conversions Status - S2');

 appendLiA('outerUL', 'getconvdata', '/Ofertas/Pag2.html', 'Get Conversions Data'); 

 appendLiA('outerUL', 'getconvdata2', '/Ofertas/Pag6.html', 'Get Conversion Data - S2');

 appendLiA('outerUL', 'updtconverspr', '/Ofertas/Pag3.html', 'Update Conversions P/R'); 

 appendLiA('outerUL', 'updtconverpr2', '/Ofertas/Pag5.html', 'Update Conversions P/R - S2');

 appendLiA('outerUL', 'test', '/teste/index.html', 'Test');


function appendUl(append_to_id, ul_id) {

 var ul = document.createElement('ul');
 ul.id = ul_id;

 var appendTo = document.getElementById(append_to_id);
 appendTo.appendChild(ul);
}

function appendLiA(append_to_id, li_id, a_href, a_text, i_class) {

 var a = document.createElement('a');
 a.href = a_href;
 a.textContent = a_text;

 var li = document.createElement('li');
 li.id = li_id;
 li.appendChild(a);

 var appendTo = document.getElementById(append_to_id);
 appendTo.appendChild(li);
 }   
}

@JesperHøjer If I understood you correctly, you're telling me to move my script to the top of the page? I already moved it to the <head> before the <body> tag and also below where all my scripts to load the layout of the page are. I get this error every single time I launch the page: >Failed to load resource: net::ERR_EMPTY_RESPONSE (12:17:06:028 | error, network) at localhost:8383/js/public_html/leftNav.js > — wickenex
– wickenex, Commented Jun 2, 2016 at 11:16
@JesperHøjer The page is not online, I am working locally on my laptop. — wickenex
– wickenex, Commented Jun 2, 2016 at 11:28
In the browser when you access the page, try and press F12 and select "Sources", locate leftNav.js, right click it, and select "Open link in new tab" then you can see what the path for the file is. — Jesper Højer
– Jesper Højer, Commented Jun 2, 2016 at 11:29

wickenex · Accepted Answer · 2016-06-02 13:36:50Z

2

Turns out the problem this whole time was a slighty source innacuracy. On my HTML file I had:

<script src="../../js/public_html/leftNav.js" type="text/javascript"></script>

and supposedly I don't need to have to call public_html in the source even if the program gave the location by itself, so the correction is:

<script src="../../js/leftNav.js" type="text/javascript"></script>

answered Jun 2, 2016 at 13:36

wickenex

533 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ladar · Accepted Answer · 2016-06-02 11:33:29Z

0

If you are using the lightweight http server that NetBeans offers for HTML5 projects, this is not possible. The server can serve only files from Site Root of the project (public_html in your case) but not from outside of site root. You will need to use your own HTTP server instead and configure your projects in NetBeans to use it (in project properties -> Run -> Web Server )

answered Jun 2, 2016 at 11:33

ladar

5,8864 gold badges29 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to load javascript file from another directory

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related