https://jsfiddle.net/51Le6o06/48/
please take a look at the jsfiddle the code is getting to complicated and my functions aren't working correctly.
can anyone tell me what I could use instead of standard jQuery and javascript to make this easier to build (with a show more style pagination method).
I need to sort, filter and page existing html as in the jsfiddle.
thanks.
$(document).ready(function() {
$('.filter-gift').each(filterItems);
});
function filterItems(e) {
var items = [];
var table = '';
tableId = $(this).parent().parent().attr('tag')
var listItems = "";
listItems += "<option value=''> -Select- </option>";
$('div[tag="' + tableId + '"] table.internalActivities .information').each(function (i) {
var itm = $(this)[0].innerText;
if ($.inArray(itm, items) == -1) {
items.push($(this)[0].innerText);
listItems += "<option value='" + i + "'>" + $(this)[0].innerText + "</option>";
}
});
$('div[tag="' + tableId+ '"] .filter-gift').html(listItems);
$('.filter-gift').change(function () {
if($(this).val()!= "") {
var tableIdC = $(this).parent().parent().attr('tag');
var text = $('div[tag="' + tableIdC + '"] select option:selected')[0].text.replace(/(\r\n|\n|\r| |)/gm, "");;
$('div[tag="' + tableIdC + '"] .product-information-row').each(function (i) {
if ($(this).text().replace(/(\r\n|\n|\r| |)/gm, "") == text) {
$(this).show();
$(this).prev().show();
$(this).next().show();
}
else {
$(this).hide();
$(this).prev().hide();
$(this).next().hide();
}
});
} else {
$(this).parent().parent().find('table tr').show();
}
});
}
jQuery.fn.sortPaging = function(options) {
var defaults = {
pageRows: 2
};
var settings = $.extend(true, defaults, options);
return this.each(function() {
var container = $(this);
var tableBody = container.find('.internalActivities > tbody');
var dataRows = [];
var currentPage = 1;
var maxPages = 1;
var buttonMore = container.find('.seeMoreRecords');
var buttonLess = container.find('.seeLessRecords');
var buttonFree = container.find('.filter-free');
var tableRows = [];
var maxFree = 0;
var filterFree = buttonFree.is(':checked');
function displayRows() {
tableBody.empty();
var displayed = 0;
$.each(dataRows, function(i, ele) {
if( !filterFree || (filterFree && ele.isFree) ) {
tableBody.append(ele.thisRow).append(ele.nextRow);
displayed++;
if( displayed >= currentPage*settings.pageRows ) {
return false;
};
};
});
};
function checkButtons() {
buttonLess.toggleClass('element_invisible', currentPage<=1);
buttonMore.toggleClass('element_invisible', filterFree ? currentPage>=maxFreePages : currentPage>=maxPages);
};
function showMore() {
currentPage++;
displayRows();
checkButtons();
};
function showLess() {
currentPage--;
displayRows();
checkButtons();
};
function changedFree() {
filterFree = buttonFree.is(':checked');
if( filterFree && currentPage>maxFreePages ) {
currentPage=maxFreePages;
};
displayRows();
checkButtons();
};
tableBody.find('.product-data-row').each(function(i, j) {
var thisRow = $(this);
var nextRow = thisRow.next();
var amount = parseFloat(thisRow.find('.amount').text().replace(/£/, ''));
var isFree = thisRow.find('.free').length;
maxFree += isFree;
dataRows.push({
amount: amount,
thisRow: thisRow,
nextRow: nextRow,
isFree: isFree
});
})
dataRows.sort(function(a, b) {
return a.amount - b.amount;
});
maxPages = Math.ceil(dataRows.length/settings.pageRows);
maxFreePages = Math.ceil(maxFree/settings.pageRows);
tableRows = tableBody.find("tr");
buttonMore.on('click', showMore);
buttonLess.on('click', showLess);
buttonFree.on('change', changedFree);
displayRows();
checkButtons();
})
};
$('.sort_paging').sortPaging();
The best solution when it comes to tables with all the filter, sorting, pagination features and much more is one and only.
jQuery Datatables
Just check out the link, It's Easy and Highly Customizable.
Maybe you could use this jquery plug-in DataTables
Related
I am making a JavaScript solution related to MediaWiki, but what it is for is not really needed information, so I will leave it there. I have the following function:
wgAjaxLicensePreview=true;
function getLicensePreview(num) {
console.log('glp num', num);
window.licenseSelectorCheck = function () {
var selector = document.getElementById("license" + num);
var selection = selector.options[selector.selectedIndex].value;
if (selector.selectedIndex > 0) {
if (selection == "") {
// Option disabled, but browser is broken and doesn't respect this
selector.selectedIndex = 0;
}
}
// We might show a preview
wgUploadLicenseObj.fetchPreview(selection);
};
var wpLicense = document.getElementById('license' + num);
console.log('glp wpLicense', wpLicense);
if (mw.config.get('wgAjaxLicensePreview') && wpLicense) {
// License selector check
wpLicense.onchange = licenseSelectorCheck;
// License selector table row
var wpLicenseRow = wpLicense.parentNode.parentNode;
var wpLicenseTbody = wpLicenseRow.parentNode;
var row = document.createElement('tr');
var td = document.createElement('td');
row.appendChild(td);
td = document.createElement('td');
td.id = 'mw-license-preview' + num;
row.appendChild(td);
wpLicenseTbody.insertBefore(row, wpLicenseRow.nextSibling);
console.log('glp row', row);
}
window.wgUploadLicenseObj = {
'responseCache': {
'': ''
},
'fetchPreview': function (license) {
if (!mw.config.get('wgAjaxLicensePreview'))
return;
for (cached in this.responseCache) {
console.log('glp fp responseCache', this.responseCache);
if (cached == license) {
this.showPreview(this.responseCache[license]);
return;
}
}
$('#license' + num).injectSpinner('license' + num);
var title = document.getElementById('imagename' + num).value;
if (!title)
title = 'File:Sample.jpg';
var url = mw.util.wikiScript('api')
+ '?action=parse&text={{' + encodeURIComponent(license) + '}}'
+ '&title=' + encodeURIComponent(title)
+ '&prop=text&pst&format=json';
var req = sajax_init_object();
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
console.log('glp fp response', req.responseText);
wgUploadLicenseObj.processResult(eval('(' + req.responseText + ')'), license);
}
};
req.open('GET', url, true);
req.send('');
},
'processResult': function (result, license) {
$.removeSpinner('license' + num);
this.responseCache[license] = result['parse']['text']['*'];
console.log('glp pr result license', result, license);
this.showPreview(this.responseCache[license]);
},
'showPreview': function (preview) {
var previewPanel = document.getElementById('mw-license-preview' + num);
console.log('glp sp', previewPanel, preview, previewPanel.innerHTML == preview);
if (previewPanel.innerHTML != preview)
previewPanel.innerHTML = preview;
}
};
}
The issue with that, is the loop I have
var limit = this.max < this.fileCount ? this.max : this.fileCount;
console.log('glp', this.max, this.fileCount);
for (i = 1; i <= limit; i++) {
console.log('glp i', i);
getLicensePreview(i);
}
Does not iterate correctly for part of it, I have narrowed the issue down to, wpLicense.onchange = licenseSelectorCheck; which is rewriting the event handler to only check the last num.
Thanks to help from Barmar, I was able to solve this by making the wgUploadLicenseObj variable local rather then global window.wgUploadLicenseObj.
My final function ended up being:
wgAjaxLicensePreview=true;
function getLicensePreview(num) {
window.licenseSelectorCheck = function () {
var selector = document.getElementById("license" + num);
var selection = selector.options[selector.selectedIndex].value;
if (selector.selectedIndex > 0) {
if (selection == "") {
// Option disabled, but browser is broken and doesn't respect this
selector.selectedIndex = 0;
}
}
var wgUploadLicenseObj = {
'responseCache': {
'': ''
},
'fetchPreview': function (license) {
if (!mw.config.get('wgAjaxLicensePreview'))
return;
for (cached in this.responseCache) {
if (cached == license) {
this.showPreview(this.responseCache[license]);
return;
}
}
$('#license' + num).injectSpinner('license' + num);
var title = document.getElementById('imagename' + num).value;
if (!title)
title = 'File:Sample.jpg';
var url = mw.util.wikiScript('api')
+ '?action=parse&text={{' + encodeURIComponent(license) + '}}'
+ '&title=' + encodeURIComponent(title)
+ '&prop=text&pst&format=json';
var req = sajax_init_object();
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
wgUploadLicenseObj.processResult(eval('(' + req.responseText + ')'), license);
}
};
req.open('GET', url, true);
req.send('');
},
'processResult': function (result, license) {
$.removeSpinner('license' + num);
this.responseCache[license] = result['parse']['text']['*'];
this.showPreview(this.responseCache[license]);
},
'showPreview': function (preview) {
var previewPanel = document.getElementById('mw-license-preview' + num);
if (previewPanel.innerHTML != preview)
previewPanel.innerHTML = preview;
}
};
// We might show a preview
wgUploadLicenseObj.fetchPreview(selection);
};
var wpLicense = document.getElementById('license' + num);
if (mw.config.get('wgAjaxLicensePreview') && wpLicense) {
// License selector check
wpLicense.onchange = licenseSelectorCheck;
// License selector table row
var wpLicenseRow = wpLicense.parentNode.parentNode;
var wpLicenseTbody = wpLicenseRow.parentNode;
var row = document.createElement('tr');
var td = document.createElement('td');
row.appendChild(td);
td = document.createElement('td');
td.id = 'mw-license-preview' + num;
row.appendChild(td);
wpLicenseTbody.insertBefore(row, wpLicenseRow.nextSibling);
}
}
I am inputting values into an array in jQuery like 1,4,7,3. But when I am displaying the array values, it displays like 1,3,4,7.
i need like 1,4,7,3 as it is when they were inserted. This is my code.
var selectedValues = [];
var $ctrls = $("[id*=chkProcessRoutes] input:checkbox");
$("[id*=chkProcessRoutes] input:checked").each(function () {
var l = parseFloat(($ctrls.index($(this))));
var ll = parseFloat(l) + 1;
selectedValues.push(parseFloat(ll));
});
if (selectedValues.length > 0) {
alert("Selected Value(s): " + selectedValues.toString());
} else {
alert("No item has been selected.");
}
Try this:
var selectedValues = $("[id*=chkProcessRoutes] input:checked").map(function () {
return $(this).val();
});
if (selectedValues.length > 0) {
alert("Selected Value(s): " + selectedValues.toString());
} else {
alert("No item has been selected.");
}
I am new to javascript I have a doubt in changing onclick event to mouseover please help
<script>
$(document).ready(function() {
(function ($) {
$.fn.readmore = function (settings) {
var opts = $.extend({}, $.fn.readmore.defaults, settings);
this.each(function () {
$(this).data("opts", opts);
if ($(this).html().length > opts.substr_len) {
abridge($(this));
linkage($(this));
}
});
function linkage(elem) {
elem.append(elem.data("opts").more_link);
elem.children(".more").click( function () {
$(this).hide();
$(this).siblings("span:not(.hidden)").hide().siblings("span.hidden").animate({'opacity' : 'toggle'},1000);
});
}
function abridge(elem) {
var opts = elem.data("opts");
var txt = elem.html();
var len = opts.substr_len;
var dots = "<span>" + opts.ellipses + "</span>";
var charAtLen = txt.substr(len, 1);
while (len < txt.length && !/\s/.test(charAtLen)) {
len++;
charAtLen = txt.substr(len, 1);
}
var shown = txt.substring(0, len) + dots;
var hidden = '<span class="hidden" style="display:none;">' + txt.substring(len, txt.length) + '</span>';
elem.html(shown + hidden);
}
return this;
};
$.fn.readmore.defaults = {
substr_len: 500,
ellipses: '…',
more_link: '<a class="more">Read More</a>'
};
})(jQuery);
$(function(){
$('.des_details').readmore({ substr_len: 150 });
});
});
</script>
Any suggestions?
There's a bit of API doc about .hover() which explains what I think you're trying to do. Hope this helps.
http://api.jquery.com/hover/
where you have
elem.children(".more").click( function ()
replace it with
elem.children(".more").hover( function ()
Try this code
$(urid).trigger('mouseover');
I tested the JQuery autocomplete UI widget and noticed that the autocomplete has extremely poor performance in IE when dealing with large amount of data. My client uses internet explorer 7.
I found a solution to mitigate the performance issue. Instead of returning all the matches of the autocomplete search I only return the first 40 matches. Code below
source: function (request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
var select_el = select.get(0); // get dom element
var rep = new Array(); // response array
var maxRepSize = 40; // maximum response size
// simple loop for the options
var looper = 0;
for (var i = 0; i < select_el.length; i++) {
var text = select_el.options[i].text;
if (!request || request == '') {
// add element to result array
rep[looper++] = {
label: text,
value: text,
option: select_el.options[i]
};
}
else if ( select_el.options[i].value && matcher.test(text) ) {
// add element to result array
rep[looper++] = {
label: text,
value: text,
option: select_el.options[i]
};
}
if ( rep.length > maxRepSize ) {
needMoreItems = true;
break;
}
}
// send response
response( rep );
},
The client asked me to append a "More Results" item to the autocomplete list. If there were more than 40 items that matched the search the "More Results" item would appear of at the bottom of the list. If a user clicked on the "More Results" item, the autocomplete drop down would expand to include the next 40 matches. I experimented with the jQuery autocomplete and I was able to populate the auto suggest list with the next 40 items but when the user clicked on one of the dynamically added items, I could not bind the click event to the Select Event of the autocomplete UI widget. Code below:
open: function( event, ui ) {
if (needMoreItems) {
needMoreItems = false;
$('<li class="ui-menu-item" role="menuitem" id="yoADDMORE" ><a class="ui-corner-all" tabindex="-1">... more available<br/><br/></a></li>')
.bind({
click: function(e) {
var appendHtml = '';
var select_el = select.get(0);
var maxRepSize = 40; // maximum response size
// simple loop for the options
var looper = 0;
for (var i = 41; i < select_el.length; i++) {
appendHtml += '<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">' + select_el.options[i].text + '</a></li>';
if ( looper ++ > maxRepSize ) {
needMoreItems = true;
break;
}
}
if (needMoreItems)
appendHtml += '<li class="ui-menu-item" role="menuitem" id="yoADDMORE" ><a class="ui-corner-all" tabindex="-1">... more available<br/><br/></a></li>';
$('#yoADDMORE').remove();
$('ul.ui-autocomplete').html($('ul.ui-autocomplete').html() + appendHtml);
$('ul.ui-autocomplete > li')
.bind({
mouseenter: function(e) {
// Hover event handler
$("> a",this).attr('class','ui-corner-all ui-state-hover');
},
mouseleave: function(e) {
// Hover event handler
$("> a",this).attr('class','ui-corner-all');
}
});
},
mouseenter: function(e) {
// Hover event handler
$("> a",this).attr('class','ui-corner-all ui-state-hover');
},
mouseleave: function(e) {
// Hover event handler
$("> a",this).attr('class','ui-corner-all');
}
})
.appendTo('ul.ui-autocomplete');
}
},
Links to jsFiddle
http://jsfiddle.net/eyecode/sX4Ba/
Any help would be appreciated.
Thanks in Advance
In order to list the top 20 options with a "More .." at the bottom of the first 20 items. Once a user presses "More .." link. All the items will be displayed in the drop down.
(function ($) {
$.widget("ui.typeaheadtextbox", {
_create: function () {
var self = this,
select = this.element.hide(),
theWidth = select.width(),
selected = select.children(":selected"),
value = selected.val() ? selected.text() : "";
var _searchItem = '';
var _more = false;
var _lastIndex = 0;
var _maxSize = 20;
var _rep = null;
var input = this.input = $("<input id='" + select[0].id + "_jq' style=\"width: " + theWidth + "px\">")
.insertAfter(select)
.val(value)
.autocomplete({
delay: 10,
minLength: 0,
source: function (request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
var j = 0;
_rep = response;
_searchItem = request.term;
var select_el = select.get(0); // get dom element
var rep = new Array(); // response array
for (var i = 0; i < select_el.length; i++) {
var text = select_el.options[i].text;
if (select_el.options[i].value && (!request.term || matcher.test(text))) {
j++;
if (j > _maxSize) {
_more = true;
_lastIndex = i;
break;
}
// add element to result array
rep[(j - 1)] = {
label: text.replace(new RegExp("^(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(_searchItem) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), value: text, option: select_el.options[i]
};
}
}
return response(rep);
},
autoFocus:true,
open: function(event, ui) {
if (_more) {
_more = false;
$('<li class="ui-menu-item_more" role="menuitem" id="' + select.get(0).id + '_ADDMORE_' + _lastIndex + '" ><a class="ui-corner-all" tabindex="-1"><img width="16" src="Content/themes/base/images/icon-search-small.png"/> <strong>View All</strong></a></li>')
.bind({
click: function(e) {
var response = _rep;
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(_searchItem), "i");
var select_el = select.get(0); // get dom element
var rep = new Array(); // response array
var j = 0;
for (var i = 0; i < select_el.length; i++) {
var text = select_el.options[i].text;
if (select_el.options[i].value && (!_searchItem || matcher.test(text))) {
// add element to result array
rep[j++] = {
label: text.replace(new RegExp("^(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(_searchItem) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), value: text, option: select_el.options[i]
};
}
}
$(this).remove();
return _rep(rep);
},
mouseenter: function(e) { $("> a",this).attr('class','ui-corner-all ui-state-hover'); },
mouseleave: function(e) { $("> a",this).attr('class','ui-corner-all');}
})
.appendTo('ul.ui-autocomplete');
_lastIndex = 0;
return true;
}
},
select: function (event, ui) {
ui.item.option.selected = true;
self._trigger("selected", event, {
item: ui.item.option
});
},
change: function (event, ui) {
if (!ui.item) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid = false;
select.children("option").each(function () {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
return false;
}
});
if (!valid) {
// remove invalid value, as it didn't match anything
$(this).val("");
select.val("");
input.data("autocomplete").term = "";
return false;
}
}
}
})
.addClass("ui-widget ui-widget-content ui-corner-all");
input.data("autocomplete")._renderMenu = function( ul, items ) {
var self = this; var htm = ''; var beginHtm = '<li><a>'; var endHtm = '</a></li>';
for(var i=0;i<items.length;i++) {
htm += beginHtm + items[i].label + endHtm;
}
ul[0].innerHTML = htm;
var liTags = ul[0].getElementsByTagName('li');
for(var i=0;i<liTags.length;i++) {
$(liTags[i]).data("item.autocomplete", items[i]);
}
return true;
};
},
destroy: function () {
this.input.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
},
clear: function () {
this.element.val("");
this.input.val("");
}
});
})(jQuery);
I have a carousel basket that needs to handle more than one selector to be dropped into it. There are youtube video that needs to be accepted (Selector: ".youtubevideo"), yahoo videos that need to be accpeted (Selector: ".yahoovideo"). Here is the code i will make the code more useable later on.
The items are dragging easily but the carousel wont accept two different selectors which are ".yahoovideo" and ".youtubevideo" why is this?
DRAGGABLE
var count = 0;
var imageParams = '';
var idParams = '';
var pageType = '';
var titleParams = '';
$(".youtubevideo").multidraggable({
'helper': 'clone',
'revert': 'invalid',
'cursorAt': { left: 0, top: 0 },
'zIndex': 500,
'distance': 10,
start: function(event, ui) {
count += 1;
$(ui.helper).children().each(function() {
$(this).remove();
});
$(ui.helper).css("width", "0%");
$(ui.helper).css("paddingTop", "0px");
$(ui.helper).css("paddingBottom", "0px");
$(ui.helper).css("paddingLeft", "0px");
$(ui.helper).css("paddingRight", "0px");
if (GetViewSelected() == 'details') {
var img = $(this).find(".divmediaresultsnavigationcontrolvideotitletext3hidden");
imageParams += $($(img)[1]).text() + '~';
var id = $(this).attr("id");
id = id.split("limediaresultsnavigationcontroldetailscontainer")[1];
idParams += id + '~';
var title = $($($($(this).children()[0]).children()[0]).children()[2]).text();
titleParams += title + '~';
var className = $(this).attr("class");
className = className.split(" ")[2];
pageType = className;
}
else {
//var img = $("a.linkmediaresultsnavigationcontrolcontainer").find('img');
var img = $($($(this).children()[0]).children()[0]).children()[0];
imageParams += $(img).attr("src") + '~';
var id = $(this).attr("id");
id = id.split("linkmediaresultsnavigationcontrolcontainer")[1];
idParams += id + '~';
var title = $($(this).children()[2]).text();
titleParams += title + '~';
var className = $(this).attr("class");
className = className.split(" ")[2];
pageType = className;
}
var countItems = $(".ui-multidraggable").size();
if (count == (countItems / 2)) {
var divContainer = $("<div/>")
$(ui.helper).append(divContainer);
$(divContainer).attr("id", "divContainerMultiDraggable");
$(divContainer).css("paddingTop", "10px");
$(divContainer).css("paddingBottom", "10px");
$(divContainer).css("paddingLeft", "10px");
$(divContainer).css("paddingRight", "10px");
$(divContainer).css("backgroundColor", "black");
$(divContainer).css("display", "inline-block");
$(divContainer).text((countItems / 2) + " Items Selected");
var divHiddenImageParams = $("<div/>");
$(divContainer).append(divHiddenImageParams);
$(divHiddenImageParams).css("display", "none");
$(divHiddenImageParams).text(imageParams);
var divHiddenIDParams = $("<div/>");
$(divContainer).append(divHiddenIDParams);
$(divHiddenIDParams).css("display", "none");
$(divHiddenIDParams).text(idParams);
var divHiddenPageType = $("<div/>");
$(divContainer).append(divHiddenPageType);
$(divHiddenPageType).css("display", "none");
$(divHiddenPageType).text(pageType);
var divHiddenTitle = $("<div/>");
$(divContainer).append(divHiddenTitle);
$(divHiddenTitle).css("display", "none");
$(divHiddenTitle).text(titleParams);
}
},
stop: function(event, ui) {
count = 0;
imageParams = '';
idParams = '';
$("#divContainerMultiDraggable").remove();
}
});
var count2 = 0;
var imageParams2 = '';
var idParams2 = '';
$(".yahoovideo").multidraggable({
'helper': 'clone',
'revert': 'invalid',
'cursorAt': { left: 0, top: 0 },
'zIndex': 500,
start: function(event, ui) {
count2 += 1;
$(ui.helper).children().each(function() {
$(this).remove();
});
$(ui.helper).css("width", "0%");
$(ui.helper).css("paddingTop", "0px");
$(ui.helper).css("paddingBottom", "0px");
$(ui.helper).css("paddingLeft", "0px");
$(ui.helper).css("paddingRight", "0px");
if (GetViewSelected() == 'details') {
var img = $(this).find(".divmediaresultsnavigationcontrolvideotitletext3hidden");
imageParams2 += $($(img)[1]).text() + '~';
var id = $(this).attr("id");
id = id.split("limediaresultsnavigationcontroldetailscontainer")[1];
idParams2 += id + '~';
var className = $(this).attr("class");
className = className.split(" ")[2];
pageType = className;
}
else {
var img = $("a.linkmediaresultsnavigationcontrolcontainer").find('img');
imageParams2 += $(img).attr("src") + '~';
var id = $(this).attr("id");
id = id.split("linkmediaresultsnavigationcontrolcontainer")[1];
idParams2 += id + '~';
var className = $(this).attr("class");
className = className.split(" ")[2];
pageType = className;
}
var countItems = $(".ui-multidraggable").size();
if (count2 == (countItems / 2)) {
var divContainer = $("<div/>")
$(ui.helper).append(divContainer);
$(divContainer).attr("id", "divContainerMultiDraggable");
$(divContainer).css("paddingTop", "10px");
$(divContainer).css("paddingBottom", "10px");
$(divContainer).css("paddingLeft", "10px");
$(divContainer).css("paddingRight", "10px");
$(divContainer).css("backgroundColor", "black");
$(divContainer).css("display", "inline-block");
$(divContainer).text((countItems / 2) + " Items Selected");
var divHiddenImageParams = $("<div/>");
$(divContainer).append(divHiddenImageParams);
$(divHiddenImageParams).css("display", "none");
$(divHiddenImageParams).text(imageParams2);
var divHiddenIDParams = $("<div/>");
$(divContainer).append(divHiddenIDParams);
$(divHiddenIDParams).css("display", "none");
$(divHiddenIDParams).text(idParams2);
var divHiddenPageType = $("<div/>");
$(divContainer).append(divHiddenPageType);
$(divHiddenPageType).css("display", "none");
$(divHiddenPageType).text(pageType);
}
},
stop: function(event, ui) {
count2 = 0;
imageParams2 = '';
idParams2 = '';
}
});
DROPPABLE
var countDrop = 0;
var items = 0;
$(".carouselBody").droppable({
accept: '.youtubevideo',
drop: function(event, ui) {
countDrop += 1;
if (countDrop == 1) {
items = $(".ui-multidraggable").size();
var div = $("#divContainerMultiDraggable");
var divImageParams = $($(div).children()[0]).text();
var divIDParams = $($(div).children()[1]).text();
var divTitleParams = $($(div).children()[3]).text();
var divPageType = $($(div).children()[2]).text();
$("div.divContainerMultiDraggable").remove();
var ul = $(".carouselBody").find("ul");
for (var i = 0; i < divImageParams.split("~").length; i++) {
var image = divImageParams.split("~")[i];
var id = divIDParams.split("~")[i];
var title = divTitleParams.split("~")[i];
if (image != "") {
if ($("#listmediabasketitemcontainer" + id).length > 0) {
}
else {
var li = $("<li/>");
$(ul).append(li);
$(li).attr("class", "listmediabasketitemcontainer");
$(li).attr("id", "listmediabasketitemcontainer" + id);
$(li).attr("title", title);
$(li).click(function() {
var tempClass = $(this).attr("class");
tempClass = tempClass.split(" ")[0];
if (selectedMultiDragContainer == "") {
}
else {
if (selectedMultiDragContainer == tempClass) {
}
else {
$(".ui-multidraggable").removeClass("ui-multidraggable");
$($(this).children()[0]).addClass("ui-multidraggable");
}
}
selectedMultiDragContainer = tempClass;
});
var div = $("<div/>");
$(li).append(div);
$(div).attr("class", "divmediabasketitemcontainer");
var divHiddenID = $("<div/>");
$(li).append(divHiddenID);
$(divHiddenID).css("display", "none");
$(divHiddenID).text(id);
var divHiddenPageType = $("<div/>");
$(li).append(divHiddenPageType);
$(divHiddenPageType).css("display", "none");
$(divHiddenPageType).text(divPageType);
var img = $("<img/>");
$(div).append(img);
$(img).attr("width", "100px");
$(img).attr("height", "100px");
$(img).attr("src", image);
}
}
}
imageParams = '';
idParams = '';
$(".ui-multidraggable").removeClass("ui-multidraggable");
DragDropMediaToPLaylistSelected();
}
},
over: function(event, ui) {
countDrop = 0;
}
});
var countDrop4 = 0;
var items4 = 0;
$(".carouselBody").droppable({
accept: '.yahoovideo',
drop: function(event, ui) {
countDrop4 += 1;
if (countDrop4 == 1) {
items4 = $(".ui-multidraggable").size();
var div = $("#divContainerMultiDraggable");
var divImageParams = $($(div).children()[0]).text();
var divIDParams = $($(div).children()[1]).text();
var divTitleParams = $($(div).children()[3]).text();
var divPageType = $($(div).children()[2]).text();
$("div.divContainerMultiDraggable").remove();
var ul = $(".carouselBody").find("ul");
for (var i = 0; i < divImageParams.split("~").length; i++) {
var image = divImageParams.split("~")[i];
var id = divIDParams.split("~")[i];
var title = divTitleParams.split("~")[i];
if (image != "") {
if ($("#listmediabasketitemcontainer" + id).length > 0) {
}
else {
var li = $("<li/>");
$(ul).append(li);
$(li).attr("class", "listmediabasketitemcontainer");
$(li).attr("id", "listmediabasketitemcontainer" + id);
$(li).attr("title", title);
$(li).click(function() {
var tempClass = $(this).attr("class");
tempClass = tempClass.split(" ")[0];
if (selectedMultiDragContainer == "") {
}
else {
if (selectedMultiDragContainer == tempClass) {
}
else {
$(".ui-multidraggable").removeClass("ui-multidraggable");
$($(this).children()[0]).addClass("ui-multidraggable");
}
}
selectedMultiDragContainer = tempClass;
});
var div = $("<div/>");
$(li).append(div);
$(div).attr("class", "divmediabasketitemcontainer");
var divHiddenID = $("<div/>");
$(li).append(divHiddenID);
$(divHiddenID).css("display", "none");
$(divHiddenID).text(id);
var divHiddenPageType = $("<div/>");
$(li).append(divHiddenPageType);
$(divHiddenPageType).css("display", "none");
$(divHiddenPageType).text(divPageType);
var img = $("<img/>");
$(div).append(img);
$(img).attr("width", "100px");
$(img).attr("height", "100px");
$(img).attr("src", image);
}
}
}
imageParams = '';
idParams = '';
$(".ui-multidraggable").removeClass("ui-multidraggable");
DragDropMediaToPLaylistSelected();
}
},
over: function(event, ui) {
countDrop4 = 0;
}
});
Use , to support more than one selector. So, relevant part will be:
accept: '.youtubevideo,.yahoovideo'
Works in CSS and in jQuery.
.
Documentation: jQuery API: Multiple Selector (“selector1, selector2, selectorN”)
Do the two have the same callbacks (start and so forth)? If so, just add a common class to both and use that for accept, something like
accept: '.video'
The other option is to turn accept into a function and have it return true based on your conditions:
accept: function(element) {
var cn = element.className;
return cn == 'youtubevideo' || 'yahoovideo'
}