How to design editable listview using jQuery Mobile plugin?

Last Updated : 15 Dec, 2020

In this article, we will learn how to design an editable listview feature using the jQuery mobile plugin. The plugin provides an intuitive user interface to add or delete list items to the existing list.

To design and implement the plugin, please download the required pre-compiled files or libraries from the link and save it in your working folder. The file path names should be taken care of while coding.

Note: Please use the following links in the head section of the HTML code for execution as shown below.

<link href=”http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.css”
rel=”stylesheet” type=”text/css”/>

<link href=”editable-listview.css”
rel=”stylesheet” type=”text/css”/>

<script src=”http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js”></script>

<script src=”http://code.jquery.com/jquery-2.1.1.js”></script>

<script src=”editable-listview.js”></script>

Example 1: The following example demonstrates a simple editable listview using the jQuery mobile plugin. The user can add and delete fruit names in the list as shown in the below output.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8" /> 
        <meta name="viewport" 
              content="width=device-width, initial-scale=1" /> 
        <link rel="stylesheet"
              href= 
"http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.css"/> 
  
        <link rel="stylesheet" href="editable-listview.css"/> 
        <script src= 
"http://code.jquery.com/jquery-2.1.1.js"> 
        </script> 
        <script src= 
"http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js"> 
        </script> 
        <script src="editable-listview.js"></script> 
    </head> 
    <body style="padding: 20px;"> 
        <h2>jQuery Mobile Editable Listview</h2> 
        <div style="padding: 20px;"> 
            <ul id="mylistID" data-role="listview"
                data-item-name="fruitName"> 
                <li>Pineapple</li> 
                <li>Mango</li> 
                <li>Orange</li> 
                <li>Banana</li> 
            </ul> 
            <br /> 
        </div> 
  
        <script> 
            var $list = $("#mylistID").listview({ 
                editable: true, 
                title: "Fruits", 
                emptyTitle: "No Fruits", 
            }); 
        </script> 
    </body> 
</html> 

Output:

Before editing:

After editing:

Example 2: The following example demonstrates another editable listview with some added properties. The form “id” should match the data-editable-form attribute on the “ul” tag and the data-editable attribute is set to “true”.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8" /> 
        <meta name="viewport"
              content="width=device-width, initial-scale=1"/> 
        <link rel="stylesheet"
              href= 
"http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.css"/> 
        <link rel="stylesheet" href="editable-listview.css" /> 
        <script src= 
"http://code.jquery.com/jquery-2.1.1.js"> 
        </script> 
        <script src= 
"http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js"> 
        </script> 
        <script src="editable-listview.js"></script> 
    </head> 
  
    <body style="padding: 20px;"> 
        <h2>jQuery Mobile editable listview</h2> 
        <div style="padding: 20px;"> 
            <p><strong>Complex Editable Listview</strong></p> 
  
            <ul id="list" data-role="listview" 
                data-editable="true" 
                data-editable-type="complex" 
                data-editable-form="editing-formID"
                data-title="Vegetables" 
                data-empty-title="No Veggies"> 
                <li> 
                    <a> 
                        <h3> 
                            <span id="veggieName"> 
                              Potato 
                            </span> 
                        </h3> 
                        <p> 
                            <em>Shape:</em> 
                            <strong> 
                                <span id="veggieShape"> 
                                 round 
                                </span> 
                            </strong> 
                        </p> 
                        <p> 
                            <em>Color:</em> 
                            <strong> 
                                <span id="veggieColor"> 
                                 brown 
                                </span> 
                            </strong> 
                        </p> 
                    </a> 
                </li> 
                <li> 
                    <a> 
                        <h3><span id="veggieName"> 
                             Brinjal 
                            </span> 
                        </h3> 
                        <p> 
                            <em>Shape:</em> 
                            <strong> 
                                <span id="veggieShape"> 
                                  oval 
                                </span> 
                            </strong> 
                        </p> 
                        <p> 
                            <em>Color:</em> 
                            <strong> 
                                <span id="veggieColor"> 
                                  purple 
                                </span> 
                            </strong> 
                        </p> 
                    </a> 
                </li> 
                <li> 
                    <a> 
                        <h3><span id="veggieName"> 
                             Tomato 
                            </span> 
                        </h3> 
                        <p> 
                            <em>Shape:</em> 
                            <strong> 
                                <span id="veggieShape"> 
                                  round 
                                </span> 
                            </strong> 
                        </p> 
                        <p> 
                            <em>Color:</em> 
                            <strong> 
                                <span id="veggieColor"> 
                                  red 
                                </span> 
                            </strong> 
                        </p> 
                    </a> 
                </li> 
            </ul> 
            <form id="editing-formID" 
                  data-editable-form="true"> 
                <input type="text" 
                       data-item-name="veggieName" 
                       data-item-template="<h3> 
                         <span id='veggieName'>%%</span> 
                                           </h3>"/> 
                <input
                    type="text"
                    data-item-name="veggieShape"
                    data-item-template="<p><em>Shape:</em> 
                    <strong><span id='veggieShape'>%%</span> 
                                        </strong></p>"/> 
                <input
                    type="text"
                    data-item-name="veggieColor"
                    data-item-template="<p><em>Color:</em> 
                    <strong><span id='veggieColor'>%%</span> 
                                        </strong></p>"/> 
                <button class="ui-btn ui-corner-all" 
                        data-add-button="true"> 
                    Add 
                </button> 
                <button class="ui-btn ui-corner-all"
                        data-clear-button="true"> 
                    Clear 
                </button> 
            </form> 
        </div> 
  
        <script> 
            var $list = $("#list").listview({ 
                editable: true, 
                editableType: "simple", 
                title: "Veggies", 
                emptyTitle: "No Veggies", 
            }); 
        </script> 
    </body> 
</html> 