Skip to content
Related Articles

Related Articles

jQuery Mobile Listview refresh() Method

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 19 May, 2022

jQuery Mobile is a set of HTML5 based user interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive websites accessible to mobile, tabs, and desktops. jQuery Listview is a widget used to create beautiful lists. It is a simple and responsive Listview used to view the unordered lists.

In this article, we will be using the jQuery Mobile refresh() method used to update the list items UI when the DOM (Document Object Model) is modified after the page load. The list may be modified using JavaScript on the client side.

Syntax: The refresh() method does not take any parameter and when called, the Listview gets updated UI.

function refresh() {
    $(".items").listview("refresh");
}

CDNs Link: Use the following CDNs for jQuery Mobile.

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: In this example, there is a pre-populated list with some items. Next, there are two input sections and “Click to add” which will add a new list item. The Refresh button that refreshes the ListView UI.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>jQuery Mobile Listview</title>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <center>
    <h1>Geeksforgeeks</h1>
    <strong>jQuery Mobile Listview refresh() Method</strong>
    </center>
    <ul class="items" data-role="listview">
        <li>
            <a href=
            target="_blank">
            Data Structures
            </a>
        </li>
        <li>
            <a href=
            target="_blank">
            Interview preparation
            </a>
        </li>
        <li>
            <a href=
            target="_blank">
            Java Programming
            </a>
        </li>
    </ul>
    <div style="padding: 30px;">
        <label for="name">Name</label>
        <input type="text" name="name" id="name">
        <label for="link">Link</label>
        <input type="text" name="link" id="link">
        <button onclick="addItem()">Click to add</button>
    </div>
    <button onclick="refresh()"
            style="background-color:green;">
        Refresh</button>
    <script>
        $(".items").listview({
            icon: "arrow-r",
        });
        function addItem() {
            var item = "<li>" +
                "<a href=\"" + $("#link").val() + "\" target=\"_blank\">" +
                $("#name").val() +
                "</a>" +
                "</li>"
            $(".items").append(item);
 
            $("#link").val("");
            $("#name").val("");
        }
        function refresh() {
            $(".items").listview("refresh");
        }
    </script>
</body>
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!