I'm very new to html and trying to make a website. So far, I've got an html file that has the header for my site and I would like to use it in all the pages I create for the site using jQuery's load function.
So basically what I want to do is load Header.html into Page.html.
This is the code in Page.html:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Header").load("Header.html");
});
</script>
</head>
<body>
Hi
<div id="Header"></div>
</body>
</html>
Header.html looks something like this:
<div id="Header_Name">Adabelle Combrink</div>
<div id="Header_GameProgrammer">Game Programmer</div>
The only thing that comes up on the screen is "Hi" at the moment.
Looks good, apart from the backslashes in the src attributes should be forward slashes.
Is there any particular error you are getting?
Also, as has been pointed out, PHP would be better suited to this job.
<?php include 'header.php'; ?>
Aside from the accessibility question, there might also be a negative SEO impact.
Edit:
Assuming your path to jQuery is correct, then the code you posted should work (it does for me).
Things to try / be sure of:
You are running this on a server (i.e. not just opening the file in your browser, as this will fall foul of the same origin policy). Check that the address in your address bar doesn't start with file://
Make sure that the path to the jQuery library is correct
Make sure that Page.html and Header.html are in the same folder
Check your broswer's error console. Instructions.
you can use iframe for including html file into the div.
Otherwise you have to follow some server side include method.
like, in php <?php include("includes/header.php"); ?>
your code looks fine.
are you running the site on a web server, such as out of visual studio (iis express) ?
You can't run it locally. Ajax wont work that way.
Open your page in chrome, and press f12 to open up dev tools.
go to the network tab.
do you see the ajax request being fired on the load function?
by the way, regarding the header div,
a div is not a self-closing tag. Its a container. Its best that you close it using a closing tag.
Otherwise you might get unpredictable results in some browsers. ( I have not checked in a while, but it was that way a few years ago, probably in explorer 8)
jQuery(document).ready(function(){
jQuery.ajax({
url: 'header.html',
type: 'get',
success:function(data){
jQuery('#header_container').html(data);
}
});
});
<div id="header_container">....</div>
The content returned by the request will go inside the header_container div
Div elements require a closing div tag like so <div></div>.
there is no need to call small pieces of code from another js file, just write your code in the head element like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="../Scripts/jQuery.js"></script>
<script>
$(document).ready(function() {
$("#Header").load("../Templates/Header.html");
});
</script>
</head>
<body>
<div id="Header"></div>
</body>
</html>
Don't be afraid to ask for more info.
$.load() http://api.jquery.com/load/
Related
I swear I've copied and pasted 100 different things that should work, but nothing is working.
I have my main html document, test.html:
<html>
<head>
</head>
<body>
<header></header>
<div class='content'>some content</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>
<script src="script.js"></script>
</body>
</html>
Another html document, test2.html:
<p>this should show up if it works</p>
And a javascript document, script.js:
$(function() {
$("header").load("test2.html");
});
My end goal is to get a navbar.html document that can be referenced via jquery by multiple different html documents. Here, I'm trying to do a verrrrrrry simple test to get the .load() function to work.
When I load test.html, I expect to see the text from both test.html and test2.html, but I'm not seeing the text from test2.html. What am I doing wrong here?
For this kind of request, you need to be running on a server as you will get an CORS (Cross Origin Ressource Sharing) if running the file directly from your html file. You could use Live Server on Visual Studio code or directly on an apache server to run your perticular code.
You can also see this link if my first answer doesn't work https://medium.com/#dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9
I am working on a project where I have to add external HTML files as a header and footer in the main (Index.html) page. I tried below script, but it didn't work
<!DOCTYPE html>
<html lang="en">
<head>
<title>sample test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#header1').load("mainheader.html");
});
</script>
</head>
<body>
<div id="header1"></div>
</body>
</html>
You can use iframe tag to load another html file or url.
<iframe src="your-html-route/another.html"></iframe>
Use JavaScript and work with components. Then you can work with modules to import or export a component and add HTML with
document.queryselector('#header').innerHTML = '<header>content</header>';
PHP is better for such a thing if you ask me. Make you header and footer in another .php file and include them on every page where you want use them.
Your script $('#header1').load("mainheader.html"); is correct. The fact is that the load() method (just like ajax) works exclusively on the SERVER. In order to load an external page to your tag using the load() method, you need to put your project on the server, or deploy a local server on your computer. There are many programs for this, for example: OpenServer, Denwer, WampServer, XAMPP, etc. I advise you to use OpenServer. It's free and easy to use. After you deploy your local server, you push your project to your server and the load() method will load your external html file.
If it's only a short bit of code then you could use this:
<pre>
<code>
HTML code goes
here.
</code>
</pre>
I'm trying to use Remark.js to create HTML presentations based on the template provided. The template includes the textarea tag with id='source' where the markdown is simply copied in. I wanted to go for a solution where I can leave the template and just change the file that is loaded, so that I don't have to work inside the HTML file and keep the markdown separate.
I've tried using jQuery (I'm a noob) but it does not seem to work, the page stays empty. Here's what I tried:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My presentation</title>
<link rel='stylesheet' type='text/css' href='presentation.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://gnab.github.io/remark/downloads/remark-latest.min.js'></script>
</head>
<body>
<textarea id="source"> </textarea>
<script>
$('#source').load('presentation.md');
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>
I don't get any errors in the JS console, but I also don't see anything. When I simply copy the file into the textarea it works, as expected, so the markdown file is OK.
I ran Chrome with the --allow-file-access-from-files so that at least I don't get the cross-origin requests error. However, that is not satisfactory as I intend to place the HTML file (and the related files) in Dropbox. If possible, I don't want to run a web server locally as it's just a 'simple' HTML file with some text copied in from another file.
What's the best way to achieve this, i.e. copying in a file as-is?
This willl solve your problem:
Create the remark after you loaded the data by adding the call to your callback function.
<script>
$('#source').load('presentation.md', function() {
var slideshow = remark.create();
});
</script>
I tried Google PageSpeed Insights to check how much my website speed does well! But it shows an error in mobile version. Google suggested me to remove render blocking javascript to make my site better looks in mobile device. I've written bellow what exactly they said to me.
Your page has 1 blocking script resources and 3 blocking CSS
resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered
without waiting for the following resources to load. Try to defer or
asynchronously load blocking resources, or inline the critical
portions of those resources directly in the HTML. Remove
render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/…%3A300%2C400%7CRaleway%3A400%2C500%2C900
https://www.blogger.com/…/3728782508-widget_css_mobile_bundle.css
https://www.blogger.com/…&zx=88195f1c-da8c-4c99-bb3e-609abb88c4fa
If you've written your page to be dependent on using jquery on load, removing it would mean you'd have to re-write a lot of your code, to save, perhaps 10 milliseconds in load time?
Open your browser's debugger, look at the NETWORK tab and reload the page. You should be able to decide whether this suggested optimization is worth it or not (I'm suggesting it is not).
I was having a similar issue with Javascript. Make sure that in your code after your source your java that you put a type="text/js". Like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/js"></script>
Otherwise you need to go into your server and make adjustments to your htcaccess file.
Heloo Nazmul, may be you should to edit your question to "How to Remove default JS and CSS that make Render Blocking Javascript in Blogger?" may be so long but I think your problem is it.
Follow my step with :
change <head> to <head>
If your Internet Service Provider give some bloking JS and CSS add <!-- </head> --> before </head>
Change </head> to <!--<head/>-->
add <!-- </body></html> --> before </body></html>
It is about DOM get work, I will give you example my blank blogger template if you still headache.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8'/>
<style/>
<b:skin><![CDATA[]]></b:skin>
<!-- </head> -->
<!--<head/>-->
<body>
<b:section class='header' id='header' showaddelement='yes'/>
<h1 style="color:blue;font-family: monospace">klikada.com</h1>
<b:section class='main' id='main' showaddelement='yes'/>
<b:section class='footer' id='footer' showaddelement='yes'/>
<!-- </body></html> -->
<style>a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;}a:active{text-decoration:underline;}</style>
</body>
</html>
I'm just starting to playing around on a Mac for the first time and I have created a very simple HTML page that uses jQuery to do a simple text swap when an h1 tag is clicked.
When I don't view the page through the webserver and just open it directly in Safari (file:///Applications/xampp/xamppfiles/htdocs/test/mypage.html) it works as expected. However, when I try to view through Apache (http://localhost/test/mypage.html) it doesn't work.
Here's the code:
<html>
<head>
<title>My Awesome Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
function sayHello()
{ $('#foo').text('Hi there!');
}
</script>
</head>
<body>
<h1 id="foo" onclick="sayHello()">Click me!</h1>
</body>
</html>
Am I missing something on the Mac? Wouldn't be an Apache setting since its client-side code.. right?
I should probably also mention that I loaded XAMPP to run Apache and MySQL. I have tested Apache to ensure its working using a simple PHP file.
Steve
Use Firebug and access the page. One things that might be a culprit is that the web server cannot open jquery.js file because of file permission. Firebug will show if the jquery loaded in page, even you can add the jQuery code on-the-fly in the Console tab.
If you access it using Safari, use Web Inspector and see the if any error showed in Console tab.
One last thing, make a habit to avoid onclick, do this instead:
<script type="text/javascript" charset="utf-8">
function sayHello()
{
$('#foo').text('Hi there!');
}
//wait DOM loaded
jQuery(function($){
$('#foo').click(function(){
sayHello();
});
});
</script>
Also, it's better to put the js code near the page end, before </body>, so it would not block concurrent page element's loading.