Weird OnsenUI behavior

[jamal]

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);
            
          }
	});

[mmike]

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>

[jamal]

@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>

[Fran Diox]

@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