I want to load an external html in to my file - javascript

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>

Related

JavaScript path doesn't load on Live Server extension (VS Code)

HTML and CSS files are working perfectly on my live server. But every time I lead to a .js script it will not be shown on my live server. If I try to load the .js file directly through the URL it shows "Cannot GET /line.js". I already tried out everything I've found on the internet but it's still not working. Here are the points I checked/did:
Installed Code Runner
Installed Node.js = node.js system path done
Settings = Live Server Config = specified browser
"liveServer.settings.CustomBrowser": "chrome" on JSON settings
.js file is in a separate folder and accessed via <script src="line.js"></script> on index.html
Chrome is set as default browser on my system
Thanks for your inputs.
If the js file is in a separate folder, you need to provide the exact route to the folder in the script tag, since in the current form it is trying to find the js file in the root directory. The script tag should look like this:
<script src="FOLDER_NAME/line.js"></script>
It's possible that your javascript file is being loaded before the HTML page is rendered. You can try adding "defer" to your script tag like this:
<script src="demo_defer.js" defer></script>

How to add info that will show on each page

I have event coded to show the event on each page of the website. Is there a way to code it so that when you need to update it, you can do it once and it will show on each page? (vs having to update HTML text on each page).
Yes, create a external JavaScript(.js) file and include it on the each page. e.g
<script src="scriptfile.js"></script>
Whenever you want to update/change, just update the js file.
Definitely. You can set up a local server and then make .php files having html code in them. You can then include these .php files in your different html files as and when required. But for all this to work, local server configuration is required(like Apache and MySQL).

Failed to load resource from gstatic.com/charts

I use gstatic.com/charts to load graph to the web page.
But several days ago the webpage gave error
GET https://www.gstatic.com/charts/current/css/util/util.css
In network tab it shows that util.css is not loaded.
Checked via Incognito- the same problem.
Any ideas?
The problem was:
The JS is connected via 'https://www.gstatic.com/charts/loader.js'. From the JS file the CSS files are uploaded via the URL, written in that JS file.
I downloaded that JS file to include it locally, however they changed the URL of css file and this problem occured.
For me it helped to include the JS file via the above URL.

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.

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

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.

Categories