Open In App

jQuery Mobile Listview refresh() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:



Last Updated : 19 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads