I have small requirement that i want to include productresults.html file in productsearch.html in durandal(Single Page Application). Can any one help me on this and i have tried the following ways also.
<link rel="components" href="productResults.html">
<!--#include virtual="productSearch.html" -->
Thanks,
shiva
Solution using jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("productResults.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Hope this helps.
Thanks for your support and information.
Finally the code snippts works fine for me in SPA.
<!--ko compose: {view: 'nav'} -->
<!--/ko-->
What you're trying to do is a Server side include.
Your web server must be configured to support it - it sounds like maybe your server isn't?
It's also possible your web server might require the file to have a special suffix, e.g. "productSearch.shtml".
You can look here for more details:
http://stackoverflow.com/questions/13612391/enabling-ssi-on-iis
http://blogs.msdn.com/b/robert_mcmurray/archive/2010/12/28/iis-notes-on-server-side-includes-ssi-syntax-kb-203064-revisited.aspx
http://httpd.apache.org/docs/2.2/howto/ssi.html
Related
I have a processing program which I want to display on a browser in an html file. I found an instruction on https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/. It still does not show up in my webpage. I also tried it with the same code from the instruction and it still does not show up. I am using chrome and my html code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Bitmap?</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<h1>Text</h1>
/* #pjs preload="Karte_schweiz_zentriert.jpg","bitmap_zentriert.jpg"; */
<canvas data-processing-sources="bitmap_map_comparison.pde"></canvas>
</body>
</html>
I have the .html file, processing.js, the two .jpg pictures and the bitmap_map_comparison.pde processing code in one folder called bitmap_map_comparison.
Does anyone know where the problem is?
You are using src incorrectly. Unless you have ProcessingJS in the exact same folder as the program, it will not import as it does not exist. Use this instead:
<script src="https://cdn.jsdelivr.net/processing.js/1.6.6/processing.min.js"></script>
Edit: I'm just now realizing that I'm 3 years late and this probably won't help anyone.
Subject solved! The answer is below.
Good morning, everyone!
So that's it, I'm telling you my problem. I currently have to create a small script allowing me to retrieve the tags from an HTML file and drop them to another HTML file. I had a possible idea to do this in VBS but without much success for the moment.....
I also thought about doing this with a split but also without much success...
If you have examples of scripts, I'm a taker!
Thank you.
I solved my problem!
I relied on the code that was provided to me and that was removed and I followed the jQuery doc;)
Doc link: http://api.jquery.com/load/
My code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script>
$(function() {
$("#PremierTest").load("file.html #test1");
$("#DeuxiemeTest").load("file.html #test2");
$("#TroisiemeTest").load("file.html #peutetre");
});
</script>
<div id="PremierTest">
</div>
<div id="DeuxiemeTest">
</div>
<div id="TroisiemeTest">
</div>
</body>
</html>
Thank you to all of you :)
I know that it is best practice to have separate files for CSS and JS so that this:
<head>
<style>
<!--CSS code -->
<!--CSS code -->
</style>
</head>
<body>
<!--HTML code -->
<!--HTML code -->
<script>
<!--JS code -->
<!--JS code -->
</script>
</body>
becomes this:
<head>
<link rel="stylesheet" type="text/css" href="my-blackjack-file.css">
</head>
<body>
<!--HTML code -->
<!--HTML code -->
<script src="my-javascript-file.js"></script>
</body>
But is there an equally simple way to do this for the html portion of the code for the sake of better organization? I have seen some suggestions online for including html pages, but they seem to be talking about iframes and use some fairly complex (for me) javascript. Is there something more akin to
<body>
<link rel="stylesheet" type="html" href="my-html-file.html">
</body>
in order to separate a long document into several files that run as if they were on the same page?
This is work in progress and may (or may not) be supported in the next version.
Until then, unless you output the HTML through some server-side technology such as JSPs or Velocity, which support templating, you can only use iframes or AJAX as a workaround for including HTML.
Depending on the development environment you can use partial views.
<body>
#Html.RenderPartial("descriptiveNameHere.html");
<script src="my-javascript-file.js"></script>
</body>
Or something to that effect. There is additional syntax of course, but maybe this will put you on the track you're looking for.
Ultimately you will still have an html file with your "HTML Code". But if you're looking to reduce the complexity of a large file by moving chunks into external files, partial views are a way to do so.
I was wondering how to add a header (or just any html file) into another html file. I tried using iframes, but it just redirected what was inside of the iframe. Once I finish my website, I will probably have a lot of pages, so it will be very useful to just be able to add a header that can be updated by only changing one file, instead of having to change it on all of the pages. Does anyone know how to do this? Thanks in advance.
With jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
With JavaScript without jQuery:
<html>
<body>
<script src="b.js"></script>
</body>
</html>
b.js:
document.write('\
\
<h1>This is my include file</h1>\
\
');
With PHP:
<?php include('b.html');?>
For this to work you may have to modify the .htaccess file on your web server so php may be interpreted within .html files. You should see, or add, this within your .htaccess file:
RemoveHandler.html
AddType application/x-httpd-php .php .html
With Service Side Includes (SSI):
<!--#include virtual="a.html" -->
With HTML5:
<object name="foo" type="text/html" data="foo.inc"></object>
Alternatively:
<embed type="text/html" src="foo.inc">
I have searched for no javascript way but I couldn't make it work. Here is the simplest way of including HTML
you can create html files for header, footer, content, anything you want to have in a separate file and all you need to do is:
1.put this in your page
<script src="https://www.w3schools.com/lib/w3.js"></script>
you could also download the w3.js and upload it to your server files
<script src="/lib/w3.js"></script>
2.then where ever you want your html code, from the separate file, to be included to your page:
<div w3-include-html="header.html"></div>
for example
Google
<div w3-include-html="footer.html"></div>
<h1>Title of current page</h1>
<div w3-include-html="content.html"></div>
include the next code anywhere after the previous "include" codes
<script>w3.includeHTML();</script>
source w3schools.com How TO - Include HTML
so this is how it can look
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div w3-include-html="header.html"></div>
<script>w3.includeHTML();</script>
I would like to have a header.html which defines how the header for all my web pages will look like. How can I insert this header.html into the other web pages at the top?
There may be better methods around to achieve a common header to be shared around. As I still consider myself a newbie to html (but not to programming), I am open to better suggestions.
Thank you.
EDIT: Helpful replies have mentioned using PHP. However, I am using AngularJS as front-end and my PHP backend is simply a pure REST server. My preference is to do it the AngularJS way and not the PHP way.
An AngularJS solution would look like this:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src='angular.js'></script>
<script src='main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
<div ng-include src="header.url"></div>
<script type="text/ng-template" id="header.html"></script>
</div>
</body>
</html>
main.js:
var myApp = angular.module('myApp', []);
function HeaderCtrl($scope) {
$scope.header = {name: "header.html", url: "header.html"};
}
header.html:
<p> Header content goes here </p>
The reason I did not simply advise a solution such as: <div ng-include="'header.html'"> is to avoid any delay in loading the header. For more information have a look at angularjs - Point ng-include to a partial that contains a script directive.
Alternatively a jQuery would like this.
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#headerContent").load("header.html");
});
</script>
</head>
<body>
<div id="headerContent"></div>
</body>
</html>
Finally a PHP solution would look like this:
<html>
<head>
</head>
<body>
<?php include('header.html'); ?>
</body>
</html>
Best of luck learning!
The way I typically handle this, and it allows for more than a header, is to have a shell.html
It might look like this:
<div ng-controller="ShellController">
<div ng-include="'app/shell/header/header.html'"></div>
<div ng-view></div>
<div ng-include="'app/shell/footer/footer.html'"></div?>
</div>
Where you're ng-including the static bits, and you're using Angulars ngRoute (or ui-router)
The other answers provided miss the point here of the client using Angular.js. Angular is actually designed for this concept. There are a couple different ways to achieve client templates with Angular.js.
Using Angular as a Single Page Application (SPA) where you dynamically change the content on a single HTML document rather than redirecting to different pages.
Using Angular Directives to encapsulate common page features.
You can use a combination of the 2 to achieve almost any combination of page layout.
using the angular route provider or a plugin like Angular UI-Router you can define a common HTML page, and within the HTML page use the ng-view directive to denote a section of your page to be dynamically replaced at runtime. you can then define html templates which populate the dynamic section.
Using Directives, you can create new HTML elements to design a more expressive page layout. For example, you could define a my-menubar directive containing HTML templates, javascript elements, even business logic, and then include the menubar on any page simply by using a syntax like <div my-menubar /> Directives are very powerful, and I highly recommend reading about them in the Angular Developer Guide.
An example of a simple page that might use these features:
<div ng-controller=MainController>
<div main-menu />
<div ng-view> </div>
<div page-footer />
</div>
Bottom line, you do not need a server to perform logic for reproducible code, as Angular.js is designed for exactly this purpose.