Implementation method of data refresh in jquery Mobile interface _jquery

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.