All geek questions in one place

Error loading jQuery Mobile Wicket BookmarkablePageLink

I am new to jQuery Mobile. I have an Apache Wicket-based application that I would like to try using JQuery Mobile, so it looks more enjoyable on mobile devices. Unfortunately, I get "Error Loading Page" errors for all page links that I never had a problem with before switching to jQuery Mobile. The root cause is 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 Berth Server 6.1.26 and FireFox 16.0. Here is the code snippet:

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

Relevant java code:

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

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

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

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

 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 valid URL for MetaprofileListPage. Before switching to jQuery Mobile, I tested with the same scenario, the same berth server will send the following HTTP request with the CORRECT URL:

 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 made was switching the headers to an HTML file from:

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

The standard jquery mobile templates include:

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

I've been struggling with this for 2 weeks now :-( What do I need to do to get JQuery Mobile to load the correct URLs? Please help !! Thanks a lot!

+4
source share
1 answer

You should probably mount your bookmarked pages under a short, well-known segment, like

Usually you override the Application # init method, for example:

 @Override protected void init() { mountPage("/cheeses/${cheese}", CheesePage.class); mountPage("/profile", MyProfile.class); }

This will at least remove these package names.

0
source

Source: https://habr.com/ru/post/1446295/

More articles:


All Articles