Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
Weird OnsenUI behavior
-
Please check out the following codepen:
https://codepen.io/anon/pen/mqRPEw
If I comment out the <div> tag block. The <ons-input> and Save button tag disappear!! Could you explain why this is happening?
<ons-navigator id="myNavigator" page="page2.html"></ons-navigator> <template id="page2.html"> <ons-page id="page2"> <!-- comment out the <div> tag block. The <ons-input> and Save button disappear --> <div> <ons-input id="employeeID" placeholder="Employee ID" type="text" value="150" /> </div> <input type="submit" id="save" value="Save" /> </ons-page> </template>
JS:
document.addEventListener('click', function(event) { if ( event.target.id == "save") { var e = document.getElementById('employeeID'); alert(e.value); } });
-
Jamal
Actually it’s quite simple.
Include closing </ons-input> tag. It works fine.
<ons-navigator id=“myNavigator” page=“page2.html”></ons-navigator>
<template id="page2.html"> <ons-page id="page2">
<!-- comment out the <div> tag block. The <ons-input> and Save button disappear -->
<ons-input id="employeeID" placeholder="Employee ID" type="text" value="150"></ons-input> <input type="submit" id="save" value="Save" /> </ons-page> </template>
-
@mmike, thanks! How did I miss that!!
I think the confusion comes from the fact that some HTML tags require an explicit closing tags while others do not such as:
<input name=“Text1” type=“text” />
VS
<ons-input id=“test”></ons-input>
-
@jamal Only a few native HTML elements are self-closing tags, like
<input />
or<link />
. There is no way to create a self-closing tag using Custom Elements, so remember to close them when using Onsen UI or any other library :P