Summary of the various refresh methods for local rendering in jquerymobile
- 2020-03-30 02:12:31
- OfStack
In the JQueryMobile page, a full rendering is performed at the first initialization, and dynamic generation requires local rendering.
Implement the listview local rendering method in jquerymobile:
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){
//Creates a worksheet table row object & NBSP;
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 order no. :</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 order type :</label><span id='type_na'>"+item.type_na+"</span><img src='../../images/beforeforward.png' style='float: right'/></p>");
sb.append("<p data-role='fieldcontain'><label for='work_cont'> The repair order content :</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(" Error requesting remote service !");
},
complete: function() {
$("p[data-role=content] ul").listview();
}
});
}
Remark:
The listview is refreshed against the jquerymobile against the listview component.
$(" p [data - role = the content] ul "). The listview ();
You can use it if you want to refresh the li inside the listview
$(" p [data - role = the content] ul li "). The listview (" refresh ");
Otherwise, the error is as follows:
Querymobile listviewcannot call methods on listview prior to initialization; Initiate to call method 'refresh'
The jquerymobile checkbox refreshes in time to get its exact value
When you log in Remember the user name Remember the password Of the two checkbox Boxes,
with jquerymobile Do the page When the check checkbox Always fails to get its correct value.
Solutions:
[code]
$('input[type="checkbox"]').bind('click',function() {
$(this).prop('checked').checkboxradio("refresh"); //Bind events to update the checked value & checks of the checkbox;
});
If you want to use js to change the value of the checkbox, refresh it.
$(' input [type = "checkbox"] "). The attr (" checked ", false). Checkboxradio (" refresh ");
$(' input [type = "checkbox"] "). The attr (" checked ", false). Checkboxradio (" refresh ");
Reason: because the jquerymobile cannot rerender after manually changing its value. The values displayed on the page are different from the actual values. Jquerymobile hides the form elements, and then USES js to add some elements to beautify the effect of input, select,textarea, etc.)
[/ code]
The drop-down box refreshes
$("#selectbox").html(optionList).selectmenu('refresh', true);
Check button
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
Radio button group :
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
Selection list ::
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
slider
$("input[type=range]").val(60).slider("refresh");
switch (they use slider):
var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");
Select disable style
< Select id = "select - choice - 1" class = "mobile - selectmenu - disabled The UI - state - disabled " Disabled = "disabled" name = "select - choice - 1" Aria - disabled = "true" >
< The option value = "standard" > Standard: 7 day< / option>
< The option value = "rush" > Rush: 3 days< / option>
< The option value = "express" > Express: next day< / option>
< The option value = "was" > Overnight< / option>
< / select>
Button disabled style
< The input class = "BTN -- hidden  UI; Mobile - button - disabled The UI - state - disabled "type =" button " Disabled ="disabled"value=" not available "& disabled; Aria - disabled = "true" >