checkbox value from webstorage performing function

checkbox value from webstorage performing function - javascript

I have multiple checkboxes which when clicked, add an eventSource to my jquery fullcalendar. When I refresh the page, I can retrieve the checkbox values from storage but the event sources are not added. I have to uncheck and then recheck the checkbox.
Here is the function clicking on an indivual checkbox performs.
$("#checkbox1").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', 'EventListRed.php');
} else {
$('#calendar').fullCalendar('removeEventSource', 'EventListRed.php');
}
});
and here is how I using web storage to keep the checkbox values
$(document).ready(function() {
var boxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
if (box.hasAttribute("store")) {
setupBox(box);
}
}
function setupBox(box) {
var storageId = box.getAttribute("store");
var oldVal = localStorage.getItem(storageId);
box.checked = oldVal === "true" ? true : false;
box.addEventListener("change", function() {
localStorage.setItem(storageId, this.checked);
});
}
});
EDIT:
I have added JSFiddle demo as requested.
As you can see the checkbox value is saved, but my events aren't loaded from EventsListRed.php.
Please Note, I am unsure how to link the .php file in the jsfiddle.
I think my issue is I marking the checkbox as checked but its not triggering the change function.

You need to call .fullCalendar( 'refetchEvents' ) before you check that box is checked.
Please see official docs for refetchEvents
function setupBox(box) {
var storageId = box.getAttribute("store");
var oldVal = localStorage.getItem(storageId);
$(box).on("change", function() {
localStorage.setItem(storageId, this.checked);
});
box.checked = oldVal === "true" ? true : false;
$('#calendar').fullCalendar( 'refetchEvents' );
if (box.checked) {
$(box).trigger('change');
}
}

I was able to get what you wanted to achieve but it's seems like a hack.
See JsFiddle Demo
HTML
<input type="checkbox" id="cbRed" store="checkbox3" class="chk" />
<label for="cbRed">Red</label>
<div id='calendar'></div>
CSS
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
#calendar {
width: 600px;
margin: 0 auto;
}
JS
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
});
//Checkbox removing/adding red events
$("#cbRed").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', 'EventListRed.php');
} else {
$('#calendar').fullCalendar('removeEventSource', 'EventListRed.php');
}
});
});
$(document).ready(function() {
var boxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
if (box.hasAttribute("store")) {
setupBox(box);
}
}
function setupBox(box) {
var storageId = box.getAttribute("store");
var oldVal = localStorage.getItem(storageId);
$(box).on("change", function() {
localStorage.setItem(storageId, this.checked);
});
box.checked = oldVal === "true" ? true : false;
if (box.checked) {
$(box).trigger('change');
}
}
});

Related

Pre selecting checkboxes based on array content

I've got a multi select dropdown that displays a selection of countries. I want to have some of these preselected based on the content of an array.
Based on a similar question here How can I check checkboxes based on values? I tried using
var arrayValues = (246,247,248,249,250,251,252,253,254,255,256,257,258,259,261,262,263,265,266,267,268,270,271,272,273,274,275);
var i = 0;
while (arrayValues.length < i) {
var val = arrayValues[i];
$('#restrictCountry input[value="' + val + '"]').prop('checked', 'checked');
i++;
}
but it isn't pre selecting the checkboxes with the values shown in the array.
I've set up a fiddle so you can see how my multi select dropdown works. The pre select script is at the bottom of the javascript pane.
What have I done wrong here?

First you'are mistaken in the array syntax ,
also the loop condition is also falsy ,
and finnaly the selector you made couldn't reach newly created multi select wrapper ,
What I suggest ( a bit tricky ) is to rectify selector , then trigger a click on the check input foreach value ,( this will check the select hidden and genrated wrapper input same time )
while (i < arrayValues.length) {
var val = arrayValues[i];
$('#restrictCountry').next(".ms-options-wrap").find(` input[value=${val}]`).not(":checked").click();
i++;
}
check below snippet :
(function($) {
var defaults = {
placeholder: 'Select options', // text to use in dummy input
columns: 1, // how many columns should be use to show options
search: false, // include option search box
// search filter options
searchOptions: {
'default': 'Search', // search input placeholder text
showOptGroups: false, // show option group titles if no options remaining
onSearch: function(element) {} // fires on keyup before search on options happens
},
selectAll: false, // add select all option
selectGroup: false, // select entire optgroup
minHeight: 200, // minimum height of option overlay
maxHeight: null, // maximum height of option overlay
showCheckbox: true, // display the checkbox to the user
jqActualOpts: {}, // options for jquery.actual
// Callbacks
onLoad: function(element) { // fires at end of list initialization
$(element).hide();
},
onOptionClick: function(element, option) {}, // fires when an option is clicked
// #NOTE: these are for future development
maxWidth: null, // maximum width of option overlay (or selector)
minSelect: false, // minimum number of items that can be selected
maxSelect: false, // maximum number of items that can be selected
};
var msCounter = 1;
function MultiSelect(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this.load();
}
MultiSelect.prototype = {
/* LOAD CUSTOM MULTISELECT DOM/ACTIONS */
load: function() {
var instance = this;
// make sure this is a select list and not loaded
if ((instance.element.nodeName != 'SELECT') || $(instance.element).hasClass('jqmsLoaded')) {
return true;
}
// sanity check so we don't double load on a select element
$(instance.element).addClass('jqmsLoaded');
// add option container
$(instance.element).after('<div class="ms-options-wrap"><button>None Selected</button><div class="ms-options"><ul></ul></div></div>');
var placeholder = $(instance.element).next('.ms-options-wrap').find('> button:first-child');
var optionsWrap = $(instance.element).next('.ms-options-wrap').find('> .ms-options');
var optionsList = optionsWrap.find('> ul');
var hasOptGroup = $(instance.element).find('optgroup').length ? true : false;
var maxWidth = null;
if (typeof instance.options.width == 'number') {
optionsWrap.parent().css('position', 'relative');
maxWidth = instance.options.width;
} else if (typeof instance.options.width == 'string') {
$(instance.options.width).css('position', 'relative');
maxWidth = '100%';
} else {
optionsWrap.parent().css('position', 'relative');
}
var maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
if (instance.options.maxHeight) {
maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxheight;
}
maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxHeight;
optionsWrap.css({
maxWidth: maxWidth,
minHeight: instance.options.minHeight,
maxHeight: maxHeight,
overflow: 'auto'
}).hide();
// isolate options scroll
// #source: https://github.com/nobleclem/jQuery-IsolatedScroll
optionsWrap.bind('touchmove mousewheel DOMMouseScroll', function(e) {
if (($(this).outerHeight() < $(this)[0].scrollHeight)) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
if (($(this).outerHeight() + $(this)[0].scrollTop) > $(this)[0].scrollHeight) {
e.preventDefault();
this.scrollTop += (delta < 0 ? 1 : -1);
}
}
});
// hide options menus if click happens off of the list placeholder button
$(document).off('click.ms-hideopts').on('click.ms-hideopts', function(event) {
if (!$(event.target).closest('.ms-options-wrap').length) {
$('.ms-options-wrap > .ms-options:visible').hide();
}
});
// disable button action
placeholder.bind('mousedown', function(event) {
// ignore if its not a left click
if (event.which != 1) {
return true;
}
// hide other menus before showing this one
$('.ms-options-wrap > .ms-options:visible').each(function() {
if ($(this).parent().prev()[0] != optionsWrap.parent().prev()[0]) {
$(this).hide();
}
});
// show/hide options
optionsWrap.toggle();
// recalculate height
if (optionsWrap.is(':visible')) {
optionsWrap.css('maxHeight', '');
var maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
if (instance.options.maxHeight) {
maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxheight;
}
maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxHeight;
optionsWrap.css('maxHeight', maxHeight);
}
}).click(function(event) {
event.preventDefault();
});
// add placeholder copy
if (instance.options.placeholder) {
placeholder.text(instance.options.placeholder);
}
// add search box
if (instance.options.search) {
optionsList.before('<div class="ms-search"><input type="text" value="" placeholder="' + instance.options.searchOptions['default'] + '" /></div>');
var search = optionsWrap.find('.ms-search input');
search.on('keyup', function() {
// ignore keystrokes that don't make a difference
if ($(this).data('lastsearch') == $(this).val()) {
return true;
}
$(this).data('lastsearch', $(this).val());
// USER CALLBACK
if (typeof instance.options.searchOptions.onSearch == 'function') {
instance.options.searchOptions.onSearch(instance.element);
}
// search non optgroup li's
optionsList.find('li:not(.optgroup)').each(function() {
var optText = $(this).text();
// show option if string exists
if (optText.toLowerCase().indexOf(search.val().toLowerCase()) > -1) {
$(this).show();
}
// don't hide selected items
else if (!$(this).hasClass('selected')) {
$(this).hide();
}
// hide / show optgroups depending on if options within it are visible
if (!instance.options.searchOptions.showOptGroups && $(this).closest('li.optgroup')) {
$(this).closest('li.optgroup').show();
if ($(this).closest('li.optgroup').find('li:visible').length) {
$(this).closest('li.optgroup').show();
} else {
$(this).closest('li.optgroup').hide();
}
}
});
});
}
// add global select all options
if (instance.options.selectAll) {
optionsList.before('Select all');
}
// handle select all option
optionsWrap.on('click', '.ms-selectall', function(event) {
event.preventDefault();
if ($(this).hasClass('global')) {
// check if any selected if so then select them
if (optionsList.find('li:not(.optgroup)').filter(':not(.selected)').length) {
optionsList.find('li:not(.optgroup)').filter(':not(.selected)').find('input[type="checkbox"]').trigger('click');
}
// deselect everything
else {
optionsList.find('li:not(.optgroup).selected input[type="checkbox"]').trigger('click');
}
} else if ($(this).closest('li').hasClass('optgroup')) {
var optgroup = $(this).closest('li.optgroup');
// check if any selected if so then select them
if (optgroup.find('li:not(.selected)').length) {
optgroup.find('li:not(.selected) input[type="checkbox"]').trigger('click');
}
// deselect everything
else {
optgroup.find('li.selected input[type="checkbox"]').trigger('click');
}
}
});
// add options to wrapper
var options = [];
$(instance.element).children().each(function() {
if (this.nodeName == 'OPTGROUP') {
var groupOptions = [];
$(this).children('option').each(function() {
groupOptions[$(this).val()] = {
name: $(this).text(),
value: $(this).val(),
checked: $(this).prop('selected')
};
});
options.push({
label: $(this).attr('label'),
options: groupOptions
});
} else if (this.nodeName == 'OPTION') {
options.push({
name: $(this).text(),
value: $(this).val(),
checked: $(this).prop('selected')
});
} else {
// bad option
return true;
}
});
instance.loadOptions(options);
// COLUMNIZE
if (hasOptGroup) {
// float non grouped options
optionsList.find('> li:not(.optgroup)').css({
float: 'left',
width: (100 / instance.options.columns) + '%'
});
// add CSS3 column styles
optionsList.find('li.optgroup').css({
clear: 'both'
}).find('> ul').css({
'column-count': instance.options.columns,
'column-gap': 0,
'-webkit-column-count': instance.options.columns,
'-webkit-column-gap': 0,
'-moz-column-count': instance.options.columns,
'-moz-column-gap': 0
});
// for crappy IE versions float grouped options
if (this._ieVersion() && (this._ieVersion() < 10)) {
optionsList.find('li.optgroup > ul > li').css({
float: 'left',
width: (100 / instance.options.columns) + '%'
});
}
} else {
// add CSS3 column styles
optionsList.css({
'column-count': instance.options.columns,
'column-gap': 0,
'-webkit-column-count': instance.options.columns,
'-webkit-column-gap': 0,
'-moz-column-count': instance.options.columns,
'-moz-column-gap': 0
});
// for crappy IE versions float grouped options
if (this._ieVersion() && (this._ieVersion() < 10)) {
optionsList.find('> li').css({
float: 'left',
width: (100 / instance.options.columns) + '%'
});
}
}
// BIND SELECT ACTION
optionsWrap.on('click', 'input[type="checkbox"]', function() {
$(this).closest('li').toggleClass('selected');
var select = optionsWrap.parent().prev();
// toggle clicked option
select.find('option[value="' + $(this).val() + '"]').prop(
'selected', $(this).is(':checked')
).closest('select').trigger('change');
if (typeof instance.options.onOptionClick == 'function') {
instance.options.onOptionClick();
}
instance._updatePlaceholderText();
});
// hide native select list
if (typeof instance.options.onLoad === 'function') {
instance.options.onLoad(instance.element);
} else {
$(instance.element).hide();
}
},
/* LOAD SELECT OPTIONS */
loadOptions: function(options, overwrite) {
overwrite = (typeof overwrite == 'boolean') ? overwrite : true;
var instance = this;
var optionsList = $(instance.element).next('.ms-options-wrap').find('> .ms-options > ul');
if (overwrite) {
optionsList.find('> li').remove();
}
for (var key in options) {
var thisOption = options[key];
var container = $('<li></li>');
// optgroup
if (thisOption.hasOwnProperty('options')) {
container.addClass('optgroup');
container.append('<span class="label">' + thisOption.label + '</span>');
container.find('> .label').css({
clear: 'both'
});
if (instance.options.selectGroup) {
container.append('Select all')
}
container.append('<ul></ul>');
for (var gKey in thisOption.options) {
var thisGOption = thisOption.options[gKey];
var gContainer = $('<li></li>').addClass('ms-reflow');
instance._addOption(gContainer, thisGOption);
container.find('> ul').append(gContainer);
}
}
// option
else if (thisOption.hasOwnProperty('value')) {
container.addClass('ms-reflow')
instance._addOption(container, thisOption);
}
optionsList.append(container);
}
optionsList.find('.ms-reflow input[type="checkbox"]').each(function(idx) {
if ($(this).css('display').match(/block$/)) {
var checkboxWidth = $(this).outerWidth();
checkboxWidth = checkboxWidth ? checkboxWidth : 15;
$(this).closest('label').css(
'padding-left',
(parseInt($(this).closest('label').css('padding-left')) * 2) + checkboxWidth
);
$(this).closest('.ms-reflow').removeClass('ms-reflow');
}
});
instance._updatePlaceholderText();
},
/* RESET THE DOM */
unload: function() {
$(this.element).next('.ms-options-wrap').remove();
$(this.element).show(function() {
$(this).css('display', '').removeClass('jqmsLoaded');
});
},
/* RELOAD JQ MULTISELECT LIST */
reload: function() {
// remove existing options
$(this.element).next('.ms-options-wrap').remove();
$(this.element).removeClass('jqmsLoaded');
// load element
this.load();
},
/** PRIVATE FUNCTIONS **/
// update selected placeholder text
_updatePlaceholderText: function() {
var instance = this;
var placeholder = $(instance.element).next('.ms-options-wrap').find('> button:first-child');
var optionsWrap = $(instance.element).next('.ms-options-wrap').find('> .ms-options');
var select = optionsWrap.parent().prev();
// get selected options
var selOpts = [];
select.find('option:selected').each(function() {
selOpts.push($(this).text());
});
// UPDATE PLACEHOLDER TEXT WITH OPTIONS SELECTED
placeholder.text(selOpts.join(', '));
var copy = placeholder.clone().css({
display: 'inline',
width: 'auto',
visibility: 'hidden'
}).appendTo(optionsWrap.parent());
// if the jquery.actual plugin is loaded use it to get the widths
var copyWidth = (typeof $.fn.actual !== 'undefined') ? copy.actual('width', instance.options.jqActualOpts) : copy.width();
var placeWidth = (typeof $.fn.actual !== 'undefined') ? placeholder.actual('width', instance.options.jqActualOpts) : placeholder.width();
// if copy is larger than button width use "# selected"
if (copyWidth > placeWidth) {
placeholder.text(selOpts.length + ' selected');
}
// if options selected then use those
else if (selOpts.length) {
placeholder.text(selOpts.join(', '));
}
// replace placeholder text
else {
placeholder.text(instance.options.placeholder);
}
// remove dummy element
copy.remove();
},
// Add option to the custom dom list
_addOption: function(container, option) {
container.text(option.name);
container.prepend(
$('<input type="checkbox" value="" title="" />')
.val(option.value)
.attr('title', option.name)
.attr('id', 'ms-opt-' + msCounter)
);
if (option.checked) {
container.addClass('default');
container.addClass('selected');
container.find('input[type="checkbox"]').prop('checked', true);
}
var label = $('<label></label>').attr('for', 'ms-opt-' + msCounter);
container.wrapInner(label);
if (!this.options.showCheckbox) {
container.find('input[id="ms-opt-' + msCounter + '"]').hide();
}
msCounter = msCounter + 1;
},
// check ie version
_ieVersion: function() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
};
// ENABLE JQUERY PLUGIN FUNCTION
$.fn.multiselect = function(options) {
var args = arguments;
var ret;
// menuize each list
if ((options === undefined) || (typeof options === 'object')) {
return this.each(function() {
if (!$.data(this, 'plugin_multiselect')) {
$.data(this, 'plugin_multiselect', new MultiSelect(this, options));
}
});
} else if ((typeof options === 'string') && (options[0] !== '_') && (options !== 'init')) {
this.each(function() {
var instance = $.data(this, 'plugin_multiselect');
if (instance instanceof MultiSelect && typeof instance[options] === 'function') {
ret = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
}
// special destruct handler
if (options === 'unload') {
$.data(this, 'plugin_multiselect', null);
}
});
return ret;
}
};
}(jQuery));
$('#restrictCountry').multiselect({
columns: 4,
placeholder: 'Select Restricted Countries',
search: true,
selectAll: true
});
$(function() {
var arrayValues = [246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 261, 262, 263, 265, 266, 267, 268, 270, 271, 272, 273, 274, 275];
var i = 0;
while (i < arrayValues.length) {
var val = arrayValues[i];
$('#restrictCountry').next(".ms-options-wrap").find(` input[value=${val}]`).not(":checked").click();
i++;
}
})
.ms-options-wrap,
.ms-options-wrap * {
box-sizing: border-box;
list-style-type: none;
}
.ms-options-wrap>button:focus,
.ms-options-wrap>button {
position: relative;
width: 100%;
text-align: left;
border: 1px solid #aaa;
background-color: #fff;
padding: 5px 20px 5px 5px;
margin-top: 1px;
font-size: 13px;
color: #aaa;
outline: none;
white-space: nowrap;
}
.ms-options-wrap>button:after {
content: ' ';
height: 0;
position: absolute;
top: 50%;
right: 5px;
width: 0;
border: 6px solid rgba(0, 0, 0, 0);
border-top-color: #999;
margin-top: -3px;
}
.ms-options-wrap>.ms-options {
position: absolute;
left: 0;
width: 100%;
margin-top: 1px;
margin-bottom: 20px;
background: white;
z-index: 2000;
border: 1px solid #aaa;
text-align: left;
}
.ms-options-wrap>.ms-options>.ms-search input {
width: 100%;
padding: 4px 5px;
border: none;
border-bottom: 1px groove;
outline: none;
}
.ms-options-wrap>.ms-options .ms-selectall {
display: inline-block;
font-size: .9em;
text-transform: lowercase;
text-decoration: none;
}
.ms-options-wrap>.ms-options .ms-selectall:hover {
text-decoration: underline;
}
.ms-options-wrap>.ms-options>.ms-selectall.global {
margin: 4px 5px;
}
.ms-options-wrap>.ms-options>ul>li.optgroup {
padding: 5px;
}
.ms-options-wrap>.ms-options>ul>li.optgroup+li.optgroup {
border-top: 1px solid #aaa;
}
.ms-options-wrap>.ms-options>ul>li.optgroup .label {
display: block;
padding: 5px 0 0 0;
font-weight: bold;
}
.ms-options-wrap>.ms-options>ul label {
position: relative;
display: inline-block;
width: 100%;
padding: 8px 4px;
margin: 1px 0;
}
.ms-options-wrap>.ms-options>ul li.selected label,
.ms-options-wrap>.ms-options>ul label:hover {
background-color: #efefef;
}
.ms-options-wrap>.ms-options>ul input[type="checkbox"] {
margin-right: 5px;
position: absolute;
left: 4px;
top: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<p class="col-sm-3 control-label">Restricted Countries:</p>
<div class="col-sm-9 col-md-6">
<select rel="dropdown" name="restrictCountry[]" multiple id="restrictCountry">
<option value="253">Austria</option>
<option value="252">Belgium</option>
<option value="266">Bulgaria</option>
<option value="270">Croatia</option>
<option value="274">Czech Republic</option>
<option value="254">Denmark</option>
<option value="262">Estonia</option>
<option value="258">Finland</option>
<option value="247">France</option>
<option value="248">Germany</option>
<option value="260">Gibraltar</option>
<option value="265">Greece</option>
<option value="243">Guernsey</option>
<option value="267">Hungary</option>
<option value="264">Iceland</option>
<option value="246">Ireland</option>
<option value="244">Isle of Man</option>
<option value="255">Italy</option>
<option value="245">Jersey</option>
<option value="263">Latvia</option>
<option value="259">Lithuania</option>
<option value="275">Luxembourg</option>
<option value="273">Malta</option>
<option value="242">Montenegro</option>
<option value="249">Netherlands</option>
<option value="268">Norway</option>
<option value="241">Palestine, State of</option>
<option value="250">Poland</option>
<option value="261">Portugal</option>
<option value="272">Romania</option>
<option value="277">Serbia</option>
<option value="271">Slovakia</option>
<option value="256">Slovenia</option>
<option value="251">Spain</option>
<option value="257">Sweden</option>
<option value="269">Switzerland</option>
<option value="276">Turkey</option>
</select>
</div>
</div>

fix your lines:
var arrayValues = [246,247,248,249,250,251,252,253,254,255,256,257,258,259,261,262,263,265,266,267,268,270,271,272,273,274,275];
var i = 0;
while (arrayValues.length > i) {
var val = arrayValues[i];
$('li input[value=' + val + ']').prop('checked', true);
i++;
}
the problem is comming the fact the dropdown is built from the options defined..If you see the picture, you cant access to input from the id of select tag.

How to add SINGLE QUOTE to each array element when pass to PHP via ajax?

I have created a drop down menu with checkbox options. The idea is when user select one or more checkboxes, the checked value should be passed to an SQL statement in a php page through AJAX. However, my sql does not seem to generate the result as it should be. My SQL statement is using an IN operator where the checked value should be inside the WHERE clause. For example, if I select CONSTRUCTION, HCL and RSS from the drop the menu checkboxes, the SQL statement in the php page should be SELECT * FROM STAFF WHERE SERVICE IN ('CONSTRUCTION', 'HCL', 'RSS'). However, when i echo my SQL statement, it was showing the checked values without the single quote - SELECT * FROM STAFF WHERE SERVICE IN (CONSTRUCTION, HCL, RS)which is incorrect. How can i include the single quotes for each checked values from the drop down for the IN operator? Can anyone help?
Below is my PHP and the drop down menu
sql.php
<?php
if($_POST['dataarray'] != ""){
$sql = "SELECT * FROM STAFF WHERE SERVICE IN (".$_POST['dataarray'].")";
.....
...
/*************SQL output*********************/
}
?>
Drop Down Menu with checkboxes
$(document).ready(function(){
/*********************convert select into multiselect************************/
$("#service").CreateMultiCheckBox({ width: '300px', defaultText : 'Select Below', height:'auto' });
$("#service").on('change', function (){
var dataarray = [];
$("#service option").each(function(){
if($(this).is(":checked"))
{dataarray.push($(this).val());}
});
dataarray = dataarray.toString();
$.ajax({
url: "sql.php",
method:"POST",
data: {dataarray:dataarrayy},
success: function(data){
}
});
});
/**********************creating of checkboxes for each select option************************/
$(document).on("click", ".MultiCheckBox", function () {
var detail = $(this).next();
detail.show();
});
$(document).on("click", ".MultiCheckBoxDetailHeader input", function (e) {
e.stopPropagation();
var hc = $(this).prop("checked");
$(this).closest(".MultiCheckBoxDetail").find(".MultiCheckBoxDetailBody input").prop("checked", hc);
$(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();
});
$(document).on("click", ".MultiCheckBoxDetailHeader", function (e) {
var inp = $(this).find("input");
var chk = inp.prop("checked");
inp.prop("checked", !chk);
$(this).closest(".MultiCheckBoxDetail").find(".MultiCheckBoxDetailBody input").prop("checked", !chk);
$(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();
});
$(document).on("click", ".MultiCheckBoxDetail .cont input", function (e) {
e.stopPropagation();
$(this).closest(".MultiCheckBoxDetail").next().UpdateSelect();
var val = ($(".MultiCheckBoxDetailBody input:checked").length == $(".MultiCheckBoxDetailBody input").length)
$(".MultiCheckBoxDetailHeader input").prop("checked", val);
});
$(document).on("click", ".MultiCheckBoxDetail .cont", function (e) {
var inp = $(this).find("input");
var chk = inp.prop("checked");
inp.prop("checked", !chk);
var multiCheckBoxDetail = $(this).closest(".MultiCheckBoxDetail");
var multiCheckBoxDetailBody = $(this).closest(".MultiCheckBoxDetailBody");
multiCheckBoxDetail.next().UpdateSelect();
var val = ($(".MultiCheckBoxDetailBody input:checked").length == $(".MultiCheckBoxDetailBody input").length)
$(".MultiCheckBoxDetailHeader input").prop("checked", val);
});
$(document).mouseup(function (e) {
var container = $(".MultiCheckBoxDetail");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
});
var defaultMultiCheckBoxOption = { width: '220px', defaultText: 'Select Below', height: '200px' };
jQuery.fn.extend({
CreateMultiCheckBox: function (options) {
var localOption = {};
localOption.width = (options != null && options.width != null && options.width != undefined) ? options.width : defaultMultiCheckBoxOption.width;
localOption.defaultText = (options != null && options.defaultText != null && options.defaultText != undefined) ? options.defaultText : defaultMultiCheckBoxOption.defaultText;
localOption.height = (options != null && options.height != null && options.height != undefined) ? options.height : defaultMultiCheckBoxOption.height;
this.hide();
this.attr("multiple", "multiple");
var divSel = $("<div class='MultiCheckBox'>" + localOption.defaultText + "<span class='k-icon k-i-arrow-60-down'><svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='sort-down' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-sort-down fa-w-10 fa-2x'><path fill='currentColor' d='M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z' class=''></path></svg></span></div>").insertBefore(this);
divSel.css({ "width": localOption.width });
var detail = $("<div class='MultiCheckBoxDetail'><div class='MultiCheckBoxDetailHeader'><input type='checkbox' class='mulinput' value='-1982' /><div>Select All</div></div><div class='MultiCheckBoxDetailBody'></div></div>").insertAfter(divSel);
detail.css({ "width": parseInt(options.width) + 10, "max-height": localOption.height });
var multiCheckBoxDetailBody = detail.find(".MultiCheckBoxDetailBody");
this.find("option").each(function () {
var val = $(this).attr("value");
if (val == undefined)
val = '';
multiCheckBoxDetailBody.append("<div class='cont'><div><input type='checkbox' class='mulinput' value='" + val + "' /></div><div>" + $(this).text() + "</div></div>");
});
multiCheckBoxDetailBody.css("max-height", (parseInt($(".MultiCheckBoxDetail").css("max-height")) - 28) + "px");
},
UpdateSelect: function () {
var arr = [];
this.prev().find(".mulinput:checked").each(function () {
arr.push($(this).val());
});
this.val(arr).change();
},
});
.MultiCheckBox {
border:1px solid #e2e2e2;
padding: 5px;
border-radius:4px;
cursor:pointer;
background:#ffffff;
}
.MultiCheckBox .k-icon{
font-size: 15px;
float: right;
font-weight: bolder;
margin-top: -7px;
height: 10px;
width: 14px;
color:#787878;
}
.MultiCheckBoxDetail {
display:none;
position:absolute;
border:1px solid #e2e2e2;
overflow-y:hidden;
background:#ffffff;
}
.MultiCheckBoxDetailBody {
overflow-y:scroll;
}
.MultiCheckBoxDetail .cont {
clear:both;
overflow: hidden;
padding: 2px;
}
.MultiCheckBoxDetail .cont:hover {
background-color:#cfcfcf;
}
.MultiCheckBoxDetailBody > div > div {
float:left;
}
.MultiCheckBoxDetail>div>div:nth-child(1) {
}
.MultiCheckBoxDetailHeader {
overflow:hidden;
position:relative;
height: 28px;
background-color:#3d3d3d;
}
.MultiCheckBoxDetailHeader>input {
position: absolute;
top: 4px;
left: 3px;
}
.MultiCheckBoxDetailHeader>div {
position: absolute;
top: 5px;
left: 24px;
color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select name="service" class="service" id="service">
<option value="CONSTRUCTION">Construction</option>
<option value="HCL">HCL</option>
<option value="MANUFACTURING">Manufacturing</option>
<option value="MYE">MYE</option>
<option value="RSS">RSS</option>
<option value="SERVICE">SERVICE</option>
<option value="NA">NA</option>
</select>

What you are doing there is very risky. You are putting the $_POST input directly into your sql-Query. This can lead to serious mysql-injections issues.
You should sanitize your $_POST data first. For instance use Methods like
stripslashes to remove unwanted characters that can lead to sql-injections.
Or use a database wrapper that uses prepared statements like Pdo
To answer your String related question:
You can iterate over your data array and wrap the string with quotes:
E.g.
$dataArray = [];
foreach ($_POST['dataarray'] as $item) {
$dataArray[] = "'" . $item . "'";
}
$sql = "SELECT * FROM STAFF WHERE SERVICE IN (". implode(', ', $dataArray) .")";

Combination filters + quick search with Isotope

I’m trying to combine two Isotope filtering features (combination filtering via checkbox and quick search) with no luck. My attempt is here: https://codepen.io/anon/pen/WJvmaj, which is a combination of both of the mentioned feature's demos.
At the moment the search is set to return searchResult and checkboxResult, the latter of which isn’t being defined properly in the code I can tell, and there lies my problem: I’m not sure what to set the checkboxResult variable to in order for it to target what’s being returned by the checkbox filtering.

Check if the element includes the text that input in search input or not with .includes() and if the element has any of selected class from checkboxs' value.
BTW, next time please provide a Minimal, Complete, and Verifiable example that demonstrates the problem, not a link to your fiddle or codepen, cause the links would be broken and other users couldn't understand what you asked and the scenario of the question.
$container.isotope({
filter: function() {
var $this = $(this)
var checkText = text == '' ? true : $this.text().includes(text)
var checkClass = inclusives.length == 0 ? true : false;
$.each(inclusives, function(index, c) {
var _class = $this.hasClass(c)
if (_class) {
checkClass = true;
return;
}
})
return checkText && checkClass
}
})
// quick search regex
var qsRegex;
var checkboxFilter;
// templating
var colors = ['red', 'green', 'blue', 'orange'];
var sizes = ['small', 'medium', 'large'];
var prices = [10, 20, 30];
createItems();
// init Isotope
var $container = $('#container')
var $output = $('#output');
// filter with selects and checkboxes
var $checkboxes = $('#form-ui input');
function createItems() {
var $items;
// loop over colors, sizes, prices
// create one item for each
for (var i = 0; i < colors.length; i++) {
for (var j = 0; j < sizes.length; j++) {
for (var k = 0; k < prices.length; k++) {
var color = colors[i];
var size = sizes[j];
var price = prices[k];
var $item = $('<div />', {
'class': 'item ' + color + ' ' + size + ' price' + price
});
$item.append('<p>' + size + '</p><p>$' + price + '</p>');
// add to items
$items = $items ? $items.add($item) : $item;
}
}
}
$items.appendTo($('#container'));
}
var $quicksearch = $('#quicksearch')
// debounce so filtering doesn't happen every millisecond
function debounce(fn, threshold) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout(timeout);
var args = arguments;
var _this = this;
function delayed() {
fn.apply(_this, args);
}
timeout = setTimeout(delayed, threshold);
};
}
function Filter() {
// map input values to an array
var inclusives = [];
// inclusive filters from checkboxes
$checkboxes.each(function(i, elem) {
// if checkbox, use value if checked
if (elem.checked) {
inclusives.push(elem.value);
}
});
// combine inclusive filters
var filterValue = inclusives.length ? inclusives.join(', ') : '*';
var text = $quicksearch.val()
$container.isotope({
filter: function() {
var $this = $(this)
var checkText = text == '' ? true : $this.text().includes(text)
var checkClass = inclusives.length == 0 ? true : false;
$.each(inclusives, function(index, c) {
var _class = $this.hasClass(c)
if (_class) {
checkClass = true;
return;
}
})
return checkText && checkClass
}
})
$output.text(filterValue);
}
$quicksearch.on('input', debounce(function() {
Filter()
}));
$checkboxes.change(function() {
Filter()
});
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.item {
width: 100px;
height: 100px;
float: left;
margin: 5px;
padding: 5px;
}
.item p {
margin: 0;
}
.red {
background: #F33;
}
.blue {
background: #88F;
}
.green {
background: #3A3;
}
.orange {
background: orange;
}
select,
label,
input {
font-size: 20px;
}
label {
margin-right: 10px;
}
#quicksearch {
height: 30px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//npmcdn.com/isotope-layout#3/dist/isotope.pkgd.js"></script>
<p><input type="text" id="quicksearch" placeholder="Search" /></p>
<div id="form-ui">
<p>
<label><input type="checkbox" value="red" /> red</label>
<label><input type="checkbox" value="green" /> green</label>
<label><input type="checkbox" value="blue" /> blue</label>
<label><input type="checkbox" value="orange" /> orange</label>
</p>
<p id="output">--</p>
</div>
<div id="container">
<!-- items added with JS -->
</div>

if else and counter are not doing what is expected

For some reason my counter isn't changing to 1 when I click again it makes the width 100% again.(Found this out using Chrome's inspect)
$(document).ready(function columnreacts1() {
var columncounter1 = 0;
if (columncounter1 == 0) {
$("#lol").click(function() {
$("#column1").animate({ width: '100%' });
});
$("#lol").click(function() {
$("#column2").hide();
});
columncounter1 = 1;
} else {
$("#lol").click(function() {
$("#column1").animate({ width: '50%' });
});
$("#lol").click(function() {
$("#column2").show();
});
columncounter1 = 0;
}
});

It seems the condition need to be checked after click event. Inside the event check the if condition.Also action on column2 & column1 is due to same event,so attaching one click event will work
$(document).ready(function columnreacts1() {
var columncounter1 = 0;
$("#lol").click(function() {
if(columncounter1 === 0) {
$("#column1").animate({width: '100%'});
$("#column2").hide();
columncounter1 = 1;
}
else {
$("#column1").animate({width: '50%'});
$("#column2").show();
columncounter1 = 0;
}
});
});

Javascript function not firing and console not offering any insight

Anyone know what is wrong with this code JS code? The function does not fire and console isn't offering any insight. This was working in the click function with minor changes but not in its own function.
//History Chart
$expanded = true;
var $parent;
function graphShowHide(parent) {
$parent = parent;
if ($expanded) {
$('#ExpandedGraphRow').hide("fast", function() {
});
if($('body').innerWidth() < 673) {
$('div.nbs-flexisel-nav-left, div.nbs-flexisel-nav-right').css('top', '415px');
$(parent).find('#ExpandedGraphRow').css({
position: 'relative',
bottom: '0'
});
$(parent).find('.animation-wrapper').animate({
height: '397px'},
200, function() {
});
}
setTimeout(function($) {
$(parent).find('.history-bar-wrapper').width('100%');
}, 200);
$(parent).find('h4 img').hide('fast');
$(parent).find('h4 span').width('100%').css('float', 'none');
$expanded = false;
$(this).text('show history');
} else {
var currentWidth = $(parent).find('h4').width();
var nthChild = $(parent).index();
if($('body').innerWidth() > 982 && nthChild == 2) {
$('.nbs-flexisel-nav-right').trigger('click');
} else if($('body').innerWidth() < 983 && nthChild == 1) {
$('.nbs-flexisel-nav-right').trigger('click');
}
$(parent).find('h4 span, .history-bar-wrapper').width(currentWidth);
$(parent).find('h4 span').css('float', 'left');
$(parent).find('h4 img').show('slow');
$('#ExpandedGraphRow').show("slow", function() {
});
if($('body').innerWidth() < 673) {
$('div.nbs-flexisel-nav-left, div.nbs-flexisel-nav-right').css('top', '748px');
$(parent).find('#ExpandedGraphRow').css({
position: 'absolute',
bottom: '66px'
});
$(parent).find('.animation-wrapper').animate({
height: '729px'},
200, function() {
});
}
$(this).text('hide history');
$expanded = true;
}
}
$('.history-button').click(graphShowHide('.BMI'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Try this:
$('.history-button').click(function() {
graphShowHide('.BMI');
});

You are calling the function, not binding it to the click. Wrap the call in another function for it to work correctly:
$('.history-button').click(function() {
graphShowHide('.BMI');
});
http://learn.jquery.com/javascript-101/functions/

You have to change this line:
$('.history-button').click(graphShowHide('.BMI'));
By this one:
$('.history-button').click(function() { graphShowHide('.BMI') });

We Keep Coding

JavaScript is the programming language of the Web.

checkbox value from webstorage performing function - javascript

Related

Pre selecting checkboxes based on array content

How to add SINGLE QUOTE to each array element when pass to PHP via ajax?

Combination filters + quick search with Isotope

if else and counter are not doing what is expected

Javascript function not firing and console not offering any insight

Categories

Resources