Update a select via Chosen Jquery - javascript

I have an issue with chosen.jquery.js
when i try to update a list dynamically and write the code below
$(selector).trigger("chosen:updated");
it works fine, but updating only the select
so the values rendered still as they are with no change
as the rendered values got from a (ul) placed in a div besides the updated select
how can i update the rendered values ?

Added .trigger('chosen:updated'); after .append(...) so that "select changed" now shows up in the selection box.
$('#Groups').chosen().change(function (evt, params) {
$('#Groups').append($("<option/>", {
value: "test",
text: "select changed"
})).trigger('chosen:updated');
});
$('.chosen').empty().trigger('chosen:updated');
$('#Groups').append($("<option/>", {
value: "1",
text: ""
}));
$('#Groups').append($("<option/>", {
value: "2",
text: "2"
}));
$('#Groups').append($("<option/>", {
value: "3",
text: "3"
}));
$('.chosen').trigger('chosen:updated');
Is this what you're looking for?
http://jsfiddle.net/8wykf44s/2/

Related

How can you format a Tabulator SELECT based header filters options?

We are using Tabulator (4.8.3) and have a SELECT based header filter on one column. It all works great except we are trying to add some formatting to some of the select options. They display in the select dropdown with the formatting as expected. However once a selection is made, the selected text displays with the raw html (not formatted).
A JS fiddle here shows what we mean. Make a selection and see the formatting displayed in the selection text (e.g. the bold tags and non-breaking spaces).
We looked for a headerFilterFormatter or something along those lines in Tabulator but could not find anything. We also saw this post:
How do I create a multi-select header filter in tabulator?, but it seems like overkill to write all this just to sanitize option texts display.
We don't care id the selected text is formatted or not, we just don't want the html displaying in the value. We could possibly sanitize it externally every time a selection is made, but that does not seem like a great idea because it will tightly couple everything.
Does anyone know if there is a quick, easy way to address this in Tabulator?
var table = new Tabulator("#table", {
layout: "fitDataFill",
columns: [{
title: "ID",
field: "id"
},
{
title: "Topic",
field: "topic",
width: 120,
headerFilterPlaceholder: "-- Select --",
headerFilter:"select",
headerFilterParams: {values: paramLookup}
},
],
});
var tableData = [{
id: 1001,
topic: "1.0",
},
{
id: 1002,
topic: "1.1",
},
{
id: 1003,
topic: "2.0",
},
{
id: 1004,
topic: "3.0",
},
];
function paramLookup(cell){
return {
"1.0":"<b>1.0</b>",
"1.1":" 1.1",
"2.0":"<b>2.0</b>",
"3.0":"<b>3.0</b>",
};
}
table.setData(tableData);
The problem you are facing is you are trying to style the labels for the select list values in the values array. The select editor uses an input element to show the selected value, therefor when you are selecting a value it is showing the label as text.
The correct approach is to include the actual value in the label and then use the listItemFormatter to format the list as wanted, that way you store a plain text value against the label and display it as html:
{
title: "Topic",
field: "topic",
width: 120,
headerFilterPlaceholder: "-- Select --",
headerFilter:"select",
headerFilterParams: {
values: [1.0, 1.1, 1.2],
listItemFormatter:function(value, title){
return "<b>" + title + "</b>";
},
}
},

Does aikau MultiSelectInput support more then one value?

Consider widget config:
{
id: "MyMultiSelect",
name: "alfresco/forms/controls/MultiSelectInput",
config: {
label: "My multi-select input",
name: "assoc_myGood",
width: "400px",
addedAndRemovedValues: true,
valueDelimiter: ",",
choiceCanWrap: true,
choiceMaxWidth: "100%",
optionsConfig: {
labelAttribute: "name",
queryAttribute: "name",
valueAttribute: "value",
publishTopic: "ALF_CRUD_GET_ALL",
publishPayload: {
url: "/slingshot/datalists/lists/node/workspace/SpacesStore/dc1b9c22-b955-4e5f-9b10-2343680a15f5",
resultsProperty: "response.datalists"
},
searchStartsWith: true
}
}
}
Values are retrived, but when it comes to select, it possible to select one value but after that all other values become disabled. E.g. only one value can be selected.
So does MultiSelectInput support select more then 1 value?
Yes, MultiSelectInput does support the selection of more than one value. See this live example on the Aikau Sandpit. I would suggest that the issue is that your optionsConfig is incorrect. Based on your other question I would say that each option is being assigned the same value which is why only one option can be selected.

select2 is not updated after disable of selected option

I'm trying to disable the selected option in select2 but it seems like the select2 is not refreshing.
My purpose is to disable each item in the select2 list after selecting it. I see the HTML that the option got the disabled attribute but the option is still enabled in the select2 element.
$("#select-filter").select2({
placeholder: "Select a category",
data:[{
id: "",
text: ""
},{
id: "project",
text: "project"
},{
id: "date",
text: "date"
},{
id: "user",
text: "user"
}]
}).on("change", function(e) {
$("#select-filter :selected").attr("disabled", "true");
});
See example : https://jsfiddle.net/bkqeqbay/1/
You can use the select event and the data like so:
...}).on("select2:select", function(e) {
console.dir(e.params.data);
e.params.data.disabled = true;
});
Updated fiddle: https://jsfiddle.net/bkqeqbay/4/
Note that if you must also disable the underlying select element option you can do:
var index = $(e.params.data.element).index();
$("#select-filter").find('option').eq(index).prop('disabled',true);

Backbone update nested attributes

I have a table that displays a collection of models that looks roughly like this:
{
id: 1,
name: "Product",
category: {
id: 1,
name: "CategoryName"
},
{
id: 2,
name: "Another Product",
category: {
id: 1,
name: "CategoryName"
},
etc..
I can select a model from the table and perform an edit on its attributes in a modal. After I finish editing attributes I call save, close the modal and pass an event to refresh my table. In my table view I recieve an event and call fetch with update: true
App.vent.on("refresh:products", function() {
return this.collection.fetch()({
update: true
});
});
However none of the nested attributes, in this case category, get updated without a hard refresh. How I can fix this? Thanks!
try passing reset:true as options to fetch
App.vent.on("refresh:products", function() {
return this.collection.fetch()({
reset: true
});
});
This will stop backbone from merging the data received from the server.

checkall jquery

Here is what I have so far for the check all checkboxes and these checkboxes are in a dropdownlist.
_popup: function () {
e.fn._popup.call(this), this.popup.one("open", function () {
this.wrapper = c.wrap(this.element).addClass("km-popup")
});
// Modify popup to include a "Select All" checkbox.
$(this.popup.element).children("ul:first-child").before("<ul class='k-list k-reset' unselectable='on' style='overflow: auto;'><li class='k-item' unselectable='on'><input id='selectall' type='checkbox' /><span>Selected</span></li></ul><hr/>");
// Attach event handler to "Select All checkbox.
$("#selectall").bind('change', function(){
if($(this).prop('checked')){
$(".checkbox").prop('checked', true);
}else{
$(".checkbox").prop('checked', false);
}
});
this updates the check boxes to visually appear on the screen all selected or deselected. I have a button that tells me the state of the viewmodel ie if the checkboxes are true or false. The problem is, is that with the selectall working and checking everything, the viewmodel is not getting updated with those changes ie everytime you click the select all checkbox everything stays false when the test button is clicked no matter if they are checked or not. I need some way to update the viewmodel when I click select all. The whole of the program is pretty complex but if you need more to understand my issue let me know.
here is what my viewmodel has in it
var viewModel = kendo.observable({
options: [{ text: "test1", value: 1, selected: false },
{ text: "test2", value: 2, selected: false },
{ text: "test3", value: 3, selected: false },
{ text: "test4", value: 4, selected: false }
]
});
Try something like this
$("#selectall").bind('change', function(){
if($(this).prop('checked')){
$(".checkbox").not(':checked').click();
}else{
$(".checkbox:checked").click();
}
});

Categories