CODEWITHSUNDEEP
jqueryhtmljquery-mobile
Reptar
Reptar

Reputation: 372

jQuery mobile listview doesn't work

I'm am working on a phonegap app for android. Ofcourse I work with jQuery mobile. At this moment I have made a navbar with 3 tabs, and when I change the tab, de content changes without reloading the navbar. I use a seperate javascript to change the content.

But now I'm working on a listview, like u see in the jQuery mobile demo's. The problem is that this doesn't work. You don't see a "application like listitem", but you see a dot with the listitemname, a html listitem without any css.

The listview is in the "page_zoek_category" and inside that there is a "content_zoek_category" and inside that you can find the listview "list_category"

My html script:

<div data-role="page" id="page_main">
  <div data-role="navbar">
      <ul>
          <li><a id="tab_home" href="#" class="ui-btn-active">Home</a></li>
          <li><a id="tab_zoek" href="#" >Zoek</a></li>
          <li><a id="tab_scan" href="#" >Scan</a></li>
      </ul>
  </div>

  <div data-role="content" id="content_main">
  </div>
</div>

<div data-role="page" id="page_home">
  <div data-role="content" id="content_home">
    home
  </div>
</div>

<div data-role="page" id="page_zoek_category">
  <div data-role="content" id="content_zoek_category">
      <ul data-role="listview" id="list_category" data-inset="true">
          <li><a href="#">Acura</a></li>
      </ul>
  </div>
</div>

<div data-role="page" id="page_zoek_detail">
  <div data-role="content" id="content_zoek_detail">
      zoek_detail
  </div>
</div>

<div data-role="page" id="page_scan">
  <div data-role="content" id="content_scan">
      scan
  </div>
</div>

And this is my javascript file

$( document ).ready(function() {
    $('#content_main').html($('#content_home').html());

    $("#tab_home").click(function () {
        $('#content_main').html($('#content_home').html());
    });

    $("#tab_zoek").click(function () {
        $('#content_main').html($('#content_zoek_category').html());
    });

    $("#tab_scan").click(function () {
        $('#content_main').html($('#content_scan').html());
    });
});

Upvotes: 0

Views: 433

Answers (1)

AtanuCSE
AtanuCSE

Reputation: 8940

Add this

$("#tab_zoek").click(function () {
    $('#content_main').html($('#content_zoek_category').html());
    $('#page_main').trigger( "create");
});

http://jsfiddle.net/Lu4qw/

2nd way:

$("#tab_zoek").click(function () {
    $('#content_main').html($('#content_zoek_category').html());
    $('#list_category').listview().listview("refresh");
});

http://jsfiddle.net/Lu4qw/1/

Upvotes: 1

Related Questions