Implementation method of data refresh in jquery Mobile interface _jquery

JQM. When we update the data in some page tags (such as: ListView, RadioButtons, checkboxes, select Menus), we must do the refresh operation.

Why do I have to do the refresh operation? Because jqm in the page rendering, in order to make the style similar to the client program, hide the original label and then use some new tags and custom style to show the original label, in fact, the new style of the label is not the original label, So updating the data must be done with the refresh operation.

The refresh of all kinds of labels

1.Textarea fields

$ (' body '). Prepend (' <textarea id= "Mytextarea" ></textarea> ");
$ (' #myTextArea '). TextInput ();

2.Text input Fields

$ (' body '). Prepend (' <input type= "text" id= "MyTextField"/> ");
$ (' #myTextField '). TextInput ();

3.Buttons

$ (' body '). Append (' <a href= "" Data-theme= "E" id= "Mynewbutton" >testing</a> ");
$ (' #myNewButton '). button ();

4.Combobox or select dropdowns

<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

<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

<div data-role= "Fieldcontain" >
<label for= "slider-2" >input slider:</label>
Type= "Range" id= "slider-2" value= "min=" 0 "max="/>
</div>
 
$ (' #slider-2 '). val. Slider (' Refresh ');

7.Toggle switch

<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

<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

<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 ');

Above this jquery mobile interface data Refresh implementation method is small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.