In the first initialization of the Jquerymobile page for a whole rendering, dynamically generated needs local rendering.
The method of implementing ListView Local rendering in Jquerymobile:
Copy Code code as follows:
function Querypublishorderlist (trackordealorinsp,usercode,type,pagenum) {
var querypublishorderlisturl= "Http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.svc/WorkOrderSimpSelByType /json/"+trackordealorinsp+"/"+usercode+"/"+type+"/"+pagenum";
$.ajax ({
Type: ' Get ',
DataType: "JSON",
Url:querypublishorderlisturl,
ContentType: ' Application/json ',
Data: [],
Success:function (data) {
var sb = new StringBuffer ();
$.each (data, function (I,item) {
Create a single list row object
Sb.append ("<ul data-role= ' ListView ' data-inset= ' true ' data-theme= ' C ' data-pidertheme= ' B ' >");
Sb.append ("<li data-role= ' List-pider ' >" +item.work_orders_id+ "<span class= ' Ui-li-count ' >" +i+ "</ Span></li> ");
Sb.append ("<li><a id= '" +item.work_orders_id+ "' href= ' inspectorder.html ' >");
Sb.append ("<p data-role= ' fieldcontain ' ><label for= ' work_orders_id ' > Work number: </label><span id= '" work_orders_id ' > ' +item.work_orders_id+ "</span></p>");
Sb.append ("<p data-role= ' fieldcontain ' ><label for= ' Founder_na ' > Founder: </label><span id= ' founder _na ' > ' +item.founder_na+ "</span></p>");
Sb.append ("<p data-role= ' fieldcontain ' ><label for= ' found_time ' > Creation time: </label><span id= ' Found_ Time ' > ' +item.found_time+ "</span></p>");
Sb.append ("<p data-role= ' fieldcontain ' ><label for= ' Type_na ') > Work list type: </label><span id= ' Type_na ' > "+item.type_na+" </span></p> ');
Sb.append ("<p data-role= ' fieldcontain ' ><label for= ' work_cont ' > Work order Contents: </label><span id= ' Work_" Cont ' > ' +item.work_cont+ "</span></p>");
Sb.append ("</a></li>");
Sb.append ("</ul>");
});
var content = sb.tostring ();
$ ("#queryList"). HTML (content);
},
Error:function (XMLHttpRequest, Textstatus, Errorthrown) {
Alert ("Request remote service Error!");
},
Complete:function () {
$ ("P[data-role=content] ul"). ListView ();
}
});
}
Note:
ListView is refreshed for Jquerymobile for ListView components.
$ ("P[data-role=content] ul"). ListView ();
If you want to refresh the internal Li for ListView, you can use the
$ ("P[data-role=content] ul li"). ListView ("Refresh");
Otherwise reported errors are as follows:
Jquerymobile Listviewcannot call methods on ListView prior to initialization; Attempted to call method ' Refresh '
Jquerymobile checkbox Refresh in time to get its exact value
Copy Code code as follows:
When you log in normally, you have a two checkbox that remembers the username and remembers the password. Multi-selection box
Use Jquerymobile to do the page, when the checkbox is checked always can not get its correct value.
Solution:
[Code]
$ (' input[type= ' checkbox '] '). bind (' click ', function () {
$ (this). Prop (' checked '). Checkboxradio ("refresh"); Binding events Update the checked value of a checkbox in a timely manner
});
If you want to use JS to change the value of the checkbox also need to refresh in time.
$ (' Input [type= checkbox '] '). attr (' checked ', false). Checkboxradio ("refresh");
$ (' Input [type= checkbox '] '). attr (' checked ', false). Checkboxradio ("refresh");
Reason: Jquerymobile cannot be rendered again because the value is changed manually. This allows the page to display a different value than the actual value. (Jquerymobile the form elements are hidden, and then use JS to add some elements easy to beautify the input, select, textarea and other elements of the effect)
[/code]
Dropdown box Refresh
Copy Code code as follows:
$ ("#selectbox"). HTML (optionlist). Selectmenu (' Refresh ', true);
Copy Code code as follows:
Check button
$ ("input[type= ' checkbox ']"). attr ("Checked", true). Checkboxradio ("refresh");
radio Button Group:
$ ("input[type= ' Radio ']"). attr ("Checked", true). Checkboxradio ("refresh");
SELECT list::
var myselect = $ ("Select#foo");
Myselect[0].selectedindex = 3;
Myselect.selectmenu ("Refresh");
Slide Bar
$ ("Input[type=range]"). val. Slider ("Refresh");
switch (they use slider):
var myswitch = $ ("Select#bar");
Myswitch[0].selectedindex = 1;
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 day</option
<option value= "Rush" >rush:3 days</option>
<option value= "Express" >express:next Day </option>
<option value= "overnight" >OVERNIGHT</OPTION>
</select>
button Disables style
<input class= " ui-btn-hidden mobile-button-disabled ui-state-disabled "type= button" disabled= "disabled" value= "not Available" &NBSP; aria-disabled= "true "
" "