JQuery Mobile Error Loading Page HTTP 404 with incorrect URL

JQuery Mobile Error Loading Page HTTP 404 with incorrect URL

I am new to JQuery Mobile.  I have an Apache Wicket-based application that I'd like to try JQuery Mobile on so it looks more pleasing on mobile devices.  Unfortunately, I am getting "Error Loading Page" errors for all the page links, which I never had problems with before switching to JQuery Mobile.  The root cause appears to be the URLs contained in the HTTP requests.  I used JQuery Mobile 1.2.0, JQuery 1.8.0, Wicket 1.5.5, locally tested using jetty server 6.1.26 and FireFox 16.0.  Here is the code snippet:

  1.             <ul data-role="listview" data-theme="b">
  2.               <li><a href="#" wicket:id="metaprofileList" rel="external">List</a>
  3.               </li>
  4.             </ul>

 The corresponding java code:

  1.             add(new BookmarkablePageLink<MetaprofileListPage>(
  2.                                                 "metaprofileList", MetaprofileListPage.class));

Based on the above, Wicket correctly replaced "#" in href="#" with real URLs where the pages are, so the final HTML looks like the following:

  1.             <ul data-role="listview" data-theme="b">
  2.               <li><a href="com.alcatel_lucent.nms8770.awol.client.web.page.MetaprofileListPage" wicket:id="metaprofileList" rel="external">List</a>
  3.               </li>
  4.             </ul>

 When the link is clicked , Jetty server sends the following HTTP Request with the following URL:

  1.     GET http://127.0.0.1:7999/com.alcatel_lucent.nms8770.awol.client.web.page.MetaprofileListPage [HTTP/1.1 404 Not Found 0ms]

 This is not a correct URL for the MetaprofileListPage.  Before I switched to JQuery Mobile, I tested with the same scenario, the same jetty server send the following HTTP Request with the CORRECT url:

  1.     GET http://127.0.0.1:7999/wicket/bookmarkable/com.alcatel_lucent.nms8770.awol.client.web.page.MetaprofileListPage?7 [HTTP/1.1 200 OK 0ms]

 The only change I did was switching the headers in the HTML file from:

  1.     <link rel="stylesheet" type="text/css" href="../../css/phone.css" media="only screen and (max-width: 480px)"/>
  2.     <link rel="stylesheet" type="text/css" href="../../css/default.css" media="only screen and (min-width: 1025px)"/>
  3.     <link rel="stylesheet" type="text/css" href="../../css/portrait.css" media="all and (max-device-width: 1024px) and (orientation:portrait)"/>
  4.     <link rel="stylesheet" type="text/css" href="../../css/landscape.css" media="all and (max-device-width: 1024px) and (orientation:landscape)"/>
  5.     <meta name="viewport" content="user-scalable=no, width=device-width"/>
  6.  

To the standard boilerplate jquery mobile includes:

  1.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  2.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
  3.     <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
  4.     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>       

 I have been struggling with this for 2 weeks now :-(  What do I need to do to get JQuery Mobile to work loading the correct urls/pages?  Please help!!  Many thanks!!