Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang="en">
    
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog - Modal form</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css"
        />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
    </head>
    
    <body>
        <div id="dialog-form" title="Create new user">
            <p class="validateTips">All form fields are required.</p>
            <form>
                <fieldset>
                    <label for="first_name">First Name</label>
                    <select id="first-name">
                        <option value="1">Arun</option>
                        <option value="2">Ganesh</option>
                        <option value="3">Suresh</option>
                        <option value="4">Sanganabasu</option>
                    </select>
                    <label for="last_name">Last Name</label>
                    <select id="last-name">
                        <option value="1">Hulagabal</option>
                        <option value="2">Cheemalamudi</option>
                        <option value="3">Ganiger</option>
                        <option value="4">Kattriguppe</option>
                    </select>
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"
                    />
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password" value=""
                    class="text ui-widget-content ui-corner-all" />
                </fieldset>
            </form>
        </div>
        <div id="users-contain" class="ui-widget">
                <h1>Existing Users:</h1>
​
            <table id="users" class="ui-widget ui-widget-content">
                <thead>
                    <tr class="ui-widget-header ">
                        <th>Name</th>
                        <th>Email</th>
                        <th>Password</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="custom-name">John Doe</td>
                        <td>john.doe@example.com</td>
                        <td>johndoe1</td>
                        <td><a class="edit" href="">Edit</a>
​
                        </td>
                        <td><span class="delete"><a href="">Delete</a></span>
​
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <button id="create-user">Create new user</button>
    </body>
​
</html>
 
$(function () {
​
    var new_dialog = function (type, row) {
        var dlg = $("#dialog-form").clone();
        var fname = dlg.find(("#first-name")),
            lname = dlg.find(("#last-name")),
            email = dlg.find(("#email")),
            password = dlg.find(("#password"));
        type = type || 'Create';
        var config = {
            autoOpen: true,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Create an account": save_data,
                    "Cancel": function () {
                    dlg.dialog("close");
                }
            },
            close: function () {
                dlg.remove();
            }
        };
        if (type === 'Edit') {
            config.title = "Edit User";
            get_data();
            delete(config.buttons['Create an account']);
            config.buttons['Edit account'] = function () {
                row.remove();
                save_data();
​
            };
​
        }
        dlg.dialog(config);
​
        function get_data() {
            var _email = $(row.children().get(1)).text(),
                _password = $(row.children().get(2)).text();
            email.val(_email);
            password.val(_password);
​
        }
​
        function save_data() {
            $("#users tbody").append("<tr>" + "<td>" + (fname.find("option:selected").text() + ' ').concat(lname.find("option:selected").text()) + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
            dlg.dialog("close");
        }
    };
​
    $(document).on('click', 'span.delete', function () {
        $(this).closest('tr').find('td').fadeOut(1000,
​
        function () {
            // alert($(this).text());
            $(this).parents('tr:first').remove();
        });
​
        return false;
    });
    $(document).on('click', 'td a.edit', function () {
        new_dialog('Edit', $(this).parents('tr'));
        return false;
    });
​
    $("#create-user").button().click(new_dialog);
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers