[SOLVED] Routed page behind main page

1

Hello
I have this code:

<body>
  <div id="app">
    <a href="#" class="button " onclick="mypopup();" >Open Popup</a>
    <div id="mypopupdiv"></div>
  </div>
  
  <script>
  function  mypopup(){
    
    var data = ''+
    '<div class="page">'+
    '  <div class="view view-left">'+
    '    <div class="page-content">'+
    '      <div class="list">'+
    '        <ul>'+
    '          <li><a href="#" onclick="openpage(1);" class="item-link item-content"><div class="item-inner"><div class="item-title">Page A</div></div></a></li>'+
    '          <li><a href="#" onclick="openpage(2);" class="item-link item-content"><div class="item-inner"><div class="item-title">page B</div></div></a></li>'+
    '        </ul>'+
    '      </div>'+
    '    </div>'+
    '  </div>'+    
    '</div>';    
    
    document.getElementById("mypopupdiv").innerHTML = data;
    popup_View = app.views.create('.view-left', {url: '/'});  

  }   
   
  function      openpage(page){
    if (page===1){
      popup_View.router.navigate('/left/',{ignoreCache:true});
    }  
    if (page===2){
      popup_View.router.navigate('/right/',{ignoreCache:true});
    }
  }
  </script>
  </div>
</body>

and routed page is opened “behind” main page, it looks like this:

routed
routed.PNG806Ă—420 10.3 KB

why is that? If I put z-index=10000 on routed page, it is displayed in front but in that case, Back link does not work? Is there any example of using one view alone, dynamically created from JavaScript?
Thank you

2

Would be good to see live example or JSFiddle, it is not clear how and where do you call this code and what you are trying to achieve

3

Also the app layout you have is wrong, check the docs http://framework7.io/docs/app-layout.html

4

I even can not create working JsFiddle, but you will see what I mean. My try is here:
https://jsfiddle.net/bp2ug9co/2/
Basically, I need that view is created dynamically inside DIV and that I can navigate between simple pages.

Here is JSFiddle which display what I need: https://jsfiddle.net/bp2ug9co/3/
With other words, when I put all HTML there where is “mydiv”, 2 links is displayed.
When I want to put same content using document.getElementById(“mydiv”).innerHTML = data;, it does not work (content is not displayed. (inside “data” is same content).
Thank you

5

OK I solved it like this: I create whole layout inside HTML and using innerHTML, I just put needed content, not all.

1 Like