I am facing the same problem as "How to use multiple html files in onsenui" but the solution did not work for me.
I have 2 html files i am trying to navigate to.
index.html
<ons-page>
<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>
<template id="page1.html">
<ons-page id="page1">
<ons-button onclick="myNavigator.pushPage('home.html')">home</ons-button>
</ons-page>
</template>
</ons-page>
home.html
<ons-page id="page2">
<ons-toolbar>
<div class="left">
<ons-back-button></ons-back-button>
</div>
</ons-toolbar>
</ons-page>
When i click on "home" button i get an error:
Uncaught (in promise) Error: [Onsen UI] HTML template must contain a single root element
at Object.Q.throw (onsenui.min.js:2)
at Object.Q.createElement (onsenui.min.js:2)
at onsenui.min.js:2
I tried adding template and html body to home.html but I got different errors. Is there a way to place templates in different html files?
ughghgh the issue was due to http-server caching my pages in node.js!
Related
I am trying to use iron-selector so that I can then dynamically change the main element on my webpage using iron-pages. The code is as follows:
<iron-selector selected='{{choice}}' attr-for-selected='option'>
<div option='home'>Homepage</a>
<div option='list'>List</a>
<div option='delete'>Delete items</a>
</iron-selector>
<h1>Your choice: {{choice}}</h1>
Nothing happens, the divs aren't clickable. I don't get any errors in the console.
I got a theme which inside app.component.ts file on template block contains:
<main [class.menu-collapsed]="isMenuCollapsed" baThemeRun>
<div class="additional-bg"></div>
<router-outlet></router-outlet>
</main>
AFAIK this element should have somewhere a selector referencing it but I am not able to find it anywhere. maybe this main tag is something internal for angular 2 and automatically loaded?
Thanks,
After some research, found the answer to your question.
The <main> tag is new in HTML5.
The tag specifies the main content of a document. Check this documentation about this tag.
I've recently started using the <template> tag for HTML that I process afterwards using a template library, e.g.
<template id="tmpl">
<div class="something">
{{title}}
</div>
</template>
...
<script>
var output = Mustache.render($('#tmpl').html(), {
link: 'abc',
title: 'abc'
});
</script>
However, I've come to realise this means I have a broken link (example.com/pages/{{link}}) in my HTML. This is a concern, as various crawlers might consider it invalid (in fact, the Google Search Console reports my homepage as having a broken link).
Is it valid to use <template> this way?
Is it better to put it in something like <script type="text/template"> instead (as seen on the handlebars.js website)?
The output variable does contain the HTML we would expect, i.e., the rendered template; however, your code does not write the contents of the output variable anywhere.
Here is a working example:
<template id="tmpl">
<div class="something">
{{title}}
</div>
</template>
<span id="output"></span>
<script>
var output = Mustache.render($('#tmpl').html(), {
link: 'abc',
title: 'abc'
});
$('#output').html(output);
</script>
Google has not properly crawled the test site I setup for this. However, when I asked GoogleBot to render my version of your code it displayed the link inside the template element, i.e., *{{title}}* and the rendered template link, i.e., *abc*. Even though Google says you have a broken link in the template element, you really don't when a user views it.
One possible way to get Google to quit indicating that you have a broken link is to surround your template tags with <!--googleoff: anchor--> ...templates... <!--googleon: anchor-->. These tags stop googlebot from indexing anchor tags contained within.
Example:
<!--googleoff: anchor-->
<template id="tmpl">
<div class="something">
{{title}}
</div>
</template>
<!--googleon: anchor-->
I have a banner html with a bunch of buttons(i.e. home, about,..etc.) that I'd like to set as a template. On my unique pages(say the home page), I'd like to "import" this template html file. How do I code this?
I've tried many different ways and looked it up but the closest I got was that when I imported, it had those scrollers and wasn't really "integrated" with the page. A good example of what I'm looking for is for instance, the arduino website where the top banner doesn't change.
Thanks,
You can use HTML Imports to import an external HTML file with a <template> element where you add the elements you want to import.
In the main file:
<head>
<link rel="import" href="template.html" id="myTemplate">
</head>
<body>
<div id="container"></div>
</body>
In the template.html file:
<template>
<span>Hello World!</span>
</template>
<script>
//get the imported HTML document
var importedDoc = document.querySelector( '#myTemplate' ).import
//get the content of the template element
var content = importedDoc.querySelector( 'template' ).content
//add a compy to the main page
document.querySelector( '#container' ).appendChild( content.cloneNode( true ) )
</script>
In the example above, the conent of the <template> element (the <span> text "Hello World!") will be put in the <div id=container> element in the main page.
Update 2019
HTML Imports won't be supported natively after Chrome 73. You should then use the other solutions listed above (the polyfill, an alternate module loader, JS import, or a direct download with fetch).
Greeting,
I am trying to use local anchor in a web page, but it doesn't work. The local anchor's URL like this:
https://hostname:port/info?newElement=true#a
If I use this URL to load the web page directly, I can see the web page is located in the correct position where the local anchor is. But if I click the hyper link in the web page, nothing happens, though I can see the URL is correct in the footer when I hover mouse on the hyper link.
The web page is not reloaded and the URL in the browser's address box is not changed to the URL with "#a" at end. Is it due to the web page is an active web page?
Below is the code sample:
"form.jsp":
<div>
<div>
<jsp:include page="form-nav.jsp" />
<div>
<jsp:include page="form-location.jsp" />
....
</div>
</div>
</div>
"form-nav.jsp":
<div>
<ul class="tab">
<li>
Name
</li>
....
</ul>
<div>
"form-location.jsp":
<div id="location" class="page">
...
</div>
Thanks,
Zhe
DEMO
Here is an example of how to use the anchor tag.
Anchor syntax:
Link text
Referenced Element:
<div id="someid">You content goes in here</div>
everyone,
by further codes reading, I found the problem now. There is a override of the hyper link's click behavior in a js file:
$("body..... ul.tab li a").on('click', function() {
...
return false;
})
By deleting this override logic, the local anchor works well now. Thanks a lot for your comments!