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>


  • Onsen UI

    @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


Log in to reply