Home/ Questions/Q 9091703
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T22:40:26+00:00

I’m very new to both JQuery and Javascript. I have an feed, I would

  • 0

I’m very new to both JQuery and Javascript. I have an feed, I would like to display these feed inside a collapsible div AS a collapsible div. I have the following Javascript file:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript">
    google.load("feeds", "1");
    google.setOnLoadCallback(showFeed);

    function showFeed() {
      var feed = new google.feeds.Feed("http://www.varzesh3.com/rss");
      feed.setNumEntries(10);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("headlines");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var di = document.createElement("div").setAttributeNode("data-role", "collapsible");
            di.innerHTML = '<h3>' + entry.title + '</h3>';
            di.innerHTML += '<p>' + entry.contentSnippet + '</p>';
            container.appendChild(di);
          }
        } else {
            var container = document.getElementById("headlines");
            container.innerHTML = '<li>Get your geek news fix at site</li>';
        }
      });
    }
</script>

<body>
    <div data-role="collapsible-set" id="headlines"></div> 
</body>

This should fetch all my feed names and put them in a collapsible div, it does exactly that but it shows the names as plain HTML text instead of a JQuery Mobile collapsible div.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @AML, that is more a comment than an answer because a don’t analyse your entire code, but I will put here for formatting purposes.

    In the line:

    var di = document.createElement("div").setAttributeNode("data-role", "collapsible");

    You don’t take a pointer(di) to the new created element, you take a result of the setAttributeNode(…), You need to split the code in two lines like that:

    var di = document.createElement("div");
di.setAttribute("data-role", "collapsible");

    There are a problem with setAttributeNode actually is setAttribute.
    Now is working, see at http://pannonicaquartet.com/test/feeds.html

    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
<style type="text/css">
    .collapsible{
        display : none;
    }
    h3{
        background-color : lightgray;
    }
</style>
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("feeds", "1");

    function showFeed() {
      var feed = new google.feeds.Feed("http://www.varzesh3.com/rss");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("headlines");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.onclick = function(evt){
                var elP = this.children[1];
                if(elP.style.display == 'inline'){
                   elP.style.display = 'none';
                }else{
                   elP.style.display = 'inline';
                }
            };
            div.innerHTML = '<h3>' + entry.title + '</h3>';
            div.innerHTML += '<p class="collapsible">' + entry.contentSnippet + '</p>';
            container.appendChild(div);
          }
        }
      });
    }

    google.setOnLoadCallback(showFeed);

</script>
    • 0