Summary of various refresh methods for jquerymobile partial rendering

Summary of various refresh methods for jquerymobile partial rendering_jquery

WBOY

Release： 2016-05-16 16:57:13

Original

1138 people have browsed it

On the JQueryMobile page, an overall rendering is performed during the first initialization. Dynamically generated pages require partial rendering.

How to implement partial rendering of listview in jquerymobile:

Copy the code The code is 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){
                 //创建一个工单列表行对象
                sb.append("

" item.work_orders_id "" i "

");
                sb.append("
工单号:" item.work_orders_id "
");
                sb.append("
创建人:" item.founder_na "
");
                sb.append("
创建时间:" item.found_time "
");
                sb.append("
工单类型:" item.type_na "
");
                sb.append("
工单内容:" item.work_cont "
");
                sb.append("

");
              });
              var content = sb.toString();
                 $("#queryList").html(content);
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
                alert("请求远程服务错误!");
        },
        complete: function() {
              $("p[data-role=content] ul").listview();
        }
    });
}

Remarks:

Listview refreshes the listview component for jquerymobile.

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

If you want to refresh the li inside the listview, you can use

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

Otherwise the error will be reported as follows:

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

Jquerymobile checkbox needs to be refreshed in time to obtain its accurate value

Copy code The code is as follows:

 Generally, when logging in, there are two checkboxes for remembering username and password. 

Using jquerymobile to make the page, when the checkbox is checked, it cannot always get its correct value. 

Solution: 
[code]
$('input[type="checkbox"]').bind('click',function() { 
 $(this). prop('checked').checkboxradio("refresh"); // Bind events to update the checked value of the checkbox in time 
 }); 

If you want to use js to change the checkbox The value must also be refreshed in time.

$('input [type="checkbox"]').attr('checked',false).checkboxradio("refresh");
$('input [type="checkbox"] ').attr('checked',false).checkboxradio("refresh");

Cause: jquerymobile cannot re-render after manually changing its value. In this way, the value displayed on the page is different from the actual value. (jquerymobile hides all form elements, and then uses js to add some elements to beautify the effects of input, select, textarea and other elements)
[/code]
Drop-down box refresh

Copy code The code is as follows:

$("#selectbox").html(optionList).selectmenu('refresh', true ); 🎜>$("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"); 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

button disabled styleui-btn-hidden mobile-button-disabled
ui-state- disabled
" type="button"
disabled="disabled"
value="not available"
aria-disabled="true">