RSS not work in Onsen



  • Hi!
    Sorry for my English!
    It is my first Project in Monaca!
    I want make RSS-reader.
    I was make a blank project without any UI. And it work.
    But when I was create project with Onsen Tabbar, then project does not work.
    Project include files:
    jquery.rss.min.js
    jquery-1.6.4.min.js
    and index.html:

    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1" /> 
      <title>jquery.rss example</title>
      <script src="jquery-1.6.4.min.js"></script>
      <script src="jquery.rss.min.js"></script>
      <script>
        jQuery(function($) {
          $("#rss-feeds").rss("http://battlebrotherhood.ru/feed/",
          {
            limit: 10,
            entryTemplate:'<li><a href="{url}">[{author}@{date}] {title}</a><br/>{teaserImage}{shortBodyPlain}</li>'
          })
        })
      </script>
    </head>
    
    <body>
      <div id="rss-feeds"></div>
    </body>
    

    In index.html of Onsen-project i was paste code between <head> and </head>, and <div id=“rss-feeds”></div> between <body> and </body>.

    It`s not work!
    Where the error?

    Thanks regard!



  • So chances are, you have malformed Onsen tags. Can you post your whole index.html or your Onsen code?



  • <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <script src="components/loader.js"></script>
        <script src="lib/angular/angular.min.js"></script>
        <script src="lib/onsenui/js/onsenui.min.js"></script>
        <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
    
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
        <link rel="stylesheet" href="css/style.css">
    
        <script>
            ons.bootstrap()
              .controller('AppController', function() {
              });
            ons.ready(function() {
                console.log("Onsen UI is ready!");
            });
        </script>
        
        
        
      <script src="jquery-1.6.4.min.js"></script>
      <script src="jquery.rss.min.js"></script>
      <script>
        jQuery(function($) {
          $("#rss-feeds").rss("http://battlebrotherhood.ru/feed/",
          {
            limit: 10,
            entryTemplate:'<li><a href="{url}">[{author}@{date}] {title}</a><br/>{teaserImage}{shortBodyPlain}</li>'
          })
        })
      </script>
        
        
        
        
    </head>
    <body>
        <ons-page ng-controller="AppController as app">
            <ons-tabbar>
              <ons-tab page="page1.html" label="Page 1" icon="square" active="true"></ons-tab>
              <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab>
            </ons-tabbar>
        </ons-page>
    
        <ons-template id="page1.html">
        <div id="rss-feeds"></div>
          <ons-page id="rss-feeds">This is a blank page</ons-page>
    <script>
    document.addEventListener("init", function(e) {
      if (e.target.matches("#rss-feeds")) {
        ons.notification.alert({
          message: "Page 1 is initiated."
        })
      }
    })
    </script>
            Page 1
            
          </ons-page>
        </ons-template>
    
        <ons-template id="page2.html">
          <ons-page>
            Page 2
          </ons-page>
        </ons-template>
    
    </body>
    </html>
    
    


  • I had to do some modification, but this works:

    Place this in the head of your index.html:

        document.addEventListener("show", function(event){
        if(event.target.id=='rssFeeds') {
            jQuery(function($) {
              $("#rss-feeds").rss("http://battlebrotherhood.ru/feed/",
              {
                limit: 10,
                entryTemplate:'<li><a href="{url}">[{author}@{date}] {title}</a><br/>{teaserImage}{shortBodyPlain}</li>'
              })
            });        
        }
        });
    

    Place the below in your body:

    <ons-page>
         <ons-tabbar>
           <ons-tab page="page1.html" label="Page 1" icon="square" active="true"></ons-tab>
           <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab>
         </ons-tabbar>
     </ons-page>
    
     <ons-template id="page1.html">    
       <ons-page id="rssFeeds">
         Page 1
         <div id="rss-feeds"></div>
       </ons-page>
     </ons-template>
    
     <ons-template id="page2.html">
       <ons-page>
         Page 2
       </ons-page>
     </ons-template> 
    

    So you had some malformed Onsen tags and you had JS in the templates which you cannot do. Basically, just envision your entire application as a single webpage and build it from there.


Log in to reply