0

I'm trying to load dynamicPages using router.loadContent() function and even though the main view is changed (i.e. data-page attribute is correctly set), the content itself remains the same. What could be a possible reason for this to happen? I have seen suggestion to just replace the DOM content, but I expect Framework7 to be able to handle new page load.

Any pointer on why this may not work?

Update with example

This is an example content directly from Chrome. For this case, only nav bar slides in and not the page itself.

<div class="navbar" data-ss-navbar="customer-s-lists"> 
  <div class="navbar-inner"> 
   <div class="left"> 
    <a href="#" class="link icon-only back"> <i class="icon icon-back"></i> </a> 
   </div> 
   <div class="center sliding">
    Lists
   </div> 
   <div class="right"> 
    <a href="#" class="link icon-only" data-crm-add-to-list=""><i class="icon icon-add"></i></a> 
    <!--a href="#" class="link icon-only"><i class="icon icon-search"></i></a--> 
   </div> 
  </div> 
 </div><div class="pages" data-ss-container="customer-s-lists"> 
  <div data-page="customer-s-lists" class="page navbar-through toolbar-through lists-page"> 
   <div class="page-content"> 
    <div class="tabs container-dark"> 
     <div id="cl-tab2" class="tasks-list tab active"> 
      <div class="list-block"> 
       <ul data-crm-lists="Static"> 
       </ul> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
 </div>

Here's the state of the page before trying to dynamically load the new page.

<div class="crm-app" style="height: 100%;">
 <div class="statusbar-overlay"></div> 
 <div class="panel-overlay"></div> 
 <div class="panel panel-left panel-reveal close-nav"> 
  <div class="navbar"> 
   <div class="navbar-inner"> 
    <div class="left"> 
     <a href="#" class="link icon-only close-panel" data-crm-close-menu=""><i class="icon icon-close-thick"></i></a> 
    </div> 
    <div class="center">
      My Sales 
    </div> 
    <div class="right"> 
     <div class="user-img"> 
      <img src="images/attachment.png" alt="">  
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="content-block"> 
   <ul class=""> 
    <li><a href="/crm/home" data-crm-navigation="tasks" class="external"><i class="icon icon-tasks"></i><br>Tasks<br></a></li> 
    <li><a href="/crm/contacts" class="external" data-crm-navigation="contacts" data-crm-card="spaces-developer.pxand/kanvas/cardContainer/crm-app:-contacts"><i class="icon icon-list"></i><br>Contacts<br></a></li> 
    <li><a href="/crm/customer-lists" class="external" data-crm-navigation="customer-lists"><i class="icon icon-list"></i><br>Customer Lists<br></a></li> 
    <li><a href="#" data-crm-navigation="albums"><i class="icon icon-gallary"></i><br>Gallary<br></a></li> 
    <li><a href="#" data-crm-navigation="timeline"><i class="icon icon-timeline"></i><br>Timeline<br></a></li> 
    <li><a href="/crm/compose" data-crm-navigation="compose-email" class="external"><i class="icon icon-compose"></i><br>Compose<br></a></li> 
    <li><a href="#" data-crm-navigation="compose-email-with-attachment"><i class="icon icon-capture"></i><br>Capture<br></a></li> 
    <li><a href="#" data-crm-navigation="profile" data-crm-card="spaces-developer.pxand/kanvas/cardContainer/crm-app:-list-form"><i class="icon icon-profile"></i><br>Profile<br></a></li> 
    <li><a href="/crm/stats" class="external" data-crm-navigation="stats"><i class="icon icon-stats"></i><br>Stats<br></a></li> 
    <li><a href="/crm/settings" class="external" data-crm-navigation="settings"><i class="icon icon-settings"></i><br>Settings<br></a></li> 
    <li><a href="/crm/product-catalog" class="external" data-crm-navigation="product-catalog"><i class="icon icon-product-catalog"></i><br>Product Catalog<br></a></li> 
   </ul> 
  </div> 
  <a href="#" id="fixed" class="logout-link" data-ss-logout="">LOGOUT</a> 
 </div> 
 <div class="panel panel-right panel-cover close-nav" style="" data-k-card-style="786ab644-c858-46ea-a6d0-686ef7d54f56,65be8746-b746-4b85-b058-e71b099ccd2f" data-card-id="786ab644-c858-46ea-a6d0-686ef7d54f56"> 
  <div class="content-block"> 
   <p class="">Right Panel content here</p> 
   <!-- Click on link with "close-panel" class will close panel --> 
   <p><a href="#" class="close-panel" data-crm-close-menu="">Close me</a></p> 
   <!-- Click on link with "open-panel" and data-panel="left" attribute will open Left panel --> 
   <div class="content-block"> 
   </div> 
  </div> 
 </div>
 <span style="display: none !important;display: none;" data-card-id="428cfeeb-a5c2-422d-81eb-37864285369e"></span>
 <div class="views" data-k-card-style="428cfeeb-a5c2-422d-81eb-37864285369e" data-card-id="428cfeeb-a5c2-422d-81eb-37864285369e"> 
  <div id="view-1" class="view view-main" data-k-widget="/_ra/spaces-developer.pxand/crm/js/controllers/contact.js" data-k-scope="main" data-crm-main-view=""><div class="navbar" data-k-card-style="fb78db96-a18f-4cd2-98cc-7bc8e7cba73c" data-card-id="fb78db96-a18f-4cd2-98cc-7bc8e7cba73c"> 
 <div class="navbar-inner"> 
  <div class="left"> 
   <a href="/crm/contacts" class="external link icon-only"> <i class="icon icon-back"></i> </a> 
  </div> 
  <div class="center sliding">
   Contacts
  </div> 
  <div class="right"> 
   <a href="#" class="link icon-only" data-crm-edit-contact=""><i class="icon icon-bars"></i></a> 
  </div> 
 </div> 
</div><div class="pages"> 
 <div data-page="contact" class="page navbar-through"> 
  <div class="page-content contacts-content"> 
   <div class="container container-light"> 
    <div class="contact-info-top"> 
     <h3 class="user-name">Name</h3> 
     <select class="program-btn" data-input="program" data-value=""> <option value="">Add to Program</option> </select> 
     <div class="crm-actions"> 
      <a href="#" class="crm-action" data-crm-sms=""> 
       <div class="btn-circle"> 
        <i class="kv-ios-chatbubble"></i> 
       </div> 
       <div class="btn-label">
        message
       </div> </a> 
      <a href="#" class="crm-action" data-crm-phone=""> 
       <div class="btn-circle"> 
        <i class="kv-ios-telephone"></i> 
       </div> 
       <div class="btn-label">
        call
       </div> </a> 
      <a href="#" class="crm-action" data-crm-video=""> 
       <div class="btn-circle"> 
        <i class="kv-ios-telephone"></i> 
       </div> 
       <div class="btn-label">
        video
       </div> </a> 
      <a href="#" class="crm-action" data-crm-email=""> 
       <div class="btn-circle"> 
        <i class="kv-ios-email"></i> 
       </div> 
       <div class="btn-label">
        email
       </div> </a> 
     </div> 
    </div> 
    <div class="crm-contact-type"> 
     <div class="crm-contact-type-text">
      Loyal
     </div> 
    </div> 
   </div> 
   <div class="contact-info-bottom"> 
    </div> 
    <hr class="thick"> 
    <div class="list-block more-listing"> 
     <ul> 
      <li> <a class="item-content external" href="/crm/contact-details"> 
        <div class="item-inner"> 
         <div class="item-title">
          Contact Details
         </div> 
        </div> </a> </li> 
      <li data-crm-view-purchases=""> <a class="item-content external" href="/crm/purchases?_target=spaces-identity.isaia/commerce/consumer/749875399818805249"> 
        <div class="item-inner"> 
         <div class="item-title">
          Purchases
         </div> 
         <div class="item-after" data-crm-lifetime-value="">$0.00</div> 
        </div> </a> </li> 
      <li data-crm-view-preferences=""> <a class="item-content external" href="/crm/tagging> 
        <div class="item-inner"> 
         <div class="item-title">
          Preferences &amp; Segmentation
         </div> 
        </div> </a> </li> 
      <li data-crm-view-notes=""> <a class="item-content external" href="/crm/notes"> 
        <div class="item-inner"> 
         <div class="item-title">
          Notes &amp; Communications
         </div> 
        </div> </a> </li> 
      <li> <a class="item-content external" href="/crm/tasks"> 
        <div class="item-inner"> 
         <div class="item-title">
          Tasks
         </div> 
        </div> </a> </li> 
      <li> <a class="item-content" href="#" data-crm-customer-lists=""> 
        <div class="item-inner"> 
         <div class="item-title">
          Lists
         </div> 
        </div> </a> </li> 
      <li> <a class="item-content external" href="#" data-crm-delete-contact=""> 
        <div class="item-inner"> 
         <div class="item-title color-red">
          Delete Contact
         </div> 
        </div> </a> </li> 
     </ul> 
    </div> 
    <hr class="thick"> 
   </div> 
  </div> 
 </div> 
</div></div> 
 </div>
</div>

As for the case where nothing happened at all, I can't reproduce it now. Without any code change, it suddenly started working a few days later. The worst thing about this framework is that there's just not enough error message when something doesn't work.

Update 2

After debugging through the code, it seems like it's not able to find old page and therefore new page cannot be loaded. I don't see anything wrong with the HTML so I will have to dig through the code a little bit more to see what's going on.

Community
  • 1
  • 1
juminoz
  • 3,168
  • 7
  • 35
  • 52
  • could you provide some example code or maybe even an example on a site somewhere? In my experience, I have found that there was an error on the page that was loaded so it was not actually loaded like I thought it was. I looked in chrome dev-tools under network to see what the dynamic content actually was that it was trying to load. That may be a starting point. – amaster Nov 25 '17 at 03:44
  • I just updated the question with an example. Unfortunately, I can't point you to the site since I cannot give you access to it. Let me know if you spotted anything that's wrong here. – juminoz Dec 01 '17 at 18:46

1 Answers1

0

I figured out the issue after debugging the framework line-by-line. Here're things to watch out for when using Framework7:

1) It really doesn't understand the current DOM state if it's changed dynamically. For my case, div.pages is appended after the view is already initialized and therefore it has no idea what to do.

2) Make sure .pages, .navbar and .page are there or loading dynamic content will not work.

My workaround was to set mainView.pagesContainer variable after the DOM is loaded. I will suggest the owner of the framework to have a fail safe by checking for the element within the view. Let's see what he has to say about this.

juminoz
  • 3,168
  • 7
  • 35
  • 52