Summary of various refreshing methods for jquerymobile local rendering _jquery

Source: Internet
Author: User

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 "

" "

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.