JQuery Mobile is missing files when running in the browser

Question

I have an HTML page with a link and a button to another html file. It's simple, I want to run it after clicking the login button.

However when testing it on Chrome some of the directories are missing from the inspect element/Sources, such as:

the folder src, containing the next html file that I want to load (named mainMenu.html)

this is an issue that does not occur in Internet Explorer to my surprise.

The link works, however in chrome it does not find the file at all, giving the following error:

Error Loading Page

also in inspect element:

Failed to load resource: net::ERR_FILE_NOT_FOUND

Here is the Href code, placed in the body of the login.html:

<a href="src/mainMenu.html">lol</a>

//here is the structure of the project

Project Folder contains: css folder, js folder, resources folder, src forlder, login.html

Inside the Css folder: jqueryCSS folder (containing the jquery css and map), styles.css (changes the color of some textfields).

Inside the js folder: jqueryJS folder (again with the js and the map), login.js (deals with the retrieving login info).

Inside the resources folder: fonts folder (contains the jquery fonts).

Inside the src folder: mainMenu.html (the one trying to run)

Thanks for your time, Cheers.

Answer 1

Use base tag to define relative folder for all relative link of page :

<base href="http://www.yoursite.com/yourfolder/" >

http://www.w3schools.com/tags/tag_base.asp