jQuery UI Sortable refresh() Method
Last Updated :
12 Jan, 2022
jQuery UI is a web-based technology and consists of various GUI widgets, visual effects, and themes. These features can be implemented using the jQuery JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily.
In this article, we will be using the jQuery UI Sortable refresh() Method to refresh the sortable items. It riggers the reloading of all sortable items and allow new items to be recognized.
Syntax:
$( ".selector" ).sortable( "refresh" );
Parameter: This method does not accept any parameter.
Return type: This method returns an object value.
CDN Link: Below are the jQuery UI CDN links that will be needed for your project.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src= "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src= "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Example: This example describes the uses of the jQuery UI Sortable refresh() Method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href=
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script
src=
"https://code.jquery.com/jquery-1.12.4.js">
</script>
<script
src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
#sortable {
list-style-type: none;
width: 200px;
}
#sortable li {
margin: 10px 0;
padding: 0.5em;
font-size: 20px;
height: 20px;
color: black;
background-color: #02990c;
}
#btn1, #btn2
{
margin-left: 50px;
padding: 0.5;
font-size: 18px;
height: 30px;
width: 100px;
}
</style>
<script>
$(function () {
$("#btn1").on('click', function () {
$("#sortable").sortable("refresh");
alert("Widget Refreshed");
});
});
$(function () {
$("#sortable").sortable();
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h4>jQuery UI Sortable refresh() Method</h4>
<ul id="sortable">
<li class="ui-state-default">Geeks1</li>
<li class="ui-state-default">Geeks2</li>
<li class="ui-state-default">Geeks3</li>
<li class="ui-state-default">Geeks4</li>
<li class="ui-state-default">Geeks5</li>
</ul>
<div class="res"></div>
<div>
<input type="button" id="btn1"
value="Refresh">
</div>
</center>
</body>
</html>
Output:
Reference: https://api.jqueryui.com/sortable/#method-refresh
Similar Reads
jQuery UI Selectable refresh() Method jQuery UI consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is great for building UI interfaces for the webpages. It can be used to build highly interactive web applications or can be used to add widgets easily. In this article, we will b
2 min read
jQuery UI Tabs refresh() Method jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Tabs widget is used to create a single content area with multiple panels that are associated with a header in a list. T
3 min read
jQuery UI Sortable refreshPositions() Method jQuery UI is a web-based technology and consists of various GUI widgets, visual effects, and themes. These features can be implemented using the jQuery JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web appl
2 min read
jQuery UI Sortable serialize() Method jQuery UI is a web-based technology and consists of various GUI widgets, visual effects, and themes. These features can be implemented using the jQuery JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web appl
2 min read
jQuery UI Sortable option() Method jQuery UI is a web-based technology and consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add
3 min read