loading html file into html with jquery for offline/local project - javascript

I'm trying to load an html file into another html file for an app-project. Right now I'm doing it like this:
$.get('mod_navigation.html', function(data) { $('body').append(data);});
works as it should and is all I need :-) ... yet it does only work when i upload it on my server and test it via browser from there. Doing it via browser offline, so with the local files, the html file does not get included. Since the app later should work "offline" this does get me worried. How can I get this code to work offline/local?
Thanks in advance,
ANB_Seth

Can you use load()?
Load can work in localhost:
$('body').append($('<div id="nav">').load('mod_navigation.html'));
This appends a div to the body with the content (which is more common).
To replace the body entirely, just use:
$("body").load('mod_navigation.html');
Just remember that load paths from the root directory, not from the parent page's directory.
In localhost, there are restrictions. You will get a Access to restricted URI denied from a Get.
You could try JsonP or you could use HTML5 web app file storage.

Related

Why can't I get my script tag src's to work?

I have been coding up a localhost, and I made the localhost by using of course a JavaScript file to do so, and I then made it reference an HTML file. However, I noticed that when I am using localhost to serve up the HTML file I get this error:
"GET http://localhost:3333/filetesting.js"
The filetesting.js is that js file, there are also other things I'm referencing too, like websites. I'm referencing it by using script tag src.
I looked at the network on developer tools of it and it says it's a 404 error not found. I'm trying to figure out how to reference my script tag src's without having localhost:3333 go before it.
When I run the HTML file without using the localhost, it works just fine when it comes to the script tag src's. If you do not entirely understand what I'm asking for, just ask.
Assuming that your script will always reside in the root level of your website, you can simply target it with the root-relative prefix /:
<script src="/filetesting.js"></script>
This will load your script from the root, regardless of the site the file is hosted on. For example, on http://localhost:3333/ it will load the file from http://localhost:3333/filetesting.js, and from http://localhost:3333/folder/, it will attempt to load the file from the same location.
If you move your files over to a proper website, it will still work the same way: www.example.com will look for the file at www.example.com/filetesting.js, and www.example.com/folder/ will look for the same file at www.example.com/filetesting.js.
Hope this helps! :)

UWP: webview does not display page using navigateToString method

I am trying to use webview element in a universal app using javascript. My aim is to browse some websites adding some content of my own to its html document.
First, I set src attribute of webview to www.example.com and it browses the site. This was just to make sure the webview is capable of browsing the site.
Next, I tried getting the html and load it to webview using navigateToString method like this:
$.get(url, function (data) {
webView.navigateToString(data);
});
This causes the page to be loaded out of shape (aperarently some .js or .css files are not loaded or blocked from running), or it isn't even loaded.
I wonder what is the difference loading the page by its url and loading its html by manually like this. And is there a workaround I can overcome this problem.
Note: I'm new at both js and html.
A web page is usually not made of a single HTML file. In order to make it work, you will have to retrieve not only the HTML but also the javascript and the css files.
This can be a tedious work.
If you are trying to open something from the web, the easiest way is to perform a regular navigate() which will take the URI as parameter and perform a "full" browse (as the browser will do). The retrieval/loading of the CSS/JS will be done for you.
If you want to open a local page (local to your application), navigateToString() is a good path but you will have to host locally all the page dependencies (css/js fiels) or embed all the style and code in the HTML page itself.

Mixed content : This request has been blocked; the content must be served over HTTPS

I am developing a web app, which has map functionality. i download the map library using script tag in the index.html file. But now since it is the script tag, the map library is downloaded each and everytime I reload the browser. So inorder to cache it, I tried downloading it using $.ajax({url:"libraryURL" , cache:true}) . This downloads the library and cache it which is fine.
But the problem is I use https: to load my application, which works fine if I download the map library using script tag . Since now I changed to $.ajax, I see i am getting the below error.
Mixed Content: The page at 'https://baseurl ' was loaded over HTTPS, but requested an insecure image 'http://online2.map.m/tile/'. This content should also be served over HTTPS
I am not clear why it is throwing error when I download the map script file using $.ajax, and the error doesn;t come up if I download it using script tag.
If I use $.ajax ,i see some request in http triggered which I don't knw why.And because of this i get the mixed content issue. Using script tag, don;t see this.
The url I use is exactly the same. Any idea ?
Please help...

Is it mandatory to mention protocol to load jQuery?

Below code,
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script type="text/javascript">
console.log(jQuery);
</script>
works fine in firefox browser after src is modified to "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"(remote file) or "../js/jquery.min.js"(local file)
Otherwise, dev console gives Reference error: jQuery is not defined
I would like to test the code with remote library but not local
How do I understand this problem?
Leaving the scheme off the URL means that it is scheme relative.
If the HTML document is loaded over HTTP then the JS will be too.
If the HTML document is loaded over HTTPS then the JS will be too.
If the HTML document is loaded over FILE then … the JS won't be because file://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js doesn't exist.
Do your local testing on a local web server, don't load your HTML directly from your file system.
As mentioned by Mosh Feu, if you run a file locally, without a webserver, you cannot use protocol relative paths to load jQuery. That's because it is trying to find a local reference: file://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js.
Well, you could if you have jQuery locally in a folder /some/where/jQuery.js and you reference it with <script src="//some/where/jQuery.js>
So yes, if you're running pages from the disk directly, you must specify the protocol if you want jQuery from a CDN. See the first comment on http://www.paulirish.com/2010/the-protocol-relative-url/
Save yourself some trouble, install a local web server.
You must be viewing the file locally without using a web server which results in a wrong URL when the protocol is not explicitly specified.

I want to load an external html in to my file

I want to load an external file into my file. the external file present another server and my file present in another server.
If i use this $("#content").load("content.html"); that is works fine the the both file in same server but my files are having different server
Example:
my file present in my local server
inside index.html there is div having div id "content"
and menu.html file present in http://phpraddyx.com/
$(document).ready(function(){
$("#content").load("menu.html");
});
Load a local .php file into your container which itself is getting and returning the content if the external source (this course assumes that PHP is installed)
I think you can create a proxy page on you local server, e.g.
proxy.cgi?url='.....'
And use this server cgi page to fetch the url and return the content.
If this is only for designing, use iframe instead. (e.g. loading head menu links, etc.)
<iframe src="http://phpraddyx.com/" width="#" height="#">
Or since the code will work in the same server, save the Java file on that server and load it on HTML file stored in other server:
<script src="http://phpraddyx.com/menu.js"></script>

Categories