I want to hide the black list item depending on the the checkbox (Hide completed) being selected or not and show only the red ones. If there are no red ones in a row, entire row should be hidden. If there are no list items in a row, the row should be hidden too.
Also depending on the count of items in the list, the table metric should be updated. For example, if I hide all the black items, the completed one should show 0 and missing will be 1.
How can I do this using jquery?
Here is a fiddle:
(https://jsfiddle.net/skb25/ezvps3hL)
$(document).ready(function () {
var otable = $('#table_id').DataTable({
"paging": true
});
$('a.toggle-vis').on('click', function (e) {
e.preventDefault();
// Get the column API object
var column = otable.column($(this).attr('data-column'));
// Toggle the visibility
column.visible(!column.visible());
});
var hideParamNode = document.getElementById('hideParam');
hideParamNode.addEventListener('change', function (event) {
hideParameterization(hideParamNode);
})
function hideParameterization(hideParamNode) {
var pElems = document.getElementsByClassName('paramName');
if (hideParamNode.checked) {
Object.keys(pElems).forEach(function (key) {
pElems[key].style.display = "none";
})
} else {
Object.keys(pElems).forEach(function (key) {
pElems[key].style.display = "";
})
}
};
});
Related
I have one bootstrap tab and i create multi select box using jQuery and the all functions are working properly but the RESET button only not working.
i try my all ways but its waste, anyone can you help me..
Please check my full code on fiddle,
MY FULL CODE IS HERE
Just want how to reset the field using jQuery
(function($) {
function refresh_select($select) {
// Clear columns
$select.wrapper.selected.html('');
$select.wrapper.non_selected.html('');
// Get search value
if ($select.wrapper.search) {
var query = $select.wrapper.search.val();
}
var options = [];
// Find all select options
$select.find('option').each(function() {
var $option = $(this);
var value = $option.prop('value');
var label = $option.text();
var selected = $option.is(':selected');
options.push({
value: value,
label: label,
selected: selected,
element: $option,
});
});
// Loop over select options and add to the non-selected and selected columns
options.forEach(function(option) {
var $row = $('<a tabindex="0" role="button" class="item"></a>').text(option.label).data('value', option.value);
// Create clone of row and add to the selected column
if (option.selected) {
$row.addClass('selected');
var $clone = $row.clone();
// Add click handler to mark row as non-selected
$clone.click(function() {
option.element.prop('selected', false);
$select.change();
});
// Add key handler to mark row as selected and make the control accessible
$clone.keypress(function() {
if (event.keyCode === 32 || event.keyCode === 13) {
// Prevent the default action to stop scrolling when space is pressed
event.preventDefault();
option.element.prop('selected', false);
$select.change();
}
});
$select.wrapper.selected.append($clone);
}
// Add click handler to mark row as selected
$row.click(function() {
option.element.prop('selected', 'selected');
$select.change();
});
// Add key handler to mark row as selected and make the control accessible
$row.keypress(function() {
if (event.keyCode === 32 || event.keyCode === 13) {
// Prevent the default action to stop scrolling when space is pressed
event.preventDefault();
option.element.prop('selected', 'selected');
$select.change();
}
});
// Apply search filtering
if (query && query != '' && option.label.toLowerCase().indexOf(query.toLowerCase()) === -1) {
return;
}
$select.wrapper.non_selected.append($row);
});
}
$.fn.multi = function(options) {
var settings = $.extend({
'enable_search': true,
'search_placeholder': 'Search...',
}, options);
return this.each(function() {
var $select = $(this);
// Check if already initalized
if ($select.data('multijs')) {
return;
}
// Make sure multiple is enabled
if (!$select.prop('multiple')) {
return;
}
// Hide select
$select.css('display', 'none');
$select.data('multijs', true);
// Start constructing selector
var $wrapper = $('<div class="multi-wrapper">');
// Add search bar
if (settings.enable_search) {
var $search = $('<input class="search-input" type="text" />').prop('placeholder', settings.search_placeholder);
$search.on('input change keyup', function() {
refresh_select($select);
})
$wrapper.append($search);
$wrapper.search = $search;
}
// Add columns for selected and non-selected
var $non_selected = $('<div class="non-selected-wrapper">');
var $selected = $('<div class="selected-wrapper">');
$wrapper.append($non_selected);
$wrapper.append($selected);
$wrapper.non_selected = $non_selected;
$wrapper.selected = $selected;
$select.wrapper = $wrapper;
// Add multi.js wrapper after select element
$select.after($wrapper);
// Initialize selector with values from select element
refresh_select($select);
// Refresh selector when select values change
$select.change(function() {
refresh_select($select);
});
});
}
})(jQuery);
$(document).ready(function() {
$('select').multi({
search_placeholder: 'Search',
});
});
/* Reset button */
function DeselectListBox() {
var ListBoxObject = document.getElementById("firstData")
for (var i = 0; i < ListBoxObject.length; i++) {
if (ListBoxObject.options[i].selected) {
ListBoxObject.options[i].selected = false
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You can trigger the click of your reset button and clear the whole div in your document ready function. After this you can remove the class "selected" so its completely reset.
Like this
$(document).ready(function() {
$('select').multi({
search_placeholder: 'Search',
});
$('#tabReset').click(function() {
$('.selected-wrapper').empty();
$('a').removeClass('selected');
});
});
attach an event to reset button. empty the selected-wrapper and remove the selected class from non-selected-wrapper
$("button.alltabreset").click(function(){
$(".selected-wrapper").empty();
$(".item").removeClass("selected");
});
solution: https://jsfiddle.net/zuov3wmb/
I'm using this awesome bouncy filter from Codyhouse but i can't for the life of me figure out how to make it run automatically i.e flip on its own and still accept user click events. The jsfiddle...Thanks.
jQuery(document).ready(function($) {
//wrap each one of your filter in a .cd-gallery-container
bouncy_filter($('.cd-gallery-container'));
function bouncy_filter($container) {
$container.each(function() {
var $this = $(this);
var filter_list_container = $this.children('.cd-filter'),
filter_values = filter_list_container.find('li:not(.placeholder) a'),
filter_list_placeholder = filter_list_container.find('.placeholder a'),
filter_list_placeholder_text = filter_list_placeholder.text(),
filter_list_placeholder_default_value = 'Select',
gallery_item_wrapper = $this.children('.cd-gallery').find('.cd-item-wrapper');
//store gallery items
var gallery_elements = {};
filter_values.each(function() {
var filter_type = $(this).data('type');
gallery_elements[filter_type] = gallery_item_wrapper.find('li[data-type="' + filter_type + '"]');
});
//detect click event
filter_list_container.on('click', function(event) {
event.preventDefault();
//detect which filter item was selected
var selected_filter = $(event.target).data('type');
//check if user has clicked the placeholder item (for mobile version)
if ($(event.target).is(filter_list_placeholder) || $(event.target).is(filter_list_container)) {
(filter_list_placeholder_default_value == filter_list_placeholder.text()) ? filter_list_placeholder.text(filter_list_placeholder_text): filter_list_placeholder.text(filter_list_placeholder_default_value);
filter_list_container.toggleClass('is-open');
//check if user has clicked a filter already selected
} else if (filter_list_placeholder.data('type') == selected_filter) {
filter_list_placeholder.text($(event.target).text());
filter_list_container.removeClass('is-open');
} else {
//close the dropdown (mobile version) and change placeholder text/data-type value
filter_list_container.removeClass('is-open');
filter_list_placeholder.text($(event.target).text()).data('type', selected_filter);
filter_list_placeholder_text = $(event.target).text();
//add class selected to the selected filter item
filter_values.removeClass('selected');
$(event.target).addClass('selected');
//give higher z-index to the gallery items selected by the filter
show_selected_items(gallery_elements[selected_filter]);
//rotate each item-wrapper of the gallery
//at the end of the animation hide the not-selected items in the gallery amd rotate back the item-wrappers
// fallback added for IE9
var is_explorer_9 = navigator.userAgent.indexOf('MSIE 9') > -1;
if (is_explorer_9) {
hide_not_selected_items(gallery_elements, selected_filter);
gallery_item_wrapper.removeClass('is-switched');
} else {
gallery_item_wrapper.addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
hide_not_selected_items(gallery_elements, selected_filter);
gallery_item_wrapper.removeClass('is-switched');
});
}
}
});
});
}
});
function show_selected_items(selected_elements) {
selected_elements.addClass('is-selected');
}
function hide_not_selected_items(gallery_containers, filter) {
$.each(gallery_containers, function(key, value) {
if (key != filter) {
$(this).removeClass('is-visible is-selected').addClass('is-hidden');
} else {
$(this).addClass('is-visible').removeClass('is-hidden is-selected');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm assuming by "make it run automatically" you're talking about triggering the content-selection animation programatically, rather than requiring a user click. One possible solution is to assign an id to the selection elements, and then register the click handler directly to those elements, rather than the parent filter_list_container. Then, you can use jQuery's trigger() method to simulate a click on the appropriate element.
Assign an id in the html like this:
<a id="green" href="#0">Green</a>
Then register the click handler like this:
$("#red, #green, #blue").on('click', function(event){ ... }
...and trigger like this:
$("#green").trigger("click");
Here's a JSfiddle with an example.
I want to remove multi rows from table, and I have used the following code but does not work.
I'm use DataTables v1.10.9.
$('#del_Btn').on('click', function () {
// 'table' is the instance of table object
table.row('.selected').remove().draw(false);
}
Full code:
$('#del_MembersBtn').on('click', function () {
if (confirm('Do you want to remove the selected items ?') === true) {
var selRows = RemoveFromGroupTable.rows({selected: true}).data().pluck(0); // return an object contains selected rows
var selRowsLength = selRows.length;
var rows = new Array();
for (i = 0; i < selRowsLength; i++) {
rows.push(selRows[i]);
}
// remove the selected rows from table
RemoveFromGroupTable.rows('.selected').remove().draw(false);
var inputData = {};
inputData.selectdRows = rows;
inputData.submit = Math.floor(Math.random() * 10) + 1;
$.post(myProp.base_url + 'directory/class/method', inputData, function (outputData) {
if (outputData.submit == outputData.submit) {
tips();
}
}, 'json');
}
}
});
What can I do to remove multi selected rows ?
SOLUTION
Use rows to select multiple rows from the table as shown below
$('#del_Btn').on('click', function () {
table.rows('.selected').remove().draw(false);
}
If the button is located inside the table, it would be necessary to use delegated event handler as follows:
$('#example').on('click', '#del_btn', function () {
table.rows('.selected').remove().draw(false);
}
where example is your table ID.
DEMO
See this jsFiddle for code and demonstration.
I have Dynamic a dynamic table here. I am trying to give drag selected cell count as colspan value to the selected table cells(merge).my fiddle http://jsfiddle.net/kannankds/q35vm6qv/6/
$(document).mouseup(function () {
isMouseDown = false;
mylength = $("td.highlighted").length;
//alert(mylength);
});
$("#mergeme").live('click', function () {
$("td.highlighted").attr("colspan"+ mylength);
alert("colspan" + mylength);
});
You could change this:
$("#mergeme").live('click', function () {
$("td.highlighted").attr("colspan"+ mylength);
alert("colspan" + mylength);
});
for this:
$("#mergeme").click(function () {
var mylength = $(".highlighted").length;
// Add the colspan of already merged columns
$(".highlighted").each(function(index,el){
if($(el).attr("colspan")>1)
mylength += $(this).attr("colspan") - 1;
});
// Get text from highlighted cells
var alltext = $(".highlighted").text();
// Hide non-first highlighted cells
$("td.highlighted:not(:first)")
.hide()
.toggleClass("highlighted");
// Set text to first highlighted cell, unhighlight, and set colspan
$("td.highlighted:first").attr("colspan", mylength)
.text(alltext)
.toggleClass("highlighted");
});
Demo fiddle: http://jsfiddle.net/lparcerisa/9ep1gsr8/1/
Note: you should limit your selection to cells of the same row, or the merge will be a mess.
It should be,
$(document).mouseup(function () {
isMouseDown = false;
mylength = $("td.highlighted").length;
//alert(mylength);
});
$("body").on('click','#mergeme', function () {
$("td.highlighted").attr("colspan", mylength);
alert("colspan" + mylength);
});
When we refresh or reload the page, you can see a selected text in middle of circle when you click on below image portion:
Discuss Goals & Concern
Cash Flow Analysis
Tax Analysis...
And so on.
Example: http://ivyfa.advisorproducts.com/financial-planning-process
The selected text is only coming on the first click - when you click again on those image portions you will not see selected text. So I want to remove the selection from the text on the first attempt too.
It's difficult for me to explain this issue. Below is the JS code I am using - I think the issue is in the ChangeText() functionality.
/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide5', 'slide8', 'slide9', 'slide12', 'slide13', 'slide14', 'slide15', 'slide16'];
window.onload = function() {
for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
var el = document.getElementById(IdAry[zxc0]);
if (el) {
setUpHandler(el);
el.onmouseover = function() {
$(this).addClass("hover");
}
el.onmouseout = function() {
$(this).removeClass("hover");
}
}
}
}
function setUpHandler(el) {
/*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/
$("#" + IdAry.join(",#")).click(function() {
$(this).addClass("selected");
$("#graphics .selected").not(this).removeClass("selected");
})
/*---------This will add show hide class to thier spans and vise versa-------*/
$("#" + IdAry.join(",#")).click(
function() {
changeText(this, "hide", "show");
},
function() {
changeText(this, "show", "hide");
})
}
function changeText(obj, cl1, cl2) {
obj.getElementsByTagName('SPAN')[0].className = "hide";
obj.getElementsByTagName('SPAN')[1].className = "show";
if (prev && obj !== prev) {
prev.getElementsByTagName('SPAN')[0].className = "show";
prev.getElementsByTagName('SPAN')[1].className = "hide";
}
prev = obj
}
I only want to remove the selected text from the text in the middle when you click on different-2 image tag.
Image to view selected text:
You should clear text selection once you display your control; you can do this by calling this function (should be fully cross-browser):
function clearSelection() {
if (window.getSelection) window.getSelection().removeAllRanges();
else if (document.selection) document.selection.empty();
}