I am relatively new to jQuery and pardon if this question is too simple, but I've searched numerous threads for hours and cannot find a definite solution.
I have the following folder structure:
/index.html
/html/pages/page1.html
/html/pages/images/
/html/pages/css/
/html/pages/js/
/html/pages/includes/
I am trying to load page1.html into a DIV in index.html in the following basic way:
$('#content').load('html/pages/page1.html', function () {
console.log('loaded');
});
page1.html loads fine, however, it consists of multiple includes and all the content in it (images, CSS, JS, etc.) is relative to the pages folder (for example: ../images/header.jpg), so it does not show when loaded into index.html since now everything becomes relative to / or index.html.
I read somewhere that making all paths absolute or root relative in page1.html will work, also adding sort of a global path variable, however, the PROBLEM is that there is too much legacy content and changing all of it is not an option.
Is there a way to do load page1.html as described above without modifying any of the paths, despite that they're relative? Or can someone recommend an efficient way (other plugins, techniques) of loading external content this way?
Thank you!