Added documentation to explain how to use the refresh method on many form elements when you manipulate them. This will hopefully help a lot of people who were confused by this!

docs/forms/docs-forms.html

@@ -51,7 +51,7 @@
 </code></pre>
 
 
-	<p>Or, if you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>"[data-role="none"]</code>. Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
+	<p>Or, if you'd like to prevent auto-initialization without adding attributes to your markup, you can customize the selector that is used for preventing auto-initialization by setting the page plugin's <code>keepNative</code> option (which defaults to <code>[data-role="none"]</code>. Be sure to configure this option inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>
 		<pre><code>
 $(document).bind('mobileinit',function(){
 	<strong>$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";</strong>
@@ -76,7 +76,43 @@ $(document).bind('mobileinit',function(){
 &lt;/div&gt;
 </code></pre>
 
+        <h2>Refreshing form elements</h2>
+        
+        <p>Every form control -- where applicable -- has a refresh method. Here are some examples:</p>
 
+<p>Checkboxes:</p>
+
+<code>
+$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
+</code>
+
+<p>Radios:</p>
+<code>
+$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
+</code>
+
+<p>Selects:</p>
+<code><pre>
+var myselect = $("select#foo");
+myselect[0].selectedIndex = 3;
+myselect.selectmenu("refresh");
+</pre></code>
+
+<p>Sliders:</p>
+<code>
+$("input[type=range]").val(60).slider("refresh");
+</code>
+
+<p>Flip switches (they use slider):</p>
+
+<code><pre>
+var myswitch = $("select#bar");
+myswitch[0].selectedIndex = 1;
+myswitch .slider("refresh");
+</pre></code>
+
+<p>We're considering adding a refresh method to forms to let the framework refresh all the individual elemnts withing but that is a future enhancement.</p>
+        
 	</div><!-- /content -->
 </div><!-- /page -->
 

docs/forms/forms-checkboxes.html

@@ -97,6 +97,14 @@
 		    </fieldset>
 		</div>
 
+<h2>Refreshing a checkbox</h2>
+        
+<p>If you manipulate a radiobutton via JavaScript, you must call the refresh   method on it to update the visual styling. Here is an example:</p>
+<code>
+$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
+</code>
+
+
 
 	</form>
 	

docs/forms/forms-radiobuttons.html

@@ -113,6 +113,18 @@
 		</div>
 	-->
 		
+        
+        
+<h2>Refreshing a radio button</h2>
+        
+<p>If you manipulate a radio button via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:</p>
+
+
+<code>
+$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
+</code>
+
+
 	</form>
 	
 	

docs/forms/forms-selects.html

@@ -369,6 +369,19 @@ $.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;
 			<option value="delete">Delete user</option>
 		</select>
 	</div>
+    
+            
+        
+<h2>Refreshing a select</h2>
+        
+<p>If you manipulate a select via JavaScript, you must call the refresh  method on it to update the visual styling. Here is an example:</p>
+
+<code><pre>
+var myselect = $("select#foo");
+myselect[0].selectedIndex = 3;
+myselect.selectmenu("refresh");
+</pre></code>
+    
 	</form>
 	</div><!-- /content -->
 </div><!-- /page -->

docs/forms/forms-slider.html

@@ -50,6 +50,14 @@
 			<p>Sliders also respond to the keyboards shortcuts. To increase the current value the Right Arrow, Up Arrow, and Page Up keys can be used. To decrease the current value the Left Arrow, Down Arrow, and Page Down keys can be used. To move the slider to its minimum or maximum value use the Home and End keys respectively.</p>
 
 
+<h2>Refreshing a slider</h2>
+        
+<p>If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:</p>
+
+<code>
+$("input[type=range]").val(60).slider("refresh");
+</code>
+
 	</form>
 
 	</div><!-- /content -->

docs/forms/forms-switch.html

@@ -45,6 +45,15 @@
 
 
 
+<h2>Refreshing a flip switch</h2>
+        
+<p>If you manipulate a flip switch via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:</p>
+
+<code><pre>
+var myswitch = $("select#bar");
+myswitch[0].selectedIndex = 1;
+myswitch .slider("refresh");
+</pre></code>
 
 	</form>