I have elements that get created like this:
function appendCalendarEventToList(className, event) {
var eventObject = {
title: event.title,
id: event.id,
type: event.type,
color: event.color,
description: event.description,
canReoccur: event.canReoccur,
reoccurVal: event.reoccurVal,
estHours: event.estHours,
project: event.project
};
var div = document.createElement("div");
div.className = 'external-event';
div.style.background = event.color;
div.innerHTML = event.title;
// store the Event Object in the DOM element so we can get to it later
$(div).data('eventObject', eventObject);
$(div).draggable({
helper: function () {
$copy = $(this).clone();
$copy.data('eventObject', eventObject);
$copy.css({ "list-style": "none", "width": $(this).outerWidth() }); return $copy;
},
appendTo: 'body',
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
$(className).append(div);
$(div).qtip({
content: event.title,
position:
{
target: 'mouse'
},
// show: { event: 'click' },
hide: { event: 'mousedown mouseleave' },
style: {
classes: 'custSideTip',
width: 200,
padding: 5,
color: 'black',
textAlign: 'left',
border: {
width: 1,
radius: 3
}
}
});
return div;
}
Every event has a project attribute as you see.
However there are projects and tasks (and cases that can be ignored):
function refetchUnscheduled() {
$.ajax({
type: "POST",
url: "CalendarServices.aspx/GetUnscheduled",
data: '',
async:false,
success: function (data) {
var projects = '.project-container';
var tasks = '.task-container';
var cases = '.case-container';
$(projects).html('');
$(tasks).html('');
$(cases).html('');
var numProjects = 0;
var numTasks = 0;
var numCases = 0;
$.each(data, function () {
var className = '';
var url = '';
var typeName = '';
var crm = this.crm;
switch(this.type)
{
case 'p':
className = projects;
url = 'ProjectViewFrame.aspx?id=' + this.id;
typeName = 'Project';
numProjects++;
break;
case 't':
className = tasks;
url = 'TaskViewFrame.aspx?id=' + this.id;
typeName = 'Task';
numTasks++;
break;
case 'c':
className = cases;
url = 'CaseViewFrame.aspx?id=' + this.id;
typeName = 'Case';
numCases++;
break;
default:
}
var curDiv = appendCalendarEventToList(className, this);
var curEvent = this;
$(curDiv).bind('contextmenu', function (e) {
$('#contextMenuContainer').html('');
var btn1 = createLink('Edit ' + typeName, 'context-elem-name');
$('#contextMenuContainer').append(btn1);
$(btn1).on('click', function () {
if (crm == '')
showCalendarModal('Edit ' + typeName, url);
else
showCRM(crm);
})
prepContextMenu(e);
return false;
});
});
changeUnscheduledHeaders();
}
,
error: function () {
}
});
}
Here is what I need that I am unsure how to do:
I need an OR based filter: Given the following:
function filter(criteria,projects-div,tasks-div)
{
var words = criteria.split(' ');
}
I need to first, hide all projects whos obj.data('eventObject').title contains one or more words.
Then, once these are filtered: I need to first show all tasks whos project is visible,
So: obj.data('eventObject').project is == to one of the visible project's project property.
Then, I need to also show any tasks that have any of the words.
All comparing must be case insensitive too.
So say my criteria is 'hello world'
I show all projects with hello or world in the title.
I show all tasks whos project attribute is visible after the first step
I show all tasks whos title has hello or world
Thanks