Various refreshes of jquerymobile partial Rendering

On the JQueryMobile page, perform an overall rendering at the first initialization. Dynamic rendering is required.

How to implement partial rendering of listview in jquerymobile:

Java code

1. Function queryPublishOrderList (trackOrDealOrInsp, userCode, type, pageNum ){
2. Var queryPublishOrderListURL = "http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.svc/WorkOrderSimpSelByType/Json/" + trackOrDealOrInsp + "/" + userCode + "/" + type + "/" + pageNum;
3. $. Ajax ({
4. Type: 'get ',
5. DataType: "json ",
6. Url: queryPublishOrderListURL,
7. ContentType: 'application/json ',
8. Data: [],
9. Success: function (data ){
10. Var sb = new StringBuffer ();
11. $. Each (data, function (I, item ){
12. // Create a single-column table row object
13. Sb. append ("<ul data-role = 'listview 'data-inset = 'true' data-theme = 'C' data-dividertheme = 'B'> ");
14. Sb. append ("<li data-role = 'LIST-divider '>" + item. work_orders_id + "<span class = 'ui-li-count'>" + I + "</span> </li> ");
15. Sb. append ("<li> <a id = '" + item. work_orders_id + "'href}'inspectorder.html'> ");
16. Sb. append ("<div data-role = 'fieldcontain'> <label for = 'work _ orders_id '> Ticket No: </label> <span id = 'work _ orders_id '> "+ item. work_orders_id + "</span> </div> ");
17. Sb. append ("<div data-role = 'fieldcontain'> <label for = 'founder _ Na'> Creator: </label> <span id = 'founder _ Na'> "+ item. founder_na + "</span> </div> ");
18. Sb. append ("<div data-role = 'fieldcontain'> <label for = 'found _ time'> Creation time: </label> <span id = 'found _ time'> "+ item. found_time + "</span> </div> ");
19. Sb. append ("<div data-role = 'fieldcontain'> <label for = 'Type _ Na'> ticket type: </label> <span id = 'Type _ Na'> "+ item. type_na + "</span> </div> ");
20. Sb. append ("<div data-role = 'fieldcontain'> <label for = 'work _ cont'> ticket content: </label> <span id = 'work _ cont'> "+ item. work_cont + "</span> </div> ");
21. Sb. append ("</a> </li> ");
22. Sb. append ("</ul> ");
23. });
24. Var content = sb. toString ();
25. $ ("# QueryList" Contents .html (content );
26. },
27. Error: function (XMLHttpRequest, textStatus, errorThrown ){
28. Alert ("remote service request error! ");
29. },
30. Complete: function (){
31. $ ("Div [data-role = content] ul"). listview ();
32. }
33. });
34. }

Note:

Listview refreshes the listview component for jquerymobile.

 

$ ("Div [data-role = content] ul"). listview ();

If you want to refresh the internal li of listview, you can use

$ ("Div [data-role = content] ul li"). listview ("refresh ");

Otherwise, the following error is reported:

Jquerymobile listviewcannot call methods on listview prior to initialization; attempted to call method 'refresh'

 

Jquerymobile checkbox can be refreshed in time to obtain its accurate value.

 

Java code

1. Generally, when you log on, there is a two checkbox multiple selection box that remembers the user name and password.
3. Jquerymobile is used as a page. When checkbox is checked, the correct value cannot be obtained.
5. Solution:
7. $ ('Input [type = "checkbox"] '). bind ('click', function (){
8. $ (This). prop ('checked'). checkboxradio ("refresh"); // bind an event to promptly update the checked value of the checkbox
9. });
11. If you want to use js to change the checkbox value, refresh it in time.
13. $ ('Input [type = "checkbox"] '). attr ('checked', false). checkboxradio ("refresh ");
15. $ ('Input [type = "checkbox"] '). attr ('checked', false). checkboxradio ("refresh ");
17. Cause: After Manually changing its value, jquerymobile cannot re-render it. In this way, the value displayed on the page is different from the actual value. (Jquerymobile hides all form elements, and then adds some elements in js to make it easy to beautify the effects of input, select, textarea, and other elements)

Refresh Java code in the drop-down box

1. $ ("# Selectbox" pai.html (optionList). selectmenu ('refresh', true );

Java code

1. Check button
2. $ ("Input [type = 'checkbox']"). attr ("checked", true). checkboxradio ("refresh ");
4. Single button group:
5. $ ("Input [type = 'radio']"). attr ("checked", true). checkboxradio ("refresh ");
7. Select list ::
8. Var myselect = $ ("select # foo ");
9. Myselect [0]. selectedIndex = 3;
10. Myselect. selectmenu ("refresh ");
12. Slide
13. $ ("Input [type = range]"). val (60). slider ("refresh ");
15. Switch (they use slider ):
16. Var myswitch = $ ("select # bar ");
17. Myswitch [0]. selectedIndex = 1;
18. Myswitch. slider ("refresh ");

Select disabled style <select id = "select-choice-1" class = "mobile-selectmenu-disabled ui-state-disabled" disabled = "disabled" name = "select-choice- 1 "aria-disabled =" true ">
<Option value = "standard"> Standard: 7 days </option>
<Option value = "rush"> Rush: 3 days </option>
<Option value = "express"> Express: next day </option>
<Option value = "overnight"> Overnight </option>
</Select> button disabled style <input class = "ui-btn-hidden mobile-button-disabled ui-state-disabled" type = "button" disabled = "disabled" value = "unavailable" aria-disabled = "true">