jQuery selectable filter
Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
/ @aarvikitchen5572
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)
When "Exclude Weekends" checkbox is not checked, we should be able to select all days including weekends (Sat and Sun)
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>
