Monaca Onsen UI Discord Chat Github Repo

pull Hook on multiple pages



  • Hi
    I want to reload pages as I pull the page down. My html pages are some thing like bellow:

     <template id="page1.html">
        <ons-page name='page1'>
          <ons-toolbar class="topbar">
            --------------------
          </ons-toolbar>
          
          <div class="container">
           
            
          <ons-pull-hook class="pull-hook">
              Pull to refresh
            </ons-pull-hook> -->
            <!-- <script src="../js/pull.js"></script> -->
        </ons-page>
      </template>
    
     <template id="page2.html">
        <ons-page name='page2'>
          <ons-toolbar class="topbar">
            ------------------------
          </ons-toolbar>
          
          <div class="container">
           
            
          <ons-pull-hook class="pull-hook">
              Pull to refresh
            </ons-pull-hook> -->
            <!-- <script src="../js/pull.js"></script> -->
        </ons-page>
      </template>
    
    ,,,,,
    

    And the code in pull.js is as bellow

    var pullHook = document.getElementsByClassName('pull-hook');
        
    for (var i = 0; i < pullHook.length; i++) { 
      pullHook[i].addEventListener('changestate', function(event) {
        var message = 'Message';
    
        switch (event.state) {
          case 'initial':
            message = 'Pull to refresh';
            break;
          case 'preaction':
            message = 'Release';
            break;
          case 'action':
            message = 'Loading...';
             var pg=document.querySelector('#navigator').topPage.name;
             document.querySelector('#navigator').pushPage(pg);
            
            break;
        }
    
        pullHook.innerHTML = message;
      });
    
      pullHook.onAction = function(done) {
        
    * 
    * 
    * list item
        setTimeout(done, 1000);
      };
    }
    

    Though its working ( pages refresh ) but I don’t the the messages in code on various events (such as “'Pull to refresh”, “Loading…”).
    Also I have to load pull.js on every page.

    My question is am I doing it right?


  • administrators

    If you put pull.js in the head of your index.html file, you should only need it once.

    I think the reason your code is not working unless you put a script tag with each pull hook is that your pages are defined as templates, so when documents.getElementsByClassName is called, it won’t find the pull hooks from the other templates because they are not loaded in the DOM.

    If you still need help with the messages, can you make a working example of your code in https://onsen.io/playground/ and link it here so I can run it?