refresh/rebuild html element

refresh/rebuild html element

Hi Guys,

i'm new to jquery/jquery mobile, and trying to build my first app with dynamic content from sqlite database.
the basic functionality of the app is working, but i got some difficulty refreshing the dynamic content pages.
In this app there can be several links to the same page with different argmuments to get the correct content from te database. so the page should be totaly rebuild before shown to the user.

The dynamic adding to de list works fine, but when i revisit the dynamic page with different arguments for adding content to the list, the old results (list) shows for a few seconts before rebuilding the list with de dynamic content of the new request.

CODE:

Menu links:  (?order=... is removed by plugin and is stored in $.mobile.pageData)
  1. <a href="#page_products?order=price">Order by Price</a>
  2. <a href="#page_products?order=name">Order by Name</a>

Function
  1. $('#page_products').live('pageshow',function(){
  2.    //get data from sqlite ......
  3.      $('#list_product').empty();
  4.       //loop through results
  5.       for (var i=0; i<l; i++){
  6.                  $('#list_product').append('<li>Products variable</li>');
  7.       }
  8. });

HTML page

  1. <div data-role="page" id="page_products">
  2.        <div data-role="content">
  3.                    <ul data-role="listview" id="list_product" data-inset="true"></ul>                           
  4.        </div><!-- /content -->
  5.  </div>
i was looking for a sollution in :
  .live('pagebeforecreate',function(){
  .listview("refresh");

but did not get the desired results

if someone could point me in the right direction, any help would be much obliged.

thanks in advance