mentizm

mentizm

Beta 10 Version

mentizm

Hi,

when bringPageTop(PAGE.HTML) is called. the callback isn’t fired.

An ons-page element is in the dom but it ios “display:none”.

This behavior only appear when i use the ng-controller=“PopController” tag.

Any ideas?


$(document).on('touchstart', '#menu_angebot_erstellen', function() {
    var options = {
        animation: 'fade',
        animationOptions: {
            duration: 0.2,
            delay: 0
        },
        callback: function() {
        	// do something
        }
    }
    myNavigator.bringPageTop('page.html', options);
});

FILE: index.html 
<body>
        <ons-sliding-menu
			main-page="html/view-start.html"
			menu-page="html/view-slide-menu.html" 
			side="left" 
			max-slide-distance="250px"
			var="slideMenu">
        </ons-sliding-menu>
</body>

FILE: view-start.html
<ons-navigator var="myNavigator">
  <ons-page>
    ....
  </ons-page>
</ons-navigator>

FILE: page.html
<ons-page modifier="create-damage" ng-controller="PopController">
  <div class="navigation-bar">
    <div class="navigation-bar__left">
      <ons-back-button></ons-back-button>
    </div>
    <div class="navigation-bar__center navigation-bar__title" id="view_listing_detail_toolbar">Übersicht</div> 
  </div>
</ons-page>

mentizm

@Fran-Diox Hi Fran thanks for your solution. I will try to combine ONS-SLIDING and ONS-NAVI but im verry new with ONSENUI so it would be great if can show me a sample how to combine them.

I will try some code for myself and will post my solution if it works.

mentizm

Hi,

need some help for this problem. I have 2 pages. One of them “PAGE1” is edited by a user. So the content change in <div id=“damage-list”></div> to <div id=“damage-list”>SOME USER CONTENT</div>

Now the user open the slide menu and chose “PAGE2”. After this he will return to “PAGE1” and go on with work on his old content but SOME USER CONTENT. But this isnt possible because SOME USER CONTENT is deleted and the page is in his initial state.

Is there a solution by ONSEN or have i do some magic with javascript.

<ons-sliding-menu 
  main-page="page1.html" 
  menu-page="myMenu.html" 
  side="left" 
  max-slide-distance="250px"
  var="myMenu">
</ons-sliding-menu>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="myMenu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <div id="damage-list"></div>

  </ons-page>
</ons-template>


<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="myMenu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;">Page2 Contents</p>
  </ons-page>
</ons-template> 


<ons-template id="myMenu.html">
  <ons-list>
    <ons-list-item modifier="chevron" onclick="myMenu.setMainPage('page1.html', {closeMenu: true},function(){console.log('xxx')})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="myMenu.setMainPage('page2.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>

mentizm

@argelius Thanks for the sample. If i tried the first time it still not working. Because i have included some angular files.

<script src="lib/onsenui/js/onsenui.js"></script>
<!-- <script src="lib/onsenui/js/angular/angular.js"></script> -->
<!-- <script src="lib/onsenui/js/angular-onsenui.js"></script> -->

after commented out the angular files the script works fine. The ready function is doing his job.

For me its ok because i dont need the angular file. But this shóuld be solved if someone will use them.

mentizm

Hi me again,

im using the USAGE of the ons-navigator (https://onsen.io/reference/ons-navigator.html).

By click on the “Push Page” button the page throws an error: myNavigator is not defined.

i included this js files:
<script src=“lib/onsenui/js/angular/angular.js”></script>
<script src=“lib/onsenui/js/onsenui.js”></script>

can someone help me. did i make a mistake.

Thanks mentizm

mentizm

Hi,

im working with the beta 2.0 and try to start with the “Onsen UI with plain JavaScript”. The example doesnt work.

ons.ready(function() {
  // Add another Onsen UI element
  console.log(document.getElementById("my-content"));
  var content = document.getElementById("my-content");
  content.innerHTML="<ons-button>Another Button</ons-button>";
  ons.compile(content);
});

The ready function is call before the dom is ready and throw an error at the line

content.innerHTML="<ons-button>Another Button</ons-button>;

because content is NULL.

mentizm

@mentizm

Posts made by mentizm