3. Error: node is undefined

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.

Error: node is undefined

  • T

    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>
    0 1 Reply
  • Onsen UI

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

    0
    T
     2 Replies
  • T

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

    0
  • T

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

    0 1 Reply
  • Onsen UI

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

    0
    T
     1 Reply
  • T

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