How to show data in a collapsible list dynamically in phonegap?

593 Views Asked by cgbs At 11 April 2025 at 02:53

I'm developing my first phonegap application. I am trying to get some datas from a web server and then show them in the collapsible list. However, I couldn't add datas to list dynamically. Additionally, the list structure is shown in web page but i couldn't see anything on the android emulator. I just see black page on it. How can solve these problems? Can anyone help about that? Thank you in advance.

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.
mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"
></script>
</head>

<body>

jQuery Mobile Collapsibles 

  <div id = "outer" data-role="content"> 

    <div id="list" data-role="collapsible-set"> 

      <div id="first" data-role="collapsible"> 

        <h3>Güvenlik</h3> 

        <p id="guvenlik">I'm the expanded content.</p> 

      </div> 

      <div id="second" data-role="collapsible"> 

        <h3>Sağlık</h3> 

        <p id="saglik">I'm the expanded content.</p> 

      </div> 
      <div id="third" data-role="collapsible"> 

        <h3>Diğer Servisler</h3> 

        <p id="diger">I'm the expanded content.</p> 

      </div> 

      </div> 

<button id="Sorgula">Sorgula</button>
</div>
<script>
$(document).ready(function()
        {
       ...
        });

</script>

</body>
</html>

Original Q&A

There are 1 best solutions below

avishayhajbi On 11 December 2014 at 02:52

You can insert items from list like I did, or you can just write it as inside the each function. The find call at the end is just to close them when it ends.

$.each(list, function(index, value) {   
     $("#container").append('<div  data-role="collapsible" data-iconpos="right" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child ui-last-child">'+
            '<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">'+value.name+
            '<ul  data-role="listview">'+some_li_list+'</ul>'+
            '</div>');
    });
$('#container').find('div[data-role=collapsible]').collapsible();

How to show data in a collapsible list dynamically in phonegap?

There are 1 best solutions below

Related Questions in ANDROID

Related Questions in JQUERY

Related Questions in JQUERY-MOBILE

Related Questions in CORDOVA

Related Questions in JQUERY-MOBILE-COLLAPSIBLE

Trending Questions

Popular # Hahtags

Popular Questions