Checkbox group options update

Ask the community
,
1

Can anyone tell me how to get a checkbox group to refresh after I add new text to my database that feeds my options?

Box 1 loads the data into my checkbox group (dog walking drives etc…).

574×750 23.4 KB

Box 1

import wixData from 'wix-data';
$w.onReady(function () {
$w.onReady(() => {
wixData.query('helpTags')
.ascending('helpTagsName')
.find()
.then(res => {
let options = [];
options.push(...res.items.map(helpTagsName => {
return { "value": helpTagsName.helpTagsName, "label": helpTagsName.helpTagsName };
}));
$w('#giveHelpCheckboxes').options = options;
})
});
});

The user clicks the “Add New Give Help Topic” text link . Then the “Add New Give Help Topic” box shows.

export function newGiveHelpTextBut_click_1(event) {
$w("#newGiveHelpBox").show();
}

The user inputs their new text into the box and it’s saved to the helpTags database.

    export function giveHelpBut_click(event) {
wixData.insert('helpTags', {
'helpTagsName': $w('#newGiveHelpText').value,
});
$w('#newGiveHelpBox').hide();
$w("#giveHelpData").save();

}

So this all works, but I need to get the checkbox group to refresh adding the new text field so the user can select it.
I’ve tried the text below but nothing is working.

export function giveHelpBut_click(event) { wixData.insert('helpTags', { 'helpTagsName': $w('#newGiveHelpText').value, }); $w('#newGiveHelpBox').hide(); $w("#giveHelpData").save();
$w("#needHelpData").refresh();
$w('#giveHelpCheckboxes').refresh()
}
2

Sylvia, since you are manually loading the checkbox group, the checkbox group refresh doesn’t know anything about how it was originally populated.

You’re most of the way there though. All you have to do is put the query code in a separate function that you call both in the onReady and in the click event, where you would be totally reloading the checkbox group.

3

woo hoo Thanks Anthony that worked!

Here is my final code in case it helps somebody else.

import wixData from 'wix-data';
$w.onReady(function () {
$w.onReady(function () {
$w.onReady(() => {
wixData.query('healthStatus')
.ascending('healthStatusName')
.find()
.then(res => {
let options = [];
options.push(...res.items.map(healthStatusName => {
return { "value": healthStatusName.healthStatusName, "label": healthStatusName.healthStatusName };
}));
$w('#healthStatusCheckboxes').options = options;
});
});
});

$w.onReady(() => {
wixData.query('helpTags')
.ascending('helpTagsName')
.find()
.then(res => {
let options = [];
options.push(...res.items.map(helpTagsName => {
return { "value": helpTagsName.helpTagsName, "label": helpTagsName.helpTagsName };
}));
$w('#giveHelpCheckboxes').options = options;
$w('#needHelpCheckboxes').options = options;
})
});
});

//Add buttons to insert new topic into databases
export function healthStatusBut_click(event) {
wixData.insert('healthStatus', {
'healthStatusName': $w('#newHealthStatus').value,
});
$w("#newHealthStatus").value= null;
//setup the checkboxes again
$w.onReady(() => {
wixData.query('helpTags')
.ascending('helpTagsName')
.find()
.then(res => {
let options = [];
options.push(...res.items.map(helpTagsName => {
return { "value": helpTagsName.helpTagsName, "label": helpTagsName.helpTagsName };
}));
$w('#giveHelpCheckboxes').options = options;
$w('#needHelpCheckboxes').options = options;
})
});
}
export function giveHelpBut_click_1(event) {
wixData.insert('helpTags', {
'helpTagsName': $w('#newGiveHelpText').value,
});
$w("#newGiveHelpText").value= null;
//setup the checkboxes again
$w.onReady(() => {
wixData.query('helpTags')
.ascending('helpTagsName')
.find()
.then(res => {
let options = [];
options.push(...res.items.map(helpTagsName => {
return { "value": helpTagsName.helpTagsName, "label": helpTagsName.helpTagsName };
}));
$w('#giveHelpCheckboxes').options = options;
$w('#needHelpCheckboxes').options = options;
})
});
}

export function needHelpBut_click(event) {
wixData.insert('helpTags', {
'helpTagsName': $w('#newNeedHelpText').value,
});
$w("#newNeedHelpText").value= null;
//setup the checkboxes again
$w.onReady(() => {
wixData.query('helpTags')
.ascending('helpTagsName')
.find()
.then(res => {
let options = [];
options.push(...res.items.map(helpTagsName => {
return { "value": helpTagsName.helpTagsName, "label": helpTagsName.helpTagsName };
}));
$w('#giveHelpCheckboxes').options = options;
$w('#needHelpCheckboxes').options = options;
})
});
}