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" >


Related articles: