Home Web Front-end HTML Tutorial Various refreshes of jquerymobile partial rendering_html/css_WEB-ITnose

Various refreshes of jquerymobile partial rendering_html/css_WEB-ITnose

Jun 24, 2016 pm 12:03 PM
refresh local rendering

   在JQueryMobile页面在第一次初始化进行一次整体渲染,动态生成的需要局部渲染。

在jquerymobile实现listview局部渲染的方法:

Java代码  

  1. function queryPublishOrderList(trackOrDealOrInsp,userCode,type,pageNum){  
  2.     var queryPublishOrderListURL="http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.svc/WorkOrderSimpSelByType/Json/"+trackOrDealOrInsp+"/"+userCode+"/"+type+"/"+pageNum;  
  3.     $.ajax({  
  4.         type: 'get',  
  5.         dataType : "json",  
  6.         url: queryPublishOrderListURL,  
  7.         contentType: 'application/json',  
  8.         data: [],  
  9.         success: function(data) {  
  10.               var sb = new StringBuffer();   
  11.               $.each(data, function(i,item){  
  12.                  //创建一个工单列表行对象  
  13.                 sb.append("");
  14.           }); 🎜> },
  15. error:function(XMLHttpRequest, textStatus, errorThrown){
  16. alert("Request remote service error!");
  17. },
  18. Complete: function( ) {                                                                                      🎜>}
  19. Note:
  20. listview is refreshed for jquerymobile for listview component.
  21. $("div[data-role=content] ] ul").listview();
  22. If you want to refresh the li inside the listview, you can use
  23. $("div[data-role=content] ul li").listview(" refresh");
Otherwise, the error is reported as follows:

jquerymobile listviewcannot call methods on listview prior to initialization; attempted to call method 'refresh'

jquerymobile checkbox needs to be refreshed in time to obtain its accurate value

Java code

Generally available when logging in There are two checkbox multi-select boxes for remembering username and remembering password

Using jquerymobile to make the page, when the checkbox is checked, it cannot always get its correct value.

Solution:

$('input[type="checkbox"]').bind('click',function() {
  1. $(this).prop('checked').checkboxradio("refresh"); // The binding event updates the checked value of the checkbox in time
  2. });
  3. If you want to use js to change the value of the checkbox, you must refresh it in time.
  4. $('input [type="checkbox"]').attr('checked',false).checkboxradio("refresh");
  5. $('input [type="checkbox"]').attr('checked',false).checkboxradio("refresh");
  6. Reason: Because it is manual jquerymobile cannot re-render after changing its value. In this way, the value displayed on the page is different from the actual value. (jquerymobile hides the form elements, and then uses js to add some elements to beautify the effects of input, select, textarea and other elements)
  7. Refresh the drop-down box
  8. Java code
  9. $("#selectbox").html(optionList).selectmenu('refresh', true);

Java code
    1. Check button
    2. $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
    3. Radio button group:
    4. $("input[type='radio']").attr("checked",true).checkboxradio("refresh");
    5. Select list::
    6. var myselect = $("select#foo");
    7. myselect[0].selectedIndex = 3;
    8. myselect.selectmenu("refresh");
    9. Slider
    10. $("input[type=range]").val(60).slider ("refresh");
    11. switch (they use slider):
    12. var myswitch = $("select#bar");
    13. myswitch [0].selectedIndex = 1;
    14. myswitch .slider("refresh");

    select disable style

    button disabled style

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

6 Ways to Refresh Web Pages on iPhone 6 Ways to Refresh Web Pages on iPhone Feb 05, 2024 pm 02:00 PM

When you browse the web on your iPhone, the loaded content is temporarily stored as long as the browser app remains open. However, the website updates content regularly, so refreshing the page is an effective way to clear out old data and see the latest published content. This way, you always have the latest information and experiences. If you want to refresh the page on iPhone, the following post will explain you all the methods. How to Refresh Web Pages on Safari [4 Methods] There are several methods to refresh the pages you are viewing on the Safari App on iPhone. Method 1: Use the Refresh Button The easiest way to refresh a page you have open on Safari is to use the Refresh option on your browser's tab bar. If Safa

F5 refresh key not working in Windows 11 F5 refresh key not working in Windows 11 Mar 14, 2024 pm 01:01 PM

Is the F5 key not working properly on your Windows 11/10 PC? The F5 key is typically used to refresh the desktop or explorer or reload a web page. However, some of our readers have reported that the F5 key is refreshing their computers and not working properly. How to enable F5 refresh in Windows 11? To refresh your Windows PC, just press the F5 key. On some laptops or desktops, you may need to press the Fn+F5 key combination to complete the refresh operation. Why doesn't F5 refresh work? If pressing the F5 key fails to refresh your computer or you are experiencing issues on Windows 11/10, it may be due to the function keys being locked. Other potential causes include the keyboard or F5 key

How to render orthogonal top view in Kujiale_Tutorial on rendering orthogonal top view in Kujiale How to render orthogonal top view in Kujiale_Tutorial on rendering orthogonal top view in Kujiale Apr 02, 2024 pm 01:10 PM

1. First open the design plan to be rendered in Kujiale. 2. Then open top view rendering under the rendering menu. 3. Then click Orthogonal in the parameter settings in the top view rendering interface. 4. Finally, after adjusting the model angle, click Render Now to render the orthogonal top view.

How to quickly refresh a web page? How to quickly refresh a web page? Feb 18, 2024 pm 01:14 PM

Page refresh is very common in our daily network use. When we visit a web page, we sometimes encounter some problems, such as the web page not loading or displaying abnormally, etc. At this time, we usually choose to refresh the page to solve the problem, so how to refresh the page quickly? Let’s discuss the shortcut keys for page refresh. The page refresh shortcut key is a method to quickly refresh the current web page through keyboard operations. In different operating systems and browsers, the shortcut keys for page refresh may be different. Below we use the common W

Is vue page rendering synchronous or asynchronous? Is vue page rendering synchronous or asynchronous? Dec 13, 2022 pm 07:26 PM

Vue page rendering is asynchronous. Vue uses asynchronous rendering, which can improve performance; if asynchronous updates are not used, the current component will be re-rendered every time the data is updated. For performance reasons, Vue will asynchronously update the view after this round of data updates.

Vue error: v-html cannot be used correctly to render dynamic HTML code. How to solve it? Vue error: v-html cannot be used correctly to render dynamic HTML code. How to solve it? Aug 19, 2023 pm 12:27 PM

Vue error: v-html cannot be used correctly to render dynamic HTML code. How to solve it? Introduction: In Vue development, we often need to dynamically render HTML code to display rich text content or dynamically generated user input. Vue provides the v-html directive to implement this function. However, sometimes we may encounter problems that cannot correctly render dynamic HTML code using v-html. This article will explore the causes of this problem and provide solutions. Problem description: In Vue, when we use v

Vue error: Unable to correctly use v-html to render HTML code, how to solve it? Vue error: Unable to correctly use v-html to render HTML code, how to solve it? Aug 26, 2023 am 11:25 AM

Vue error: Unable to correctly use v-html to render HTML code, how to solve it? Vue is a popular JavaScript framework that can help us build interactive user interfaces. In Vue, we can use the v-html directive to render HTML code into templates. However, sometimes we may encounter a problem: the HTML code cannot be rendered correctly using v-html. This article will describe some common causes and solutions to help you solve this problem. The first possible reason is that the

What should I do if the value disappears after the react page is refreshed? What should I do if the value disappears after the react page is refreshed? Dec 29, 2022 am 11:11 AM

The solution to the value disappearing after the react page is refreshed: 1. Refresh the page and check whether the data in the state will be cleared; 2. Use the "const name = location.query.name; const id = location.query.id;" method By adding parameters to the jump link, you can pass the parameters and refresh the page without losing the data.

See all articles