I have a react component with following state
state = {
SandD: true,
Cancellation: false,
Payments: false,
EandR: false,
InternationalShipping: false,
ExpressDelievery: false
}
I want at a time only one selected state to be true and rest to be false. for that I was thinking the following logic
currentActiveState = (value) => {
for ( i=0; i<this.state.length; i++) {
console.log(this.state[i])
if(this.state[i] == value) {
console.log(this.state[i])
} else {
this.setState(this.state[i]: false)
}
}
}
Here value is the property of the state which need to have a value and rest everything should be false..
For example if Payments is true then everything else should be false..
Can someone help me in fixing the above logic or tell me how I can solve it?
Try giving this a shot:
currentActiveState = (value) => {
const newState = {};
Object.keys(this.state).forEach(key => {
newState[key] = key === value;
})
this.setState(newState);
}
In this code:
handleChangeTab (toName, toIndex) {
this.tabList.forEach((tab, index) => {
tab.active = false
this.$children[index].prefs.active = false
if (tab.name === toName) {
this.$children[toIndex].prefs.active = true
tab.active = true
console.log('tabList', this.tabList)
console.log('this.$children', this.$children)
}
})
},
this.tabList[1].active becomes true when handleChangeTab is triggered. However, this.$children[1] becomes false. I think this.$children[toIndex].prefs.active = true is messing up with Vue's reactive features.
How to fix this? In other words, how to write the reactive version of this.$children[toIndex].prefs.active = true?
You can try to deep copy data:
handleChangeTab (toName, toIndex) {
const tabCopy = JSON.parse(JSON.stringify(this.tabList))
tabCopy.forEach((tab, index) => {
tab.active = false
this.$children[index].prefs = {
...this.$children[index].prefs,
active: false
}
if (tab.name === toName) {
this.$children[index].prefs = {
...this.$children[index].prefs,
active: true
}
tab.active = true
}
})
this.tabList = tabCopy
}
But the better solution is passing props to your children component. Should not change children data directly from parent.
I am not very good with my javascript but recently needed to work with a library to output an aggregated table. Was using fin-hypergrid.
There was a part where I need to insert a sum function (rollups.sum(11) in this example)to an object so that it can compute an aggregated value in a table like so:
aggregates = {Value: rollups.sum(11)}
I would like to change this value to return 2 decimal places and tried:
rollups.sum(11).toFixed(2)
However, it gives the error : "rollups.sum(...).toFixed is not a function"
If I try something like:
parseFloat(rollups.sum(11)).toFixed(2)
it throws the error: "can't assign to properties of (new String("NaN")): not an object"
so it has to be a function object.
May I know if there is a way to alter the function rollups.sum(11) to return a function object with 2 decimal places?
(side info: rollups.sum(11) comes from a module which gives:
sum: function(columnIndex) {
return sum.bind(this, columnIndex);
}
)
Sorry I could not post sample output here due to data confidentiality issues.
However, here is the code from the example I follow. I basically need to change rollups.whatever to give decimal places. The "11" in sum(11) here refers to a "column index".
window.onload = function() {
var Hypergrid = fin.Hypergrid;
var drillDown = Hypergrid.drillDown;
var TreeView = Hypergrid.TreeView;
var GroupView = Hypergrid.GroupView;
var AggView = Hypergrid.AggregationsView;
// List of properties to show as checkboxes in this demo's "dashboard"
var toggleProps = [{
label: 'Grouping',
ctrls: [
{ name: 'treeview', checked: false, setter: toggleTreeview },
{ name: 'aggregates', checked: false, setter: toggleAggregates },
{ name: 'grouping', checked: false, setter: toggleGrouping}
]
}
];
function derivedPeopleSchema(columns) {
// create a hierarchical schema organized by alias
var factory = new Hypergrid.ColumnSchemaFactory(columns);
factory.organize(/^(one|two|three|four|five|six|seven|eight)/i, { key: 'alias' });
var columnSchema = factory.lookup('last_name');
if (columnSchema) {
columnSchema.defaultOp = 'IN';
}
//factory.lookup('birthState').opMenu = ['>', '<'];
return factory.schema;
}
var customSchema = [
{ name: 'last_name', type: 'number', opMenu: ['=', '<', '>'], opMustBeInMenu: true },
{ name: 'total_number_of_pets_owned', type: 'number' },
{ name: 'height', type: 'number' },
'birthDate',
'birthState',
'employed',
{ name: 'income', type: 'number' },
{ name: 'travel', type: 'number' }
];
var peopleSchema = customSchema; // or try setting to derivedPeopleSchema
var gridOptions = {
data: people1,
schema: peopleSchema,
margin: { bottom: '17px' }
},
grid = window.g = new Hypergrid('div#json-example', gridOptions),
behavior = window.b = grid.behavior,
dataModel = window.m = behavior.dataModel,
idx = behavior.columnEnum;
console.log('Fields:'); console.dir(behavior.dataModel.getFields());
console.log('Headers:'); console.dir(behavior.dataModel.getHeaders());
console.log('Indexes:'); console.dir(idx);
var treeView, dataset;
function setData(data, options) {
options = options || {};
if (data === people1 || data === people2) {
options.schema = peopleSchema;
}
dataset = data;
behavior.setData(data, options);
idx = behavior.columnEnum;
}
// Preset a default dialog options object. Used by call to toggleDialog('ColumnPicker') from features/ColumnPicker.js and by toggleDialog() defined herein.
grid.setDialogOptions({
//container: document.getElementById('dialog-container'),
settings: false
});
// add a column filter subexpression containing a single condition purely for demo purposes
if (false) { // eslint-disable-line no-constant-condition
grid.getGlobalFilter().columnFilters.add({
children: [{
column: 'total_number_of_pets_owned',
operator: '=',
operand: '3'
}],
type: 'columnFilter'
});
}
window.vent = false;
//functions for showing the grouping/rollup capabilities
var rollups = window.fin.Hypergrid.analytics.util.aggregations,
aggregates = {
totalPets: rollups.sum(2),
averagePets: rollups.avg(2),
maxPets: rollups.max(2),
minPets: rollups.min(2),
firstPet: rollups.first(2),
lastPet: rollups.last(2),
stdDevPets: rollups.stddev(2)
},
groups = [idx.BIRTH_STATE, idx.LAST_NAME, idx.FIRST_NAME];
var aggView, aggViewOn = false, doAggregates = false;
function toggleAggregates() {
if (!aggView){
aggView = new AggView(grid, {});
aggView.setPipeline({ includeSorter: true, includeFilter: true });
}
if (this.checked) {
grid.setAggregateGroups(aggregates, groups);
aggViewOn = true;
} else {
grid.setAggregateGroups([], []);
aggViewOn = false;
}
}
function toggleTreeview() {
if (this.checked) {
treeView = new TreeView(grid, { treeColumn: 'State' });
treeView.setPipeline({ includeSorter: true, includeFilter: true });
treeView.setRelation(true, true);
} else {
treeView.setRelation(false);
treeView = undefined;
delete dataModel.pipeline; // restore original (shared) pipeline
behavior.setData(); // reset with original pipeline
}
}
var groupView, groupViewOn = false;
function toggleGrouping(){
if (!groupView){
groupView = new GroupView(grid, {});
groupView.setPipeline({ includeSorter: true, includeFilter: true });
}
if (this.checked){
grid.setGroups(groups);
groupViewOn = true;
} else {
grid.setGroups([]);
groupViewOn = false;
}
}
you may try:
(rollups.sum(11)).toFixed(2)
enclosing number in parentheses seems to make browser bypass the limit that identifier cannot start immediately after numeric literal
edited #2:
//all formatting and rendering per cell can be overridden in here
dataModel.getCell = function(config, rendererName) {
if(aggViewOn)
{
if(config.columnName == "total_pets")
{
if(typeof(config.value) == 'number')
{
config.value = config.value.toFixed(2);
}
else if(config.value && config.value.length == 3 && typeof(config.value[1]) == 'number')
{
config.value = config.value[1].toFixed(2);
}
}
}
return grid.cellRenderers.get(rendererName);
};
Not sure what's going on here. I have a function that is an event handler for a WordPress plugin:
$.fn.almComplete = function(alm){
console.log(alm);
console.log(alm.finished);
}
The first output is this:
e.ajaxloadmore {AjaxLoadMore: Object, page: 0, speed: 300, proceed: false, init: false…}
AjaxLoadMore: Object
button: m.fn.init[1]
button_label: "Load More"
content: m.fn.init[1]
data: m.fn.init[2]
el: m.fn.init[1]
finished: true
init: false
lang: ""
loading: false
max_pages: 5
offset: 0
page: 0
pause: false
post_type: Array[1]
posts_per_page: 6
prefix: "alm-"
proceed: true
repeater: "default"
scroll: false
speed: 300
transition: "slide"
window: m.fn.init[1]
__proto__: Object
But the second output console.log(alm.finished) always outputs false, but that property is obviously not false so I don't believe I'm referencing this variable correctly.
How do I access the alm object's properties?
EDIT: Here is when this callback is called within the plugin's code:
success: function (data) {
alm.data = $(data); // Convert data to an object
//console.log(alm.data.length);
if (alm.init) {
alm.button.text(alm.button_label);
alm.init = false;
}
if (alm.data.length > 0) {
alm.el = $('<div class="' + alm.prefix + 'reveal"/>');
alm.el.append(alm.data);
alm.el.hide();
alm.content.append(alm.el);
if (alm.transition === 'fade') { // Fade transition
alm.el.fadeIn(alm.speed, 'alm_easeInOutQuad', function () {
alm.loading = false;
alm.button.delay(alm.speed).removeClass('loading');
if (alm.data.length < alm.posts_per_page) {
alm.finished = true;
alm.button.addClass('done');
}
});
} else { // Slide transition
alm.el.slideDown(alm.speed, 'alm_easeInOutQuad', function () {
alm.loading = false;
alm.button.delay(alm.speed).removeClass('loading');
if (alm.data.length < alm.posts_per_page) {
alm.finished = true;
alm.button.addClass('done');
}
});
}
if ($.isFunction($.fn.almComplete)) {
$.fn.almComplete(alm);
}
} else {
alm.button.delay(alm.speed).removeClass('loading').addClass('done');
alm.loading = false;
alm.finished = true;
}
},
Also, the full js source code is here: https://github.com/dcooney/wordpress-ajax-load-more/blob/master/ajax-load-more/core/js/ajax-load-more.js
I have this model
var MarketResearch = function (data) {
var self = this;
self.Validate = function() {
if (!self.isValid()) {
self.errors.showAllMessages();
return false;
}
return true;
};
this.id = data ? data.id : 0;
this.city = ko.observable(data ? data.city : '').extend({ required: true });
this.since = ko.observable(data ? data.since : '').extend({ required: true });
this.title = ko.observable(data ? data.title : '').extend({ required: true });
}
Here is the view:
function onDocumentReady() {
koValidationConfig()
// initializeDataPickers(market);
// createCkEditor('market_editor');
ko.applyBindings(market, document.getElementById("market-form"));
}
var market = new MarketResearch(null);
function onSaveMarketClicked() {
market.errors.showAllMessages();
}
function koValidationConfig() {
ko.validation.rules.pattern.message = 'Invalid.';
ko.validation.configure({
// registerExtenders: true,
messagesOnModified: true,
insertMessages: true,
decorateInputElement: true,
});
ko.validation.registerExtenders();
}
I have some required fields here. When I put nothing in the fields it displays "this field is required" and colors the form elements.
But market.errors is always undefined, so I can't check if the form is valid!
market.errors.showAllMessages();
Doesn't work too.
Ko.validation is defined, I checked.
What's wrong?
ko.validation adds an errors property to observables, not models. You also need to use .extend on an observable to enable validation.