How to reset or unselect multi select box using jQuery? - javascript

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/

Related

How to trigger the select function when the value is selected after the tab is pressed

I have a combo box that enables the autocomplete function.
The project that I am working on currently uses the same code that is mentioned in the answer.
I have modified the code to select the value on the tab pressed if it matched the exact text in the select.
In the source, I called this function.
this._addTabAndReturnListener(matchedOptions);
and I have implemented _addTabAndReturnListener as:
_addTabAndReturnListener: function(options) {
var self = this;
var element = this.element;
var input = this.input[0];
this.input.off('keydown.first'); // Disable listener from previous call
this.input.on('keydown.first', function(e) {
var keycode = e.which;
if (keycode == 9 || keycode == 13) // If tab key pressed
if (options.length == 1) {
var result = null;
element.children("option").each(function() {
if ($(this).text() == options[0].value)
result = this;
})
if (result != null)
input.value = $(result).text();
$(this).attr("title", input.value + " matched").tooltip("open");
input.dispatchEvent(new Event("select"));
}
});
},
I wanted to trigger the select function when the value is selected after the tab is pressed, but not able to do so.
Normally when a value is selected from the dropdown the following functions have been triggered, and the alert is displayed. But it is not working on the tab pressed.
$('#myselect').combobox({
select: function(event, ui) {
alert(event.target);
}
});
What could be the solution for this?
Jsfiddle
I was able to solve this issue by adding a trigger.
$(this).trigger("tabOnChange", result);
and define a new event, called tabOnChange
tabOnChange: function(event, opt) {
opt.selected = true;
this._trigger("select", event, {
item: opt
});
},
Fiddle:

Clicking Container Containing Checkbox - JQuery

I have a dropdown menu on a site that needs the label, checkbox, and container all clickable to activate the checkbox (and update the label of the element.
I have used e.stopPropogation, e.stopImmediatePropagation, and e.preventDefault (and usually preventDefault and stopPropagation together.)
My current code is below. It works on desktop (and responsive desktop in Chrome) just fine; but NOT on iOS. Any thoughts?
// Get the filter label.
var label = $('#edit-f-wrapper .edit-areas-link').data('filter-label');
// Element used to hold the label.
var title = $('#edit-f-wrapper .edit-areas-link label');
// Get a list with all checkboxes.
var checkboxes = $('#edit-f-wrapper input:checkbox');
// Click triggers
var clickTrigger = $('.form-type-bef-checkbox');
// Determine click action to take depending on browser/device
var action = ('ontouchend' in window) ? 'touchend' : 'click';
var checkBoxID = 'input[id^="edit-f-rc-core-cat-evrn-svgeographic"';
// Act on checkbox click - check if action is set, if not, set it to default click
clickTrigger.one(action, function (e) {
e.stopImmediatePropagation();
// Get child of clicked element
var checkboxChild = $(this).children("input[type=checkbox]").eq(0);
// Check it if the checkbox itself wasn't clicked
checkboxChild.prop('checked', !checkboxChild.prop('checked')).change();
}).on(action, checkBoxID, function(e) {
e.stopImmediatePropagation();
e.preventDefault();
// Check it if the checkbox itself wasn't clicked
$(this).prop('checked', !$(this).prop('checked')).change();
}).on(action, "label", function(e) {
e.stopImmediatePropagation();
e.preventDefault();
var checkboxChild = $(this).parent().children("input[type=checkbox]").eq(0);
// Check it if the checkbox itself wasn't clicked
checkboxChild.prop('checked', !checkboxChild.prop('checked')).change();
});
// When we have a change of state...
$(checkBoxID).on('change', function() {
console.log("Changed!");
// Update the title to reflect how many items have been checked.
var items = [];
checkboxes.each(function () {
var checkbox = $(this);
if (checkbox.prop('checked')) {
items.push(checkbox.next('label').html());
}
})
// Update the label data.
if (!items.length) {
title.html(label);
}
else if (items.length === 1) {
title.html(label + ': ' + items[0]);
}
else {
title.html(label + ': ' + items.length + ' selected');
}
});
And, the HTML markup:
<div class="form-item form-type-bef-checkbox form-item-edit-f-rc-core-
cat-evrn-svgeographicarch-cape">
<input type="checkbox" name="f[]" id="edit-f-rc-core-cat-evrn-svgeographicarch-cape" value="rc_core_cat_evrn_svgeographic:Arch Cape">
<label class="option" for="edit-f-rc-core-cat-evrn-svgeographicarch-cape">Arch Cape</label>
</div>

Get Bouncy Content Filter to run automatically

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.

Checkbox div double the label?

I don't know why when a checkbox is clicked, it double the label text associated. Could anyone help me?
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.child').attr('checked', this.checked);
$('.ck,.chkbox,.checkAll ,input:radio').DcustomInput();
});
jQuery.fn.DcustomInput = function(){
$(this).each(function(i){
if($(this).is('[type=checkbox],[type=radio]')){
var input = $(this);
var id=input.attr('id');
// get the associated label using the input's id
var forlabel = $('label[for='+input.attr('id')+']');
var chklabel = forlabel.text();
forlabel.hide();
var label = $("<label for='"+id+"' class='checker'>"+chklabel+"</label>");
//get type, for classname suffix
var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
// alert(label);
// wrap the input + label in a div
$('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input, label);
// find all inputs in this set using the shared name attribute
if(input.is(':disabled')){
if(inputType == 'checkbox' && input.is(':checked')){
label.addClass(' checkedDisabled ');
} else{
label.addClass(' disabled ');
}
}
// necessary for browsers that don't support the :hover pseudo class on labels
label.hover(
function(){
if(!input.is(':disabled') ){
$(this).addClass('hover');
}
if(inputType == 'checkbox' && input.is(':checked') && !input.is(':disabled')){
$(this).addClass('checkedHover');
}
},
function(){ $(this).removeClass('hover checkedHover focus'); }
);
//bind custom event, trigger it, bind click,focus,blur events
input.bind('updateState', function(){
if (input.is(':checked') && !input.is(':disabled')) {
if (input.is(':radio')) {
var allInputs = $('input[name='+input.attr('name')+']');
allInputs.each(function(){
$('label[for='+$(this).attr('id')+']').removeClass('checked');
});
};
label.addClass('checked ');
}
else { label.removeClass('checked checkedHover checkedFocus '); }
})
.trigger('updateState')
.click(function(){
$(this).trigger('updateState');
})
.focus(function(){
label.addClass('focus');
if(inputType == 'checkbox' && input.is(':checked')){
$(this).addClass('checkedFocus');
}
})
.blur(function(){ label.removeClass('focus checkedFocus'); });
}
});
};
</script>
I'm not really aware of what DcustomInput does but I could guess that $('.ck,.chkbox,.checkAll ,input:radio').DcustomInput(); need to be placed on document ready and not on click handler
ok, I've found the solution, just comment these 2 lines:
forlabel.hide();
$('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input, label);
so that the old label is not hidden and we don't try to duplicate the input and the old label.

clearing radio input using jQuery

I have a bunch of radio buttons that are below. These radio buttons are part of a larger form and are optional, so If a user clicks on one, then decides he/she doesn't want the option selected, there is no way to undo this.
I was wondering if there was any jQuery etc, that, when clicking a link for example, clear any radio selection, based on the group name in the HTML?
Thanks
var group_name = "the_group_name";
// if jquery 1.6++
$(":radio[name='" + group_name + "']").prop('checked', false);
// prev than 1.6
// $(":radio[name='" + group_name + "']").attr('checked', false);
Working demo: http://jsfiddle.net/roberkules/66FYL/
var Custom = {
init: function() {
checkAllPrettyCheckboxes = function(caller, container){
// Find the label corresponding to each checkbox and click it
$(container).find('input[type=checkbox]:not(:checked)').each(function(){
if($.browser.msie){
$(this).attr('checked','checked');
}else{
$(this).trigger('click');
};
});
};
uncheckAllPrettyCheckboxes = function(caller, container){
// Find the label corresponding to each checkbox and unselect them
$(container).find('input[type=checkbox]:checked').each(function(){
$('label[for="'+$(this).attr('id')+'"]').trigger('click');
if($.browser.msie){
$(this).attr('checked','');
}else{
$(this).trigger('click');
};
});
};
I have created it in an init function, and adter then i called the init.
}
window.onload = Custom.init;
I have created a solution like roberkules' solution, except mine clears the radiobutton if you click the radiobutton itself while it's checked. Use this if you don't want to add an extra "Clear" button to your layout.
http://jsfiddle.net/P9zZQ/6/
// Requires JQuery 1.4+ (possibly earlier)
$(function () {
// Turn off a radiobutton if clicked again while on
var checkOff = function (event) {
var target = $(event.target);
if (target.is('label')) {
// deal with clicked label
if (target.attr('for')) {
// label has 'for' attribute
target = $('#' + target.attr('for'));
} else {
// label contains a radiobutton as a child
target = target.find('input[type=radio]');
}
}
if (target.is('input:checked[type=radio]')) {
event.preventDefault();
window.setTimeout(function () {
target.attr('checked', false);
}, 200);
}
}
// Find all radiobuttons and labels inside .radio-clearable containers
$(
'.radio-clearable input[type=radio], ' +
'.radio-clearable label').mousedown(function (event) {
// When clicked -- clear if it was checked
checkOff(event);
}).keydown(function (event) {
// When receiving space, escape, enter, del, or bksp -- clear if it was checked
if (event.which == 32 || event.which == 27 || event.which == 13 || which == 46 || which == 8) {
checkOff(event);
}
});
});
Usage: For any radiobutton you want to be clearable in this manner, wrap it in a container with class "radio-clearable".
The code is triggered by clicking or sending a key (Space, Escape, Enter, Del, BkSp) to the radiobutton element or to its label.

Categories