Summary of various refresh methods for jquerymobile partial rendering_jquery

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("<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'>工单号:</label><span id='work_orders_id'>" item.work_orders_id "</span></p>"); 
                sb.append("<p data-role='fieldcontain'><label for='founder_na'>创建人:</label><span id='founder_na'>" item.founder_na "</span></p>"); 
                sb.append("<p data-role='fieldcontain'><label for='found_time'>创建时间:</label><span id='found_time'>" item.found_time "</span></p>"); 
                sb.append("<p data-role='fieldcontain'><label for='type_na'>工单类型:</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'>工单内容:</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("请求远程服务错误!"); 
        }, 
        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

<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 disabled style<input class="ui-btn-hidden mobile-button-disabled
ui-state- disabled
" type="button"
disabled="disabled"
value="not available"
aria-disabled="true">