收藏总结-关于jquery mobile动态刷新listview的几种方法以及其他标签的refresh

第一种我经常使用的获取后台数据，动态添加刷新的方法

解：ajax json解析数据在遍历循环出来

$.each(obj.data,function(i,item){
	$("#list").append("<li>+"<p><strong>"+item.date+"</strong></p>"+"</li>");
})
	$("#list").listview("refresh");

在该页面我还做了一个下拉刷新和上拉加载数据的操作，以上这个是页面点击进来onload事件直接加载在页面显示，但是无法滚动

解决办法：在后面直接添加了这条代码就行了myScroll.refresh();

第二种直接加载在listview之后的数据

  <script>
       function myFunction() {
              var ul = document.getElementById("myul");
              var li1 = "<li data-role=\"fieldcontain\">信息2</li>";
              var li2 = "<li data-role=\"fieldcontain\">信息3</li>";
              ul.innerHTML += li1;
              ul.innerHTML += li2;
               
              //刷新jQuery Mobile样式
              $('#myul').listview('refresh');
            }
   </script>

第三种网上常见的for循环添加listview数据 示例如下

 for (i=0;i<=5;i++){
                var list = $("<li>candoudou-"+i+"</li>");
                $("#list").append(list).find("li:last").hide();
                $('ul').listview('refresh');
                $("#list").find("li:last").slideDown(300);
                }

一下是网上看到好的例子贴上，下次需要的时候就方便查看了

在使用js或者jQuery获取控件（例如：button、checkbox、radiobutton等）的值时，也是需要先刷新，否则无法获取到最新的值。

下面列出常用的标签的refresh操作，其他的可以举一反三。
1.  Listview的refresh操作:
$('#mylistid').listview('refresh');

2. select menu的refresh操作:
var myselect = $("#myselect");
myselect[0].selectedIndex = 2;
myselect.selectmenu("refresh");

3. Checkboxes的refresh操作:
$("#mycheckboxid").attr("checked",true).checkboxradio("refresh");

4. Radio buttons的refresh操作:
$("#myradioid").attr("checked",true).checkboxradio("refresh");

根据各个版本的不同 listview的查询增删等例子【收藏】

一：JqueryMobile1.3 .2

1）为Listview动态添加查询功能，代码如下：

$(".ui-listview-filter").remove(); $('#listview').listview('option', 'filter', true); $('#listview').trigger("listviewcreate");

2）为Listview动态删除查询功能，代码如下：

$(".ui-listview-filter").remove(); $('#listview').listview('option', 'filter', false); $('#listview').trigger("listviewcreate");

二：JqueryMobile1.4 .2

1）为Listview动态添加查询功能，代码如下：

$("#listview'").filterable(); $("#listview'").filterable( "option", "filterPlaceholder", "请输入姓名查询...");

2）为Listview动态删除查询功能，代码如下：

$("#listview'").filterable("destroy");

扩展--各个标签的加载刷新例子【收藏】

JQM里面当我们更新了某些页面标签(如: listview, radiobuttons, checkboxes, select menus)里的数据时,必须做refresh操作.

为什么必须做refresh操作操作呢?因为JQM在做页面渲染的时候,为了使样式跟客户端程序相似, 隐藏了原始的标签然后用一些新的标签和自定义的样式来表现原标签,其实新样式的标签已经不是原来的标签,所以更新了数据必须做refresh操作.

各类标签的刷新

1.Textarea fields

1 2	$( 'body' ).prepend( '<textarea id="myTextArea"></textarea>' ); $( '#myTextArea' ).textinput();

2.Text input fields

1 2	$( 'body' ).prepend( '<input type="text" id="myTextField" />' ); $( '#myTextField' ).textinput();

3.Buttons

1 2	$( 'body' ).append( '<a href="" data-theme="e" id="myNewButton">testing</a>' ); $( '#myNewButton' ).button();

4.Combobox or select dropdowns

1 2 3 4 5 6 7 8 9 10

<label  for = "sCountry" >Country:</label> <select name= "sCountry"  id= "sCountry" > <option value= "" >Where You Live:</option> <option value= "ad" >Andorra</option> <option value= "ae" >United Arab Emirates</option> </select>    var  myselect = $( "#sCountry" ); myselect[0].selectedIndex = 3; myselect.selectmenu( 'refresh' );

5.Listviews

1 2 3 4 5 6 7

<ul id= "myList"  data-role= "listview"  data-inset= "true" > <li>Acura</li> <li>Audi</li> <li>BMW</li> </ul>    $( '#mylist' ).listview( 'refresh' );

6.Slider control

1 2 3 4 5 6

<div data-role= "fieldcontain" > <label  for = "slider-2" >Input slider:</label> <input type= "range"  id= "slider-2"  value= "25"  min= "0"  max= "100"  /> </div>    $( '#slider-2' ).val(80).slider( 'refresh' );

7.Toggle switch

1 2 3 4 5 6 7 8 9 10 11

<div data-role= "fieldcontain" > <label  for = "toggle" >Flip  switch :</label> <select name= "toggle"  id= "toggle"  data-role= "slider" > <option value= "off" >Off</option> <option value= "on" >On</option> </select> </div>    var  myswitch = $( "#toggle" ); myswitch[0].selectedIndex = 1; myswitch .slider( "refresh" );

8.Radio buttons

1 2 3 4 5 6 7 8 9 10 11 12 13

<div data-role= "fieldcontain" >      <fieldset data-role= "controlgroup"  data-type= "horizontal" >        <legend>Layout view:</legend>            <input type= "radio"  name= "radio-view"  value= "list"  />            <label  for = "radio-view-a" >List</label>            <input type= "radio"  name= "radio-view"  value= "grid"  />            <label  for = "radio-view-b" >Grid</label>            <input type= "radio"  name= "radio-view"  value= "gallery"  />            <label  for = "radio-view-c" >Gallery</label>      </fieldset> </div>    $( "input[value=grid]" ).attr( 'checked' , true ).checkboxradio( 'refresh' );

9.Checkboxes

1 2 3 4 5 6 7 8 9

<div data-role= "fieldcontain" > <fieldset data-role= "controlgroup" > <legend>Agree to the terms:</legend> <input type= "checkbox"  name= "checkbox-1"  id= "checkbox-1"  class= "custom"  /> <label  for = "checkbox-1" >I agree</label> </fieldset> </div>    $( '#checkbox-1' ).attr( 'checked' , true ).checkboxradio( 'refresh' );