Before all, I just want to apologize to my bad English (french school are not so good for practicing other languages ...).
I have a header.html on my site. I cannot modify him because it's not mine.
I just want to call an other html (one of mine, that i can modify, we can name it toto.html), when header.html is display (in other words, it's not a Java functions who call my other html, it's header.html).
I've tried some Jquery functions (like load()), Javascript and even the macro <#include from HTML, but without success.
Thanks to all for your responses.
Have a good day !
I have the following files in one directory:
helloworld.html
<p>hello!</p>
test.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$('#container').load('helloworld.html');
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Loading test.html in browser produces "hello!", so check if you jQuery is loaded properly.
Can you post example here to show us the context and how your page header.html is included in your site ?
I thinks it's not possible to do that : "(in other words, it's not a Java functions who call my other html, it's header.html)"
If you're not able to modify header.html or the way your page is called, it would be difficult to load anything else.
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
So, I have this really weird error. I am trying to link to an external JS file from my HTML file. Whatever I do, the functions in that external JS file can not be called.
This is my HTML code:
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
<script type="text/javascript">
//some other JavaScript...
function test() {
extTest();
}
</script>
</head>
<body>
<button type="button" onclick="test();">Test</button>
</body>
</html>
And this is my external JavaScript file:
function extTest() {
alert("Hello world");
}
(I simplified both code blocks to contain only the necessary lines.)
So, whenever I click the button, the function extTest() is supposed to open a popup saying "Hello world". But extTest() is not called. Instead, I get a ReferenceError saying "extTest is not defined". The problem occurs in Firefox as well as Chrome and Edge.
Both files (HTML and JS) are in the same directory on my laptop. I tried linking to the JS file with a relative link (as shown in the code above), a relative link using . for current directory (./cookies.js), and an absolute link (/C:/...). I also tried putting the JS file in its own folder and linking to it, it didn't work.
I'd consider myself rather a beginner when it comes to JavaScript, but I already used external JS files and it worked. Do you guys have any idea where this error comes from? I mean, I could put all the code from the external file into the script in the HTML file, but I'm really curious why it's not working the other way.
Any hints are highly appreciated, thank you in advance.
You can use just like this, you don't need to make another function inside because i suppose you make the js code in cookies.js
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
</head>
<body>
<button type="button" onclick="extTest();">Test</button>
</body>
</html>
I'd say initially it looks like you are declaring your function test but not invoking it. Try putting a line below that just has:
test ();
A question, if you similarly invoke your extTest function at the bottom of your external .js file, by which I mean again putting a line that says
extTest(); does it work as intended? If it doesn't, then there may be another issue at hand.
I'd like to think I'm fluent in html and css and I'm planning on broadening my horizons in the world of web development. Is there a way to create a set template for a div with a class using basic html/css or even javascript/php?
For example any div tag that is created with the class "test" will have preset elements as shown below.
<div class="test">
<h1></h1><br />
<p></p>
</div>
Updated to javascript..
Using the suggested Jquery code it hasn't responded correctly.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>$(".test").html("<h1>TEST</h1><br /><p>TEST</p>");</script>
</head>
<body>
<div class="test"></div>
</body>
</html>
It really depends on what you want to do. "Templates" are not generally a JS or PHP thing, but you can use libraries and such to use these.
One widely used PHP library is Smarty, which is, as it says, a "Template Engine". Similar things can be found for JS, such as ReactJS and AngularJS. I suggest doing some looking around and see what works best for you.
You can do this in HTML with a special tag called <script>. <script> basically tells the browser not to display the text, to instead run it as JavaScript. If you want to learn more about JavaScript Syntax, Wikipedia may help. You can use an open source library called jQuery to make your JavaScript code shorter. To use jQuery, you need to include
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
in your HTML document (preferably in <head>). To do what you asked, you just need to use jQuery's $ (in another <script>):
$(".test").html("<h1></h1><br />
<p></p>");
What this does is it selects ($) all elements class (.) test, and sets their internal HTML (the HTML inside of them) to your specified code. Your head should now look like:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div class="test"> </div>
<script>
$(".test").html("<h1></h1><br /><p></p>");
</script>
</body>
The script must go second so the <div> is there to modify.
This is probably super simple answer, but I just can't figure this out.
Basically, I've got a php page only starting with opening <?php tag.
I've got a jquery script that I need to call on this page.
<script type="text/javascript">
$('input[name="_manage_item"]').click(function() {
$('input[name="_item"]')[this.checked ? "show" : "hide"]();
});
</script>
From what I researched, I need to load the script by placing
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
into the <head> tags of the page.
But my page doesn't have the html <head> or <body> tags. Where do I call the script then ?
I tried to place it in front of the opening <?php tag, but that broke the page.
What is the correct way of doing this ?
You can place your javascript outside the php tags at the bottom of you page. But when you use the php in a web page, you should add the html and head and body tags. A simple php page could look like this:
<html>
<head>
<!-- stylesheets and javascript -->
</head>
<body>
<?php
//You php-code
?>
<!-- scripts at the end of the page to let the side load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('input[name="_manage_item"]').click(function() {
$('input[name="_item"]')[this.checked ? "show" : "hide"]();
});
</script>
</body>
</html>
Relying on your wordpress tag, I suggest you to read this article. There are described all details concerning javascript usage within wordpress. Probably the most common way is to use wp_register_script() function.
The safe and recommended method of adding JavaScript to a WordPress generated page, and WordPress Theme or Plugin, is by using wp_enqueue_script().
I would also advise you to merge your code to a distinct file, and load it straight after jquery library. It is a good practice, because in such a way browser can cache your script and would not download it on every page request. You should also wrap it into a $( document ).ready() function, to be sure that it will be executed only only when document is in ready state.
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/