Search jQuery

jQuery Forum

Screen name:
shimin_q

shimin_q's Profile

4 Posts

7 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

data-theme styling lost for select menus after ajax update
[8Replies]
- 11-Dec-2012 01:45 PM
- Forum: jQuery Mobile
I have a Form that contains a bunch of select menus and text field. I am running into an issue that, after AJAX update of a select menu, the updated select menus lost all its styling (data-themes etc.). All select menus have the same look as the first select menu before the AJAX update of the bottom 3 select menus.

Here is the html snippet:
1.     
      <html xmlns:wicket="http://wicket.apache.org/">
      <head><script type="text/javascript" src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-ver-1353527137996.js"></script>
      <script type="text/javascript" src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-event-jquery-ver-1353527137996.js"></script>
      <script type="text/javascript" src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-ajax-jquery-ver-1353527137996.js"></script>
      <script type="text/javascript" id="wicket-ajax-base-url">
      /*<![CDATA[*/
      Wicket.Ajax.baseUrl="newmetaprofile";
      /*]]>*/
      </script>
      <title wicket:id="pageTitle">Create Metaprofile</title>
          <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.2.min.js"></script>
          <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  
      <script type="text/javascript" >
      /*<![CDATA[*/
      Wicket.Event.add(window, "domready", function(event) {
      Wicket.Ajax.ajax({"u":"./newmetaprofile?4-1.IBehaviorListener.0-createMPForm-profileTypeRow-type","e":"change","c":"profileType","ad":true,"m":"POST"});;
      Wicket.Ajax.ajax({"u":"./newmetaprofile?4-1.IBehaviorListener.0-createMPForm-oxeNodeRow-oxeNode","e":"change","c":"oxeNode","ad":true,"m":"POST"});;
      Wicket.Ajax.ajax({"u":"./newmetaprofile?4-1.IBehaviorListener.0-createMPForm-rangeRow-range","e":"change","c":"range","ad":true,"m":"POST"});;
      Wicket.Ajax.ajax({"u":"./newmetaprofile?4-1.IBehaviorListener.0-createMPForm-otNode","e":"change","c":"otNode","ad":true,"m":"POST"});;
      Wicket.Ajax.ajax({"u":"./newmetaprofile?4-1.IBehaviorListener.0-createMPForm-site","e":"change","c":"site","ad":true,"m":"POST"});;
      ;});
      /*]]>*/
      </script>
      </head>
      <body>
      ...
  
      <form id="createMPForm" wicket:id="createMPForm" method="post" action="./newmetaprofile?4-1.IFormSubmitListener-createMPForm"><div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"><input type="hidden" name="createMPForm_hf_0" id="createMPForm_hf_0" /></div>
  
          <div data-role="fieldcontain" data-theme="b" wicket:id="profileTypeRow" id="profileTypeRow22">
              <img wicket:id="profileTypeAsteriskImg" src="images/asterisk.gif" alt="Required">
              <label for="profileType" class="select" wicket:id="profileTypeLabel">Metaprofile Type</label>
              <select name="profileTypeRow:type" id="profileType" wicket:id="type" data-theme="b">
      <option selected="selected" value="">Choose One</option>
      <option value="OXE">OXE</option>
      <option value="OXE_WITH_OT">OXE_WITH_OT</option>
      <option value="OXE_WITH_ICS">OXE_WITH_ICS</option>
      <option value="OT">OT</option>
      </select>
          </div>
  
          <div data-role="fieldcontain" data-theme="b" wicket:id="profileNameRow" id="profileNameRow23">
              <img wicket:id="profileNameAsteriskImg" src="images/asterisk.gif" alt="Required">
              <label for="profileName" class="select" wicket:id="profileNameLabel">Profile Name</label>
              <input name="profileNameRow:profileName" type="text" id="profileName" wicket:id="profileName" value=""/>
          </div>
  
          <div data-role="fieldcontain" data-theme="b" wicket:id="oxeNodeRow" id="oxeNodeRow24">
              <img wicket:id="oxeNodeAsteriskImg" id="oxeNodeAsteriskImg25" src="images/asterisk.gif">
              <label for="oxeNode" class="select" wicket:id="oxeNodeLabel" id="oxeNodeLabel26">OXE Node</label>
              <select name="oxeNodeRow:oxeNode" id="oxeNode" wicket:id="oxeNode">
      <option selected="selected" value="">Choose One</option>
      </select>
          </div>
      ...
          <div data-role="fieldcontain" data-theme="b" wicket:id="deviceTypeRow" id="deviceTypeRow2a">
              <img wicket:id="deviceTypeAsteriskImg" id="deviceTypeAsteriskImg2b" src="images/asterisk.gif" alt="Required">
              <label for="deviceType" class="select" wicket:id="deviceTypeLabel" id="deviceTypeLabel2c">Device type</label>
              <select name="deviceTypeRow:deviceType" wicket:id="deviceType" id="deviceType2d">
      <option selected="selected" value=""></option>
      <option value="NOE_A">4019</option>
      <option value="NOE_A_IP">IPTouch 4018</option>
      <option value="NOE_B_IP">IPTouch 4028</option>
      <
      </select>
          </div>
I googled and tried to append several java script fixes - none worked for me :(
1. document.getElementById('oxeNode').trigger('create');
2. document.getElementById('oxeNode').selectmenu('refresh', true);
3. document.getElementById('oxeNode').selectmenu('refresh', true).trigger('create');
4. $('#oxeNode').selectmenu('refresh', true).trigger('create');
5. document.getElementById('oxeNode').setAttribute('data-theme', b);
6. document.getElementById('oxeNodeRow24').page('destroy').page();
I am tearing my hair out, is there something I am missing here? Please help! Thanks!

JQuery Mobile select menus not displaying the selected value
[4Replies]
- 29-Nov-2012 01:14 PM
- Forum: jQuery Mobile
I am having trouble getting the select menu to display the value selected, and I couldn't figure out why, please help!!

Here is the header I included:
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.3.min.js"></script>
4. <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
```
Here are the 3 select menus in my html, but only the first select menu
works (i.e., after I select a value from the drop down list, the 
selected value is displayed in the box); the 2nd and 3rd select menu 
do not display the selected values after my selection from the list.
Anyone can tell me what the problem is?
```
1. <form id="createMPForm" wicket:id="createMPForm">
2. <div id="content">
3. <div id="metaprofile">
4. <table class="webClientTable">
5. <tbody>
6. <tr>
7. <td align="right" nowrap class="fieldLabel"><label for="profileType" wicket:id="profileTypeLabel" class="requiredLabel">Metaprofile Type</label></td>
8. <td colspan="-1">
9. <select id="profileType" name="type" wicket:id="type">
10. <option selected="selected" value="">Choose One</option>
11. <option value="OXE">OXE</option>
12. <option value="OT">OT</option>
13. </select></td> </tr>
15. <tr id="oxeNodeRow" name="oxeNodeRow" style="display:none">
16. <td align="right" nowrap class="fieldLabel"><label for="oxeNode" wicket:id="oxeNodeLabel" class="requiredLabel" id="oxeNodeLabel3">OXE Node</label></td>
17. <td colspan="-1">
18. <select id="oxeNode" name="oxeNode" wicket:id="oxeNode">
19. <option selected="selected" value="">Choose One</option>
20. </select></td> </tr>
22. <tr id="deviceTypeRow" name="deviceTypeRow" style="display:none">
23. <td align="right" nowrap><label for="deviceType" wicket:id="deviceTypeLabel" class="requiredLabel" id="deviceTypeLabel9">Device type</label></td>
24. <td colspan="-1"><select name="deviceType" id="deviceType" wicket:id="deviceType">
25. <option selected="selected" value=""></option>
26. <option value="NOE_A">4019</option>
27. <option value="NOE_A_IP">IPTouch 4018</option>
28. <option value="NOE_B_IP">IPTouch 4028</option>
29. </select></td> </tr>...
Thanks!!

JQuery Mobile Error Loading Page HTTP 404 with incorrect URL
[0Replies]
- 15-Nov-2012 12:43 PM
- Forum: Developing jQuery Mobile
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"/>
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!!

JQuery Mobile Error Loading Page via Wicket BookmarkablePageLink
[3Replies]
- 15-Nov-2012 12:33 PM
- Forum: jQuery Mobile
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"/>
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!!

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend