I am new to Angular and JavaScript. I want to use ng-include to import elements form htmls, the elements are simple for display. To illustrate, here I have 3 html files, "123.html", "456.html", and "789.html".
For "123.html":
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p> Here we have 123. </p>
<div class="container">
<div ng-include="'456.html'"></div>
<div ng-include="'789.html'"></div>
</div>
</body>
</html>
For "456.html":
<div>
<P> Here is the 456. </P>
</div>
And for "789.html":
<div>
<P> And here is the 789. </P>
</div>
I see some ng-include examples, but all of them got ng-controller and additional JavaScript file. So my question is, if I just want to display html elements, do I still need ng-controller for the code?
P.S. The code above cannot correctly work, could someone help figure out the problem for this very simple example? The browser is Firefox. Thanks.
Angular must at least have the module myApp available since that's what you are declaring in ng-app
It can't bootstrap without that module and errrors in your browser console should be telling you that it can't find it.
If all you are doing is using angular for includes why not just use server side includes?
So you don't have an app called myApp and would get an error referencing a module that is not defined. In the code below you can see I removed it.
That being said you can define templates using the script tag with ngTemplate.
<script type="text/ng-template" id="456.html">
<div>
<P> Here is the 456. </P>
</div>
</script>
Example using both a script template and a separate file.
This is the full working code:
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app>
<p> Here we have 123. </p>
<div class="container">
<div ng-include="'456.html'"></div>
<div ng-include="'789.html'"></div>
</div>
<script type="text/ng-template" id="456.html">
<div>
<P> Here is the 456. </P>
</div>
</script>
<script type="text/ng-template" id="789.html">
<div>
<P> And here is the 789. </P>
</div>
</script>
</body>
</html>
Related
I have my navbar inside index.html file and I am loading it inside my homePage.html file as follow:
<!DOCTYPE html>
<html>
<head>
<script>
window.$ = window.jQuery = require("jquery")
</script>
</head>
<body>
<div id="navbar">
</div>
<div id="page-wrapper">
</div>
</body>
<script>
$(function(){
$("#navbar").load("./navbar/index.html");
});
</script>
</html>
when I put random data inside page-wrapper they become overshadowed by the navbar.
I have worked with Meteor before and there we have something called {{yield}} that we use to indicate that the rest of the content should go here.
How is it accomplished in jQuery?
<div id="page-wrapper">
could be changed to
<div id="page-wrapper" style="margin-top:10%">
I believe change the css should fix your problem.
Do you ever look at a code and think it looks so simple?
Like it's just a simple three line code-- "I can't possibly mess this up!", you say, and end up messing it up? Because I did, and it's driving me crazy. Ok not that crazy, but I'm stumped.
I'm making an online portfolio and I wanted it to be multi-paged and realized soon enough that I can't (don't want to) rewrite the header html AND header css into each page. It's not efficient at all.
So I did some research & found W3 Data Includes library
(w3schools.com/lib/w3data.js & w3schools.com/w3css/w3data_includes.asp)
So my header:
https://jsfiddle.net/nsykep2v/
My index with W3 include:
<!DOCTYPE html>
<html lang="en">
<head>
blah blah blah
</head>
<script src="https://www.w3schools.com/lib/w3data.js">
</script>
<body>
<div w3-include-HTML="header.html"></div>
<script>
w3IncludeHTML();
</script>
<div id="blah">
blah blah blah
</div>
</body>
</html>
Don't bother running it, it's just there to give a sense of where I placed the important stuff.
Note:
I move the script tag around & no header shows up
I moved the div around & no header shows up
I merged the the script tag so it has src inside of it & still no
header shows up
They're all in the same file, right next to each other
I did some other stuff but it's basically moving around things and trying different syntax I don't think it's worth mentioning
Let me know if more info is needed.
You obviously have lots of work still to do, but this takes what you had and gets it working -- injecting the separate menu.html into index.html using the stuff you provided:
Answer in Plunker
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div w3-include-html="menu.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
menu.html:
<div class="v_dropdown">
MENU
</div>
<header class="in_dropdown">
<div id="filler_hdr" class="header">
<div id="filler_file"></div>
</div>
<div id="articles_hdr" class="header">
<div id="arcs_tab" class="tab">
<strong>Articles</strong>
</div>
<div id="arcs_file" class="file"></div>
</div>
<div id="projects_hdr" class="header">
<div id="prj_tab" class="tab">
<strong>Projects</strong>
</div>
<div id="prj_file" class="file"></div>
</div>
<div id="photo_hdr" class="header">
<div id="photo_tab" class="tab">
<strong>Photography</strong>
</div>
<div id="photo_file" class="file"></div>
</div>
<div id="blog_hdr" class="header">
<div id="blog_tab" class="tab">
<strong>Blog</strong>
</div>
<div id="blog_file" class="file"></div>
</div>
</header>
Also, make sure that you are serving up your local files using a web server and not file:// URIs when you are developing locally, as the w3data library will not work unless you serve the files from some sort of a web server.
Further, you have some pretty messed up HTML that you started with. Since it seems you are still learning some HTML basics and just trying to dive in, you might want to validate your HTML. One way to do this is by using an online tool like this.
This is the content of main page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<h1>Hello</h1>
<div ng-include="'goodbye.html'" ></div>
</body>
</html>
This is the content of goodbye.html :
<h1>Goodbye</h1>
It just shows the "Hello" and doesn't add the "Goodbye" to that. Why doesn't it include the goodbye.html?
You are missing ng-app to bootstrap AngularJS.
Also, ng-include evaluate the expression passed so you need to pass a string 'goodbye.html', not goodbye.html
<html ng-app="example">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
angular.module('example',[]);
</script>
</head>
<body>
<h1>Hello</h1>
<div ng-include="'goodbye.html'"></div>
</body>
</html>
Use '' in the ng-include
<div ng-include="'goodbye.html'" ></div>
From the Documentation
Angular expression evaluating to URL. If the source is a string
constant, make sure you wrap it in single quotes, e.g.
src="'myPartialTemplate.html'".
After looking at your html it seems that your application is not bootstraping automatically. It may be you are bootstraping your application manually. An other thing what I noticed is the ng-include takes path of your include html as string like..
<div ng-include="'goodbye.html'" ></div>
How to load divs from page 2 into page 1 with JavaScript.
Page2.html
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content2"> this is content2</div>
<div id="content3"> this is content3</div>
</div>
</body>
</html>
I want to get and use the id content2 from page2 to create a div into page1 with the content of that div, after link was clicked and deleted, and do the same with content3, content4 and successively.
Page1.html
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
get content
</div>
</body>
</html>
And then would be like that.
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
<div>this is content2</div>
<div>this is content3</div>
</div>
</body>
</html>
I'm new in JavaScript and i have no ideia how to do that. If someone can help. Thanks.
Edited: I wanted a way to do it only with javascript and without jquery if that's really possible. I want my project working offline and I can't do that with jquery, because it doesn't work. I've downloaded jquery plugin and pasted it in my directory, but, didn't work, too.
You can use a combination of JavaScript, jQuery, and AJAX to accomplish this.
First, include the jQuery library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Then write a JavaScript function similar to this one which will replace your div element's html content with the Page2.html file:
var loadNewContent = function {
$.ajax("Page2.html", {
success: function(response) {
$("#content2").html(response);
}
});
};
And then you would need some 'trigger' to run this function such as this:
$("#content2").on('click', loadNewContent);
Hope this helps.
I wrote a small library called ViaJS using javascript & jquery. It basically lets you load content (like a div) from a source to the page. Check it out.
Via is a small library that allows you to load content on to a page dynamically
I am using android 2.2, phonegap 1.3, and jquery-mobile 1.0
I have a list view in which there is an element in the list that I want to use to create a dialog. I would like my dialog to be defined in a separate file so I can reuse it and I would like it to set the title according to the value I pass.
My dialog looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title"></h1>
</div>
<div data-role="content">
...
</div>
</div>
</body>
</html>
I have tried using a #href with the title parameter (as defined below), dialog is opened but the title param isn't present.
<ul data-role="listview" data-theme="a">
...
<li><a href="dialog.html?title=blah" data-rel="dialog"/></li>
...
</ul>
I have read that I could use a data-url but in this case it is not clear where I define it (in the <a> or in a <div> which wraps it) and how I extract this in the dialog page.
EDIT
For the record the mechanism works in a standard browser but without the styling.
I created the script inside the <script> tags below which listens for page show events and updates the title and placeholder for the input.
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title">
</h1>
</div>
<div data-role="content">
<input placeholder="Type here..." id="configtext">
</input>
...
<script type="text/javascript">
$("div.ui-page-z").live("pageshow", function(event, ui) {
var dataUrl = $(".ui-page-active").attr("data-url");
$("#title").empty();
$("#title").append(SMSPLUS.getValue("title", dataUrl));
$("#configtext").attr("placeholder", SMSPLUS.getValue("placeholder", dataUrl));
});
</script>
</div>
The script wasn't detected when placed in the header (presumably because the framework takes no notice of headers for dialogs)
You might try removing the
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
</body>
and only return the body html & javascript in your ajax call. Having two DOMS in one might confuse the browser.