jQuery Forum

I'm trying to load an external static html page into a JQM app (div, iframe, any will do) the following way (I'm currently using a div):

4. // load html from external (though same server) html page
5. $.get(externalHtmlFolder '/filename.html', function (data)
6. {
7.     // change the html so that the path to css is correct from the app's location
8.     data = data.replace('href="stylesheets/style.css"', 'href="' + externalHtmlFolder + '/stylesheets/style.css"');
9. 
   
10.     // insert the loaded and now altered html into a div on a jqm page
11.     $('#invoice_html_container')[0].innerHTML = data;
12. });

And this appears to work.

Now unfortunately the css file loaded for the external html page "style.css" seems to be messing with JQM's styles in the rest of the app, after the page is loaded.

Is there a way to prevent this or does anyone know of a better way to achieve what I'm trying to do here?

/Aidal

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

I'm fairly new to JQ and JQM but not to web development in general.

I have read several posts about problems with item templates for listviews not being styled when added to the listview, but I haven't read any comments about how to make it work. Is it not supported yet or am I just doing something in a wrong order?

I have the following item template:

1. <script id="quicklinkItemTemplate" type="text/x-jquery-tmpl">
       <li data-messageId="${Id}">
           <a href="#"><h3>${CustomerId_Name}</h3><br/><h4>${ProjectId_Name}, <i>${ProjectDetailId_Name}</i></h4></a>
       </li>
   </script>
   

In my head section I have the following code:

1. $(document).ready(function ()
           {
               $("#quicklinkItemTemplate").template("ql_item_template");           
           });
   

On my "page" I have the following code:

1. <ul data-role="listview" id="quicklinkList" data-filter="true" data-theme="c" data-dividertheme="c">
   </ul>
   

In my head section I have the following event handler for the page containing the listview:

1. $('#page_quicklinks').live('pageinit', function (event)
           {
               $("#quicklinkList").empty();
               $.tmpl("ql_item_template", myArrayOfObjects).appendTo("#page_quicklinks");
               $("#quicklinkList").listview("refresh");
           });

What happens is that the items are added to the listview as expected, but they are not styled like they should be.
If I hard code a few items just to test the styling, I can see that the hard coded items are styled.
Am I doing something wrong or is this just not supported yet?