jQuery Forum

I'm having problems with listview (what is new), pushing empty content area down wards when it is filled with items dynamically.

I'm guessing it has to do with something not being told to refresh itself after items are added, but I can't seem to find out what.

Any help would be much appreciated.

Here is my page holding the listview:

1. <div data-role="page" id="page_support">
       <!-- header -->
       <div data-role="header" data-theme="c" data-position="fixed">
           <h1>Support</h1>
       </div>
       <!-- content -->
       <div data-role="content">   
           <div style="padding-right: 10px; padding-left: 10px; margin-top: 0px; overflow: hidden;" data-position="fixed">
               <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
               <tr>
                   <td style="padding-right: 10px; vertical-align: middle;">
                       <label for="iwm_support_customer_search"class="ui-hidden-accessible">Search Text</label>
                       <input type="search" name="iwm_support_customer_search" id="iwm_support_customer_search" value="" />
                   </td>
                   <td style="width: 130px; vertical-align: middle;">
                       <a href="#" onclick="javascript:sendSupportCustomerSearch($('#iwm_support_customer_search')[0].value)" data-role="button" data-icon="search" data-iconpos="right">Search</a>
                   </td>
               </tr>
               </table>           
           </div>
   
           <div style="padding-right: 10px; padding-left: 10px; margin-top: 0px;">
               <ul data-role="listview" id="supportCustomersList" data-inset="true" data-theme="c" data-dividertheme="c">
               </ul>
           </div>
       </div>
       <!-- footer -->
       <div data-role="footer" data-id="nav_bar_bottom" data-theme="c" data-position="fixed">
           <div id="navigation" data-role="navbar" data-iconpos="bottom" class="ui-state-persist">
           <ul>
               <li><a href="#page_quicklinks" data-icon="star">Quick Links</a></li>
               <li><a href="#page_register" data-icon="check">Register</a></li>
               <li><a href="#page_support" data-icon="info" class="ui-btn-active">Support</a></li>
               <li><a href="#page_overview" data-icon="grid">Overview</a></li>
               <li><a href="#page_logout" data-icon="alert">Logout</a></li>
           </ul>
           </div>
       </div>
   </div>
   

Here is the sendSupportCustomerSearch function (SupportCustomerSearchRequest is my custom object):

1. function sendSupportCustomerSearch(searchString)
   {
       var request = new SupportCustomerSearchRequest();
   
       request.ConnectionId = $iwm_vars.ConnectionId;
       request.SearchString = searchString;
   
   
       var jqxhr = $.post($iwm_vars.httpHandlerEndpoint + "?cmd=SupportCustomerSearchRequest/", JSON.stringify(request), readSupportCustomerSearch, "json")
       .error(function () { alert('An error occurred during support customer search request.'); });
   }
   

Here is the readSupportCustomerSearch function (response is my custom object):

1. function readSupportCustomerSearch(response)
   {
       if (response.Success)
       {
           buildSupportCustomerSearchResult(response.Customers);
       }
       else
       {
           alert(response.Message);
       }
   }
   

Here is the buildSupportCustomerSearchResult function:

1. function buildSupportCustomerSearchResult(customers)
   {
       var $page = $('#page_support');
       var $listview = $('#supportCustomersList');
   
       $listview.empty();
   
       var markup = '';
   
       if (customers.length > 0)
       {
           for (var i = 0; i < customers.length; i++)
           {
               var c = customers[i];
   
               markup += '<a href="javascript:scclick(\'' + c.Id + '\')" data-transition="flip">'+
               '<li data-messageId="' + c.Id + '">' + c.Name + '<br />' + c.AddressCity + '<br />' + c.Telephone + '</li></a>';
           }
       }
   
       $listview.html(markup);
   
       $listview.listview('refresh', true);
   }
   

I also have the following bound to the "pageshow" event:

1. $('#page_support').live('pageshow', function (event)
   {
       var $page = $('#page_support');
       var $listview = $('#supportCustomersList');
   
       $page.page();
   
       $listview.listview();
   
       $('navigation').navbar();
   });
   

What happens is that, to start with the page is empty except from a search box and a button.
When I type a search text and hit the button, the request is posted and the response is received as expected.
The listview items are also build as expected, BUT, the huge area (on iPad or browser) that was previously just empty space under the search box and down to the footer navbar, is still there, just pushed in front of the items, making the page longer (listview items + previously empty content = new length) and the navbar (even though it is set to data-position="fixed") has been pushed ahead of it all and is therefore no longer visible.

If I scroll in the list a few times, it seems to update the whole thing and the empty content disappears and the navbar appears again at the bottom of the page as supposed to.

- The question is, what am I missing to prevent this from happening?
- And also, why can the navbar even be scrolled out of the visible area when it is supposed to be fixed (I see it on other pages as well, it is more like it is a part of the content area than the footer area).

Any help appreciated, thanks.

/Aidal