I am using SharePoint Calendar and we are using multiple columns and it is 25 columns, in each time when we want to add new record, we have to skip a lot of columns. So using a dropdown list by showing or hiding multiple columns based on my selection would be a good idea.
What I did after discovering below code, I create a dropdown named Selection and applied the script code below but however it does not work based on my selection. I will be grateful if you guys could help me on this issue.
Thank you
<script src="/SiteAssets/jquery-3.3.1.js"></script>
<script src="/SiteAssets/sputility.js "></script>
<script>
$(document).change(function() {
var ddlValue = SPUtility.GetSPField('Selection').GetValue();
if (ddlValue == 'Country') {
SPUtility.ShowSPField('Country');
SPUtility.ShowSPField('Colour');
SPUtility.HideSPField('Animal');
SPUtility.HideSPField('Fruit');
}
if (ddlValue == 'Fruit') {
SPUtility.ShowSPField('Fruit');
SPUtility.ShowSPField('Colour');
SPUtility.HideSPField('Country');
SPUtility.HideSPField('Animal');
}
if (ddlValue == 'Animal') {
SPUtility.ShowSPField('Animal');
SPUtility.HideSPField('Country');
SPUtility.HideSPField('Fruit');
SPUtility.HideSPField('Colour');
}
if (ddlValue == 'Colour') {
SPUtility.ShowSPField('Colour');
SPUtility.ShowSPField('Animal');
SPUtility.HideSPField('Country');
SPUtility.HideSPField('Fruit');
}
});
</script>
First thing you need to do is create a change() function linked to your dropdown so that the function triggers every time you change the values. You can do that by doing this:
$("your selector for your dropdownfield").change(function() {
//your actions here
});
The next thing you need to do is get the value of the dropdown field then perform the hiding of the fields based from its value. To do that, you need to do the following:
var ddlValue = SPUtility.GetSPField('Selection').GetValue();
if (ddlValue == 'Test Value 1') {
//hide fields for 'Test Value 1'
}
So if we combine the two together you will end up with:
$("your selector for your dropdownfield").change(function() {
var ddlValue = SPUtility.GetSPField('Selection').GetValue();
if (ddlValue == 'Test Value 1') {
//hide fields for 'Test Value 1'
}
});
You can just add more if conditions within the change() function and you should now be able to hide/show fields based on the value of the dropdown.
Let me know if it works!
Related
I want to create a list of hundred image boxes (50x50 px), and I wanna be able to choose four of them. To check the fifth one, I'd have to uncheck one of the previous ones.
I have found jQuery UI selectable component to do this, I could be able to use ajax to dynamically save information to the database (everything has to be stored in the database here).
The problem is that I couldn't find options to limit selection to 4, and I couldn't find the option to select elements by default after the page is loaded.
How can I do what I want to?
Right now I only have jQuery code:
$("#selectable").selectable();
An SQL choosing images and simple for loop generating those boxes.
Thanks!
This will limit to the first 4 selections using jQueryUI selectable
function clearOverlimitSelections(evt, ui) {
var selectableClasses = {
selectableselecting: 'ui-selecting',
selectableselected: 'ui-selected'
},
selectableClassName = selectableClasses[evt.type];
var $selection = $(this).find('.' + selectableClassName);
if ($selection.length >= 4) {
$selection.filter(':gt(3)').removeClass(selectableClassName)
}
}
$("#selectable").selectable({
selecting: clearOverlimitSelections,
selected: clearOverlimitSelections
});
DEMO
Suppose you have this:
<img class="select-4" ...>
<img class="select-4" ...>
...
<img class="select-4" ...>
The following jQuery code should select a maximum of 4 images:
$('img.select-4').on('click', function(){
var iAmSelected = $(this).hasClass('selected');
if (iAmSelected) {
$(this).removeClass('selected');
} else {
var canAddSelection = $('img.select-4').length < 4;
if (canAddSelection) {
$(this).addClass('selected');
}
}
});
Then, you can use the selected class to style your selected images as you like. The same technique can be used with <input type="checkbox"> elements.
I have a list of items that I'm trying to "filter" with a set of 4 selects by matching the value of the select options to the classes I have applied to the list items. Right now, I have it working so that each time you choose a new option with any of the 4 selects, the entire list is reset, and only those items with a class that matches the value of the option you just selected is visible. I would like to have it work so that each time a new option is selected from any of the 4 selects, I could filter by the values of all 4 selects, not just the one that was just changed.
Here's what I have right now - any help is appreciated!
$(".sort-options select").change(function() {
var topics = $(this).val();
$(".list-schools li").hide().filter("." + topics).show();
});
$(".sort-options select").change(function() {
var topics = '';
$(".sort-options select").each(function() {
if ($(this).val()) { // Create combined class .opt1.opt2.opt3
topics += "."+$(this).val();
}
});
$(".list-schools li").each(function() {
$(this).toggle($(this).is(topics));
});
});
The function below allows users to filter products by data-attributes, and accommodates filtering by multiple values simultaneously. It does this by creating an array of the values selected, and when any of the values are clicked (in this case checked/unchecked) it hides all the items and then re-shows those that match the values in the updated array.
It works correctly when filtering for one data-attribute, but when combined to filter by more than one attribute it no longer shows all results matching any of the values and instead only shows results matching all the specified values.
I've posted a fiddle which demonstrates the problem here: http://jsfiddle.net/chayacooper/WZpMh/94/ All but one of the items have the values of both data-style="V-Neck" and data-color="Black" and they should therefore remain visible if either of the filters are selected, but if another value from a different data-attribute some of the items are hidden.
$(document).ready(function () {
var selected = [];
$('#attributes-Colors *').click(function () {
var attrColor = $(this).data('color');
var $this = $(this);
if ($this.parent().hasClass("active")) {
$this.parent().removeClass("active");
selected.splice(selected.indexOf(attrColor),1);
}
else {
$this.parent().addClass("active");
selected.push(attrColor);
}
$("#content").find("*").hide();
$.each(selected, function(index,item) {
$('#content').find('[data-color *="' + item + '"]').show();
});
return false;
});
$('#attributes-Silhouettes *').click(function () {
var attrStyle = $(this).data('style');
var $this = $(this);
if ($this.parent().hasClass("active")) {
$this.parent().removeClass("active");
selected.splice(selected.indexOf(attrStyle),1);
}
else {
$this.parent().addClass("active");
selected.push(attrStyle);
}
$("#content").find("*").hide();
$.each(selected, function(index,item) {
$('#content').find('[data-style *="' + item + '"]').show();
});
return false;
});
});
Both of your handlers are updating the selected array, but only one handler executes on a click. The first one if a color was (de)selected, the second if a style. Let's say you've clicked on "Black" and "Crew Neck". At that time your selected array would look like this: [ "Black", "Crew_Neck" ]. The next time you make a selection, let's say you click "Short Sleeves", the second (style) handler executes. Here's what is happening:
Short_Sleeves gets added to the selected array.
All of the items are hidden using $("#content").find("*").hide();
The selected array is iterated and items are shown again based on a dynamic selector.
Number 3 is the problem. In the above example, a style was clicked so the style handler is executing. Any items in the selected array that are colors will fail because, for example, no elements will be found with a selector such as $('#content').find('[data-style *="Black"]').show();.
I would suggest 2 things.
Keep 2 arrays of selections, one for color, one for style.
Combine your code to use only a single handler for both groups.
Here's a (mostly) working example.
Note that I added a data-type="color|style" to your .filterOptions containers to allow for combining to use a single handler and still know which group was changed.
Here's the full script:
$(document).ready(function () {
// use 2 arrays so the combined handler uses correct group
var selected = { color: [], style: [] };
// code was similar enough to combine to 1 handler for both groups
$('.filterOptions').on("click", "a", function (e) {
// figure out which group...
var type = $(e.delegateTarget).data("type");
var $this = $(this);
// ...and the value of the checkbox checked
var attrValue = $this.data(type);
// same as before but using 'type' to access the correct array
if ($this.parent().hasClass("active")) {
$this.parent().removeClass("active");
selected[type].splice(selected[type].indexOf(attrValue),1);
}
else {
$this.parent().addClass("active");
selected[type].push(attrValue);
}
// also showing all again if no more boxes are checked
if (attrValue == 'All' || $(".active", ".filterOptions").length == 0) {
$('#content').find('*').show();
}
else {
// hide 'em all
$("#content").find("*").hide();
// go through both style and color arrays
for (var key in selected) {
// and show any that have been checked
$.each(selected[key], function(index,item) {
$('#content').find('[data-' + key + ' *="' + item + '"]').show();
});
}
}
});
});
UPDATE: incorporating suggestions from comments
To make the handler work with checkboxes instead of links was a small change to the event binding code. It now uses the change method instead of click and listens for :checkbox elements instead of a:
$('.filterOptions').on("change", ":checkbox", function (e) {
// handler code
});
The "All" options "hiccup" was a little harder to fix than I thought it would be. Here's what I ended up with:
// get a jQuery object with all the options the user selected
var checked = $(":checked", ".filterOptions");
// show all of the available options if...
if (checked.length == 0 // ...no boxes are checked
|| // ...or...
checked.filter(".all").length > 0) // ...at least one "All" box is checked...
{
// remainder of code, including else block, unchanged
}
I also added an all class to the appropriate checkbox elements to simplify the above conditional.
Updated Fiddle
I've got a "tablesorter table" containing a category names in the first column. I filter the rows using shortcut buttons which trigger the specific "search" actions depending on which one is active:
function do_filtering() {
var category = $('#categories .active a').attr('data-filter-text');
var columns = [];
columns[0] = category;
$('table').trigger('search', [columns]);
}
Contents of the table may change. Until now I triggered on the table two events: "updateCell" and "search" and it got properly updated.
I need to separate these calls:
"updateCell" would be triggered by the cell editor (attached by a "sorter" for that specific columns' content)
"search" would be triggered after the cell is updated.
Unfortunately filtering in the "updateComplete" handler doesn't work, please see: http://jsfiddle.net/8cg4f/352/
How can I retain the search criteria after updating the table?
Well, the problem seems to be that since the filter inputs are empty, the filter widget is showing all rows after the update. I have two solutions, the second one probably being the better one because the first method causes flickering:
1) Add a setTimeout in the callback, with a time of 1 millisecond (demo):
$('td').click(function () {
resort = false;
$("table").trigger('updateCell', [$(this).closest('td'), resort, function(table){
setTimeout(function(){ do_filtering(); }, 1);
}]);
});
2) Update the filters, and hide the filter row (demo):
CSS
.tablesorter-filter {
display: none;
}
Code
function do_filtering() {
var category = $('#categories .active a').attr('data-filter-text');
$('.tablesorter-filter:first').val(category).trigger('search');
}
$('td').click(function () {
resort = false;
$("table").trigger('updateCell', [$(this).closest('td'), resort, function(table){
do_filtering();
}]);
});
Okay so I have two drop downs I want the selected item in dropdown one to be hidden in dropdown two and vice versa.
I have done the following so far can't seem to figure out the final step was hoping for a hand.
What I have currently is I have two lists that append to the dropdowns from and to, these list are looped over and append values to the dropdownlists, I then check for change event and when this occurs I remove values from a dropdown based on its index.
I am currently removing on selectedIndex, I want to remove on selectedValue rather then index but could not grasp that either.
<script type="text/javascript">
var fromCurrencies = {
FRO : 'Convert this currency',
AUD : 'AUD, Australian Dollar',
NZD : 'NZD, New Zealand Dollar',
EUR : 'EUR, Euro',
USD : 'USD, United States Dollar',
};
var toCurrencies = {
TOC : 'To this currency',
AUD : 'AUD, Australian Dollar',
NZD : 'NZD, New Zealand Dollar',
EUR : 'EUR, Euro',
USD : 'USD, United States Dollar',
};
$(document).ready(function () {
var ddFrom = $(".ddConvertFrom");
$.each(fromCurrencies, function (val, text) {
ddFrom.append(
$('<option></option>').val(val).html(text)
);
}); /*End ddFrom loop*/
var ddTo = $(".ddConvertTo");
$.each(toCurrencies, function (val, text) {
ddTo.append(
$('<option></option>').val(val).html(text)
);
}); /*End ddTo loop*/
}); /*End document.ready function*/
function doAction(){
if ($('.ddConvertFrom').val == "" || $('.ddConvertFrom').get(0).selectedIndex == 0) {
//Do nothing or hide...?
} else {
/*Hide selected value from other dropdown*/
var index = $('.ddConvertFrom').get(0).selectedIndex;
$('.ddConvertTo option:eq(' + index + ')').remove();
}
}
</script>
The html:
<div class="selectstyler">
<asp:DropDownList ID="ddConvertFrom" OnChange="doAction()" CssClass="ddConvertFrom" runat="server"></asp:DropDownList>
</div>
<div class="selectstyler">
<asp:DropDownList ID="ddConvertTo" CssClass="ddConvertTo" runat="server"></asp:DropDownList>
</div>
Purely for completeness to add to an already working answer from undefined.
To address the vice versa and the extended issue of re-adding those values including auto-selecting the previous value if it exists see: DEMO
See below for the changes I made to your original scripts.
I'm sure the code below can be optimised on several levels but I only tried to get it working first. Making it pretty I leave to you :)
To start I re-factored your code so the values are attached in their respective methods.
The dropdowns are now fully cleared before the values are re-added.
First though we record the value of the currently selected option to ensure we can re-select it if it exists. Adds a more dynamic feel to it and saves the user form re-selecting manually.
See example of attaching values to the from-dropdown:
function attachFromValues() {
var ddFrom = $(".ddConvertFrom");
var selectedValue = ddFrom.val();
var selectedIndex = 0;
ddFrom.html("");
var index = 0;
$.each(fromCurrencies, function(val, text) {
ddFrom.append(
$('<option></option>').val(val).text(text));
if (selectedValue == val) {
selectedIndex = index;
}
index++;
}); /*End ddFrom loop*/
if (selectedIndex > 0) {
ddFrom.get(0).selectedIndex = selectedIndex;
}
};
I also re-factored the code which removes the value in the other dropdown calling the new re-factored methods to re-attach all values first before removing the specific value. That makes sure you do not end up with an empty dropdown after while.
See example of the change event of the to-dropdown:
(taken from undefined's answer, only added call to re-populate)
$('select.ddConvertTo').change(function() {
if ($('.ddConvertTo').val == "") {
//Do nothing or hide...?
} else { /*Hide selected value from other dropdown*/
attachFromValues();
var txt = $(this).val();
$('.ddConvertFrom option[value=' + txt + ']').remove();
}
})
For the complete code changes check the linked DEMO
Edit (25-Jun-2012)
Updated code as I noticed an inconsistency whereby the currencies did not re-set correctly if the default selection (index 0) was made. The latest version of this code now re-binds the currencies correctly.
try this and instead of using onChange attribute you can use change event handler.
$('select:first').change(function(){
/*remove selected value from other dropdown*/
var txt = $(this).val();
$('.ddConvertTo option[value=' + txt + ']').remove();
})
http://jsfiddle.net/ue4Cm/1/