I have a multi selectable telerik RadComboBox component on my page. I'm using an "OnClientDropDownClosed" client side event. I do post back manually, not automatic. What i want is, when the dropdown closed, i want to compare the old checked items with the new checked items on client side. How can i get the old checked items and the new checked items via javascript?
I found the solution. I keep the old selected IdList. On rad combo box closed function, i compare the two lists.
var oldSelectedIdList = [];
function radComboBoxSelectedIdList() {
var selectedIdList = [];
var combo = $find("<%= RadComboBox.ClientID %>");
var items = combo.get_items();
var checkedIndices = items._parent._checkedIndices;
var checkedIndicesCount= checkedIndices.length;
for (var itemIndex = 0; itemIndex < checkedIndicesCount; itemIndex++){
var item = items.getItem(checkedIndices[itemIndex]);
selectedIdList.push(item._properties._data.value);
}
return selectedIdList;
}
$(document).ready(function () {
oldSelectedIdList = radComboBoxSelectedIdList();
});
function areThereAnyChangesAtTheSelection()
{
var selectedIdList = radComboBoxSelectedIdList();
var isTheCountOfEachSelectionEqual = (selectedIdList.length == oldSelectedIdList.length);
if(isTheCountOfEachSelectionEqual == false)
return true;
var oldIdListMINUSNewIdList = $(oldSelectedIdList).not(selectedIdList).get();
var newIdListMINUSOldIdList= $(selectedIdList).not(oldSelectedIdList).get();
if (oldIdListMINUSNewIdList.length != 0 || newIdListMINUSOldIdList.length != 0)
return true;
return false;
}
function onRadComboBoxClosed(sender, args) {
if (areThereAnyChangesAtTheSelection())
//Your Code Here
}
Related
I have a checkbox which determines whether to hide or make elements visible. My question: is there a way to also include if the checkbox was originally unchecked on page-load to permanently remove those elements so they can't be recalled, otherwise continue what is currently below? Hope that makes sense.
function myEmail() {
var emailBox = document.getElementById("checkemail");
var emailradios = document.getElementById("emailradios");
var emailOptOutSix = document.getElementById("emailOptOutSix");
var emailOptOutForever = document.getElementById("emailOptOutForever");
if (emailBox.checked == true){
emailradios.style.visibility = "hidden";
emailforever.style.visibility = "hidden";
emailOptOutSix.checked = false;
emailOptOutForever.checked = false;
} else {
emailradios.style.visibility = "visible";
emailforever.style.visibility = "visible";
}
}
Its a little unclear what your asking. If you want to delete the items when the checkbox is unchecked (on page load) then you could do this:
Here is a working version JSFiddle
It should be noted, that getting the cookie using substring is not the best practice. It would be wise to create a function that handles this. An example can be found here. Working with cookies
//gets the cookie for checked/not checked state
var checked = document.cookie;
//On window load
window.onload = function() {
//Get the value of the cookie
var emailBoxChecked = checked.substring(checked.indexOf("=") + 1);
if (emailBoxChecked == "checked"){
//set the state of the checkbox to true
document.getElementById("emailbox").checked = true
//If checked do something
} else {
//set the state of the checkbox to false
document.getElementById("emailbox").checked = false
//remove radio buttons that are contained within the emailRadios div
var parent = document.getElementById("myForm")
var child = document.getElementById("emailRadios")
parent.removeChild(child)
}
};
//Call this function when the checkbox is clicked
var emailChecked = function () {
var emailBoxChecked = document.getElementById("emailbox").checked
if (emailBoxChecked){
// store the state of the checkbox as checked in a cookie
document.cookie = "email=checked";
} else {
// store the state of the checkbox as NOT checked in a cookie
document.cookie = "email=unchecked";
}
}
Iam using below javascript to limit the check boxes.
function tdClick(value){
var no = 3;
$('input.single-checkbox').on('change', function(evt) {
if($(this).siblings(':checked').length >= no) {
this.checked = false;
}
});
But i am not able to figure out the select ids in the code. The bootstrap-multiselect.js is internally listing out the options. can anyone help me with this..?
use this $("#selector-id :selected").length; to get the length of selected options
function tdClick(value){
var no = 3;
$("#selector_id").on("change", function () {
var count = $("#selector_id :selected").length;
if(count>3){
// your logic
}
});
I added a new toolbar button and an new context menu item to elFinder.
Works nicely but this item should be enabled only if one plain file is selected. So should be dimmed when no file selected and should be dimmed when multiple files are selected or if is selected an directory.
I learned than in the elFinder.prototype.commands.mycmd I should set the this.getstate return value to:
0 if the toolbar/context-menu item should be enabled and
-1 if it should be disabled
So, now have this:
el
Finder.prototype.commands.mycmd= function() {
var self = this,
fm = self.fm;
self.disableOnSearch = true;
self.title = 'mycmd';
self.getstate = function() {
// need help here to add the "directory is selected check"
return fm.selected().length == 1 ? 0 : -1;
}
self.exec = function() {
alert("hello");
}
}
Unfortunately, i know only Perl, so it is a bit hard for me digging thru all elFinder's javascript code to figure out how to master the condition.
Know anybody elFinder enough deeply to help me with the condition?
Just find the solution in the elFinder's download.js.
This works - at least for now.. ;)
elFinder.prototype.commands.mycmd= function() {
var self = this,
fm = self.fm;
self.disableOnSearch = true;
filter = function(hashes) {
return $.map(self.files(hashes), function(f) { return f.mime == 'directory' ? null : f });
};
self.title = 'mycmd';
self.getstate = function() {
var sel = self.fm.selected(),
cnt = sel.length;
return !self._disabled && cnt == 1 && cnt == filter(sel).length ? 0 : -1;
}
self.exec = function() {
alert("hello");
}
}
I am trying to fill an array with strings, the elements that will be added are the HTML of the clicked <\li>, im probably filling it correctly.
My problem is when the user clicks on the checked link again, i want to remove this item from the array
Here is a code sample:
$(document).ready(function(){
var chosen = [];
var chosenCounter = 0;
find("ul").find("li").click(function(){
var checkBox = $(this).find("img").first();
var checkBoxSrc = checkBox.attr("src");
if(checkBoxSrc == "images/unchecked.png"){
checkBoxSrc = "images/checked.png";
checkBox.attr("src",checkBoxSrc);
checkBox = "";
checkBoxSrc = "";
var temp = this.outerHTML;
chosen[chosenCounter] = temp;
chosenCounter ++;
}
if(checkBoxSrc == "images/checked.png"){
checkBoxSrc = "images/unchecked.png";
checkBox.attr("src",checkBoxSrc);
checkBox = "";
checkBoxSrc = "";
for (var j =0; j<=chosen.length; j++){
var tempRemove = this.outerHTML;
chosen.splice( chosen.indexOf( tempRemove ), 1 );
tempRemove = '';
}
}
});
});
I have been trying all functions and ways i found on internet .. but the results doesn't works well, i would be very thankful for a correction and explanation.
Thanks all in advance.
I've gone through an rewritten the code to work much better. There were a number of issues but here is the fixed version that I tested.
Your original code had an if statement and then another if statement. You needed an if and then an else if.
Notice when finding the child element I just use $('img', this) instead of the find operator and first().
Use ID instead of HTML
For debugging there is a console.log statement in there. Remove this so it works in IE.
To add an element to an array use push
No need to loop over splice to remove the item. Just call splice once.
$(document).ready(function () {
var chosenIDs = [];
$("ul li").click(function () {
var checkBox = $('img', this);
var checkBoxSrc = checkBox.attr("src");
var id = $(this).attr('data-id');
console.log(id + ' ' + chosenIDs.length + ' ' + checkBoxSrc);
if (checkBoxSrc == "images/unchecked.png") {
checkBoxSrc = "images/checked.png";
checkBox.attr("src", checkBoxSrc);
chosenIDs.push(id);
}
else if (checkBoxSrc == "images/checked.png") {
checkBoxSrc = "images/unchecked.png";
checkBox.attr("src", checkBoxSrc);
chosenIDs.splice(chosenIDs.indexOf(id), 1);
}
});
});
I am trying to remove an object and store it (in case a user wants to retrieve it later). I have tried storing the object in a variable like it says in the thread below:
How to I undo .detach()?
But the detach() does not remove the element from the DOM or store it. I am also not getting any error messages. Here is the code I am using to detach the element:
function MMtoggle(IDnum) {
var rowID = "row" + IDnum;
var jRow = '#' + rowID;
thisMMbtn = $(jRow).find(".addMMbtn");
var light = false;
var that = this;
if (light == false) {
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
var thisTxt = thisRow.find(".txtContent");
var cellStr = '<div class = "mmCell prep"></div>';
$(cellStr).appendTo(thisTxt);
$(this).unbind("click");
light = true;
}
);
}
else {
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
thisMM = thisRow.find(".mmCell");
SC[rowID].rcbin = thisMM.detach(); //here is where I detach the div and store it in an object
$(this).unbind("click");
light = false;
}
);
}
}
MMtoggle(g.num);
A fiddle of the problem is here: http://jsfiddle.net/pScJc/
(the button that detaches is the '+' button on the right. It is supposed to add a div and then detach it when clicked again.)
Looking at your code I don't think so you need detach for what you are trying to achieve.
Instead try this code.
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
var thisTxt = thisRow.find(".txtContent");
var $mmCell = thisTxt.find('.mmCell');
if($mmCell.length == 0){
$mmCell = $('<div class = "mmCell prep"></div>')
.appendTo(thisTxt).hide();
}
$mmCell.toggle();
//$(this).unbind("click");
}
);
Demo