Error: node is undefined



  • Dir Fran Diox !!!

    Now, I have problems about ‘ons-modal’ on firefox and safari de-bug.
    When i add 1 ons-xxx html tag in ons-modal, this error notification.

    0_1463368543027_eror.png

    And this is my code :
    “angular”: “1.4.8”,
    “jquery”: “2.2.2”,
    “onsenui”: “2.0.0-rc.4”

    <!doctype html>
    <html>
    <meta charset="utf-8">
    <title>modal.com</title>
    <link rel="stylesheet" href="../bower_components/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="../bower_components/onsenui/css/onsen-css-components.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/onsenui/js/onsenui.js"></script>
    <script src="../bower_components/onsenui/js/angular-onsenui.js"></script>
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script>
      ons.bootstrap();
    
      $(function() {
        $('#show-modal').click(function() {
          //$('#modal').show();
          modal.show();
        });
        $('#close-modal').click(function() {
          $('#modal').hide();
        });
      });
    
    </script>
    <body>
    
    <ons-page id="my-page">
      <ons-toolbar>
        <div class="center">Modal</div>
      </ons-toolbar>
      <p style="text-align: center;" class="pt45">
        <ons-button id="show-modal" modifier="light">Open Modal</ons-button>
      </p>
    </ons-page>
    
    <ons-modal id="modal" var="modal">
      <p>Modal content</p>
      <ons-button id="close-modal" modifier="light">Close Modal</ons-button>
    
    </ons-modal>
    
    </body>
    </html>

  • Onsen UI

    @Thanh-Hai-Lai-Ho Hello! Try to move the ons-modal inside ons-page. I think that removes the errors.



  • @Fran-Diox :laughing: It’s good !
    Thank U so much !!!



  • @Fran-Diox but how else, I still left it outside…

    example

    <ons-template id="modal.html">
      <ons-modal id="modal" var="modal">
        <p>Modal content</p>
        <ons-button id="close-modal" modifier="light">Close Modal</ons-button>
    
      </ons-modal>
    </ons-template>
    

    So, I will call modal , how ? :smiley:


  • Onsen UI

    @Thanh-Hai-Lai-Ho Sorry, I think ons-modal is not supposed to be used inside ons-template.



  • @Fran-Diox
    Because in my project I doing, it is big modal

    <ons-modal id="modal" var="modal">
        <ons-toolbar>
          <div class="center">Modal</div>
        </ons-toolbar>  
        <p>Modal content</p>
        <ons-button id="close-modal" modifier="light">Close Modal</ons-button>
        <ons-bottom-toolbar class="bottom-bar footer-bar">
           <div class="center">title</div> 
        </ons-bottom-toolbar>
        <!-- end bottom-bar -->
      </ons-modal>
    

Log in to reply