I have a group of autocomplete text menu's I'm attempting to tie together to work similar to a year make model select menu list. You first fill in the year, then it filters the make, then filters the model. My fields filter perfectly, however I'm looking to disable and clear fields that lack a populated filter by field. for example, if the year is null, then the make model field is disabled, or if you clear the make, it will also clear the model field and set it to be disabled.
My thought was to assign the fields to a group and pass that group into a json object as an array. Example,
the JS is loaded one time and init function is called for each textfield.
spec.group = yearMakeModelGroup
spec.id = fieldId
var group={};
init = function(spec) {
var groupId = spec.group;
if(!group.hasOwnProperty(groupId)) {
group = {groupId:[]};
}
group.groupId.push(spec.id);
};
I can't figure out how to dynamically create an array name so that I could use this code with other groups on the page. Example yearMakeModelGroup = year, make, model plus forsaleGroup = forsale,forsalebyowner,auto.
You need to create an object and then use the bracket notation(member operator) to create a dynamic key
if(!group.hasOwnProperty(groupId)) {
var obj = {};
obj[groupId] = [];
group = obj;
}
Related
I have some dynamically created filters on a web app's page where the filter "entry" is at times the combination of a few different inputs and the values for the collection are gathered into an array to send back to the server. If these were all just single inputs then an array of values would be easy to map over to the inputs on the backend, however when one or more is a multiselect with multiple options, a flattened array of values mixing the multiselect's values and the individual input values isn't appropriate.
As an example: if I have two inputs for a given filter on a search control page, one being a multiselect and another being a text input, I would like to gather an array of two elements, the first being an array of selected values and the second as the value entered in the text input. So if in the first multiselect I select "A", "B" and the text input I enter "Joe" and the code below gathers the input values:
Coffeescript:
filters = []
$(#customFilterElements.selector).each ->
filterName = $(#).find('.filter_entry .filter_name:input').val()
filterValues = $(#).find('.filter_entry .filter_value:input').map(->
if $(#).data('multiselect')
$(#).find('option:selected').map(->
$(#).val()
).get()
else
$(#).val()
).get()
filters.push({name: filterName, value: filterValues})
Javascript: (converted from above)
var filters = [];
$(this.customFilterElements.selector).each(function() {
var filterName, filterValues;
filterName = $(this).find('.filter_entry .filter_name:input').val();
filterValues = $(this).find('.filter_entry .filter_value:input').map(function() {
if ($(this).data('multiselect')) {
return $(this).find('option:selected').map(function() {
return $(this).val();
}).get();
} else {
return $(this).val();
}
}).get();
return filters.push({
name: filterName,
value: filterValues
});
});
Current result for filterValues: ["A","B","Joe"]
The above code ends up producing an array ["A","B","Joe"] for filterValues.
I think this may be because the .get() is converting everything to a flattened array. I tried using $.makeArray() instead of .get() and I get the same results but perhaps I missed something.
Desired result for filterValues: [["A","B"],"Joe"]
What I am hoping to produce is [["A","B"],"Joe"] so it is clear that the first element (in this example) is a collection of selected values from a multiselect to the backend.
How can I adjust the above code to get the desired result (for any combination or ordering of multiselects and single inputs together) in a fairly elegant manner?
The code is intended to be applied to any dynamically created filter, so reusable instead of hardcoding to each filter.
Ok, after a full night's rest the answer came to me right away and it seems so obvious now - just need to wrap the multiselect in an array bracket after the .get()! - doh. Sometimes documenting the problem here forces a solution to bubble up or highlight what I was missing.
filters = []
$(#customFilterElements.selector).each ->
filterName = $(#).find('.filter_entry .filter_name:input').val()
filterValues = $(#).find('.filter_entry .filter_value:input').map(->
if $(#).data('multiselect')
[$(#).find('option:selected').map(->
$(#).val()
).get()]
else
$(#).val()
).get()
filters.push({name: filterName, value: filterValues})
I am working on Isotope query and there is this request, where I need to include all the combination to filter out the list.
I have 2 select input, 1 search bar, 2 sliders, 1 multiple select input and may be check box in the future.
I tried to place every selection and all the input fields, but I cant able to combine them. I know I need to use combination "join", but cant able to figure out how to combine all of them or few of them depending upon the choice.
filterValue = filterValue.join(', ');
here is the code I created.
code here
I have not even written the range area code yet.
Any suggestions?
I recently combined multiple filters by using a function, here it's called concatValues.
var filterValue = concatValues( filters );
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
I have a list of names (staff in stafflist) from which I select some names and add them as an object to an array (paxlist). This operation is repeated, so several objects with different names are added into the array.
What I am attempting to do is to be able to edit each one of this objects to add or remove names.
For UX reasons, when I first select names from stafflist, they turn blue, and they reset to white when the object is added.
Basically, the effect/functionality I'm looking for is:
The object is added -> The main list resets
The edit button from one of the objects is clicked
The list of names of the object is compared with the main list, and the relevant names are highlighted (in blue) as existing/already selected names.
The user selects or deselects names.
The edition is completed, the resulting object saved and the main list reset.
I have a Plunkr depicting the addition functionality, but I don't see clear how could I compare and make the 2 variables (stafflist and pax in recordlist) work together as to edit the result.
I'm not specially looking for somebody to do it and solve this for me, but more to understand the logic behind a possible solution, as so far I can't think of anything...
Any comments will be highly appreciated!
I created a new Plunk with what I think you were trying to accomplish. Basically I just added a new state (editMode) which captured the pax being edited.
var editMode;
$scope.editRecord = function(record) {
editMode = record.pax;
$scope.stafflist.forEach(function (s) {
s.chosen = false;
});
record.pax.forEach(function(p) {
$scope.stafflist.forEach(function (s) {
if(p.name === s.name) {
s.chosen = true;
}
});
});
};
I then used this new state to figure out whether I was creating a new record or editing an existing one.
$scope.pushStaff = function (staff) {
staff.chosen = true;
var arr = editMode || $scope.paxlist;
arr.push(staff);
};
$scope.unpushStaff = function (staff) {
staff.chosen = false;
var arr = editMode || $scope.paxlist;
var index=arr.indexOf(staff);
arr.splice(index,1);
};
I'm sure there are cleaner approaches, but this is one way to do it.
So I know there must be a better way to do this than how I am currently doing it. I have a kendo type page where users can sort and filter and such. By digging into the dataSource object I found enough info to extract the sorts and filters and apply them to a new dataSource I create so I can send it to server to make an excel file with. Now I only have to get the formatting that has been applied as well. Here is what I have so far.
dataSource = $("#grid").data("kendoGrid").dataSource;
filters = dataSource.filter();
sorts = dataSource.sort();
options = dataSource.options;//not sure if this is what I need
allData = dataSource.data();
query = new kendo.data.Query(allData);
kendoDataSource = query;
if(filters && sorts) {
kendoDataSource = kendoDataSource.filter(filters).sort(sorts).data;
}else if(filters) {
kendoDataSource = kendoDataSource.filter(filters).data;
}else if(sorts) {
kendoDataSource = kendoDataSource.sort(sorts).data;
}else{
kendoDataSource = kendoDataSource.data;
}
This allows me to iterate through the kendoDataSource array and stringify every value of the array - which is a json object - giving me exactly what the user sees in terms of filters and sorts. However the date fields have some formatting applied to them in the original dataSource and not sure how to programmatically apply all those formatting options in javascript/jQuery.
I'm trying to update a list item with the SharePoint 2010 Client Object Model and Javascript. The item I am trying to update has a Multiple Value Lookup field. I can successfully set this field, but only with one value. Does anyone know how to set it with multiple values?
var _newLookupField = new SP.FieldLookupValue();
_newLookupField.set_lookupId(itemArray.toString()); //this works if array is only 1 item
currentItem.set_item('Lookup_x0020_Field', _newLookupField);
var lookupsIds = [1,2,4];
var lookups = [];
for (var ii in lookupsIds) {
var lookupValue = new SP.FieldLookupValue();
lookupValue.set_lookupId(lookupsIds[ii]);
lookups.push(lookupValue);
}
currentItem.set_item('Lookup_x0020_Field', lookups);
currentItem.update();
I have created a blog post that clearly explain how to add a list item that contains metadata with lookup fields.
http://vangalvenkat.blogspot.com/2011/10/adding-new-document-item-whose-metadata.html