Open In App

jQuery UI Sortable serialize() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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 learning the jQuery UI Sortable serialize() method to produce a hash, which can be appended to any URL that easily submits a new item order back to the server. It serializes the sortable’s item IDs into a form/ajax submittable string. This method works with ID as a default attribute, for instance, if the ID of each item is “geeks_value” then the hash that will be generated is “geeks[]=value & geeks[]=value”.

Note: If ID attributes do not include an underscore then serialize method will return an empty string.

Syntax:

Invoking the serialize() method:

$( "Selector" ).sortable( "serialize");

Parameter: This method accepts the option as the parameter that helps to customize the serialization. It is of an object type. It contains 3 values:

  • key: It replaces part[] with the specified value. It is of string type.
  • attribute: The attribute’s name to use for the values & is of string type.
  • expression: The regular expression is used to split the attribute value into key-value parts & is of RegExp type.

Return Type: It returns a hash of String type.

CDN Link: Add jQuery Mobile scripts 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: The below example illustrates the implementation of the jQuery UI Sortable serialize() method.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <title>jQuery UI Sortable serialize method</title>
    <style>
        #sortableList {
            list-style-type: none;
        }
        .geeks {
            margin: 10px;
            background: lightgreen;
            padding: 10px;
            border: 1px solid green;
            font-size: 25px;
        }
    </style>
    <script>
        $(function() {
            $("#sortableList").sortable({
                update: function(event, ui) {
                    var hash = $(this).sortable('serialize');
                    $("#sortedList").text(hash);
                }
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
          
        <h2>jQuery UI Sortable serialize method</h2>
          
        <ul id="sortableList">
            <li id="Tutorials_One" class="geeks">
                1.Free Tutorials 
            </li>
            <li id="Articles_Two" class="geeks">
                2.Millions of articles 
            </li>
            <li id="Webinars_Three" class="geeks">
                3.Webinars by Industry Experts 
            </li>
            <li id="Courses_Four" class="geeks">
                4.Live, Online and Classroom Courses 
            </li>
        </ul>
          
        <h2>Hash produces by serialize method is </h2>
          
        <h2>
            <span id='sortedList'></span>
        </h2
    </center>
</body>
</html>


Output:

jQuery UI Sortable serialize() Method

jQuery UI Sortable serialize() Method

Reference: https://api.jqueryui.com/sortable/#method-serialize



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