I'm trying to write some custom JS codes to load other js files. Here are the codes:
var j = jQuery.noConflict();
function loadJS(){
var i,l = arguments.length;
for (i=0;i<l;i++){
var t = document.createElement('script');
t.src = arguments[i];
document.body.appendChild(t);
}
}
j(document).ready(function(){
loadJS('1.js','2.js','3.js');
})
The above codes are put in a ready.js file in joomla_root/customJS, 1.js, 2.js, 3.js are also in the same folder. The codes and its function doesn't matter, what is important is the filepath issue, I've encountered this issue numerous times in different situations:
The loadings of these 3 files all return 404 error.
With SEF enabled, The URL of the page loading them is localhost/index.php/pages/blog(here pages and blog are not actual folders but menu items), and the page is trying to load localhost/index.php/pages/1.js etc.
I can use relative path like loadJS('../../customJS/1.js') to overcome this, but it is not reliable. If menu item blog has a submenu, then on that page the browser will try to load localhost/index.php/1.js and return a 404 error. Absolute path is also ugly, what if I move the site to aother domain or to a subfolder of the original domain? The paths won't work in both case.
So how to deal with this issue?