Question

I have a mobile app which I’m building up with PhoneGap and jQuery Mobile. The app fetches dynamic content from SQLite database when the user clicks the link. The data is formatted with jQM’s collapsible sets (accordions). Here’s the code.

The menu from which the user navigates to proper page:

<!-- data-role="page" id="mainmenu" -->
<ul data-role="listview" data-theme="c">
  <li><a id="news_link" href="#"> News</a></li>
  <li><a id="news_link" href="#"> Jokes</a></li>
  <li><a id="news_link" href="#"> Rumours</a></li>
</ul>

<!-- data-role="page" id="mainmenu" -->
<div data-role="page" id="news" data-title="AreApp News" data-theme="c">
    <div data-role="header" data-theme="c"></div><!-- /header -->
    <div id="newscontent" data-role="content" data-content-theme="c"></div>
    <div data-role="footer"></div>
</div>

Below I use the click event detection by the id of the element which was clicked and call the database loading function which fetches and put the content to correct div.

$(function() {
    $('#news_link').click(function(){ // event handler of newslink
        loadNewsFromDB(function(){
            $.mobile.changePage( $("#news"), { transition: "slideup"} 
         );
    });
});

function loadNewsFromDB(callback){
    //DB-logic and html code generation here....
    $(htmlStr).appendTo( "#newscontent" ).trigger( "create" );
    $("#newscontent").html(htmlStr);
}

The logic works very well when I’m click the link for the first time. But when I put the “back” button of my cellphone so that I’m back at the mainmenu and click the link again, the content is not formatting right. I mean it shows the news, but the formatting is not good because it should use collapsible sets but it isn’t.

I’ve tried to clear the content with jQuery’s remove() and empty() functions by binding the use of the function to

$(document).bind( "pagebeforechange", function( e, data ) {
    var obj = $.mobile.path.parseUrl( data.toPage );
    if(obj.hash=="#mainmenu"){
        $('#news-collapsible').empty().remove();
    }
});

But without results. I’m quite stuck with the challenge and I would deeply appreciate if someone would tell me where to go with this.

Answer 1

You need to refresh this collapsible set.

$('#newscontent').collapsibleset('refresh');