Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jQuery selectable filter

Suggested Videos
Part 95 - Customizing droppable widget
Part 96 - jQuery Resizable Widget
Part 97 - jQuery selectable widget



In this video we will discuss jQuery selectable filter option with an example. Along the way we will also discuss destory method. This is continuation to Part 97. Please watch Part 97 from jQuery Tutorial before proceeding.



Here is what we want to be able to do

When "Exclude Weekends" checkbox is checked, we should not be able to select weekends (Sat and Sun)
jquery selectable example

When "Exclude Weekends" checkbox is not checked, we should be able to select all days including weekends (Sat and Sun)
jquery selectable list example

Code used in the demo

<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <script src="jquery-ui.js"></script>
    <link href="jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            var selectableList = $('#selectable');

            selectableList.selectable({
                stop: getSelectedItems
            });

            function getSelectedItems() {
                var selectedItems = '';
                $('.ui-selected').each(function () {
                    selectedItems += $(this).text() + '<br/>';
                });

                $('#result').html(selectedItems);
            }

            function createSelectableList(filterValue) {
                selectableList.selectable('destroy').selectable({
                    stop: getSelectedItems,
                    filter: filterValue
                });
                $('#selectable li').removeClass('ui-selected');
                $('#result').empty();

                var weekends = $('li[data-value="weekend"]');
                if (filterValue == '*') {
                    weekends.removeClass('excluded');
                }
                else {
                    weekends.addClass('excluded');
                }
            }

            $('#cbExclude').click(function () {
                if ($(this).is(':checked')) {
                    createSelectableList('li[data-value="weekday"]');
                }
                else {
                    createSelectableList('*');
                }
            });
        });
    </script>
    <style>
        li {
            display: inline-block;
            border: 1px solid black;
            padding: 20px;
            cursor: pointer;
        }

        .ui-selecting {
            background-color: grey;
            color: white;
        }

        .ui-selected {
            background-color: green;
            color: white;
        }

        .excluded {
            background-color: red;
            color:white;
            cursor:default
        }
    </style>
</head>
<body style="font-family: Arial">
    <form id="form1" runat="server">
        Exclude Weekends :
        <input id="cbExclude" type="checkbox"/>
        <ul id="selectable">
            <li data-value="weekday">Mon</li>
            <li data-value="weekday">Tue</li>
            <li data-value="weekday">Wed</li>
            <li data-value="weekday">Thu</li>
            <li data-value="weekday">Fri</li>
            <li data-value="weekend">Sat</li>
            <li data-value="weekend">Sun</li>
        </ul>
        You selected :
        <div id="result"></div>
    </form>
</body>
</html>

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.