html - How to load javascript file from another directory - Stack Overflow

admin管理员组

文章数量:1435859

My idea is to create a sidebar menu through a javascript file instead of manually, which I already pleted. 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);
 }   
}    

My idea is to create a sidebar menu through a javascript file instead of manually, which I already pleted. 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);
 }   
}    

• javascript
• html
• netbeans
• directory

Share Improve this question Follow asked Jun 2, 2016 at 11:08 wickenexwickenex 5333 silver badges1010 bronze badges 8

• Could you try and move at the top of your html? – Jesper Højer Commented Jun 2, 2016 at 11:11
• @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 Commented Jun 2, 2016 at 11:16
• do you have a link to the page i can see? – Jesper Højer Commented Jun 2, 2016 at 11:26
• @JesperHøjer The page is not online, I am working locally on my laptop. – 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 Commented Jun 2, 2016 at 11:29

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 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>

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 )

本文标签： htmlHow to load javascript file from another directoryStack Overflow