Showing text box when field equals specific value

Ask the community
, ,
6

@bwprado Hi, thanks very much for your response again. Thanks to your tip of adding the console logs, I have been able to ascertain that the issue was lying with the activeDynamicItem. Even though what was happening on screen was correct, it appeared to be fetching the same item each time and because this item didn’t have anything in the Photo Credit field, it was obviously not showing the text box.

After a bit of code amendment, I have basically removed the ‘CreditTextShow’ function and moved that part of the code to within the ‘NumberChange’ function, I am now fetching the correct item as I make my selections from the dropdown and therefore the text is appearing when it is supposed to.

The working code is as follows for reference for anyone it may help:

import wixLocation from 'wix-location';
import wixData from 'wix-data';

$w.onReady(function () {
    uniqueDropDown1();
 NumberChange();

});

function uniqueDropDown1 (){
    wixData.query("LocoLogs")
 .ascending('class')
 .limit(1000)
 .find()
 .then(results =>{
 const uniqueTitles = getUniqueTitles(results.items);
            $w('#classDropDown').options = buildOptions(uniqueTitles);
 });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.class);
 return [...new Set(titlesOnly)]; 
 } 
 function buildOptions(uniqueList){
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
 });
 }
}

export function classDropDown_change_1(event, $w){
uniqueDropDown2();
$w('#numberDropDown').enable(); 
$w('#numberDropDown').value = null;
$w('#box9').collapse();
    $w('#box10').collapse();
    $w('#text356').collapse();
    $w('#text472').collapse();
    $w('#button15').collapse();
    $w('#image14').collapse();
    $w('#box8').collapse();
    $w('#repeater1').collapse();
}

function uniqueDropDown2(){
    wixData.query('LocoLogs')
 .contains("class", $w('#classDropDown').value)
 .ascending('number')
 .limit(1000)
 .find()
 .then(results =>{
 const uniqueTitles = getUniqueTitles(results.items);
        $w('#numberDropDown').options = buildOptions(uniqueTitles);

 });
function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.number);
 return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
 return uniqueList.map(curr =>{
 return {label:curr, value:curr};
 });
}

}

function NumberChange () {
    $w('#numberDropDown').onChange((event) => {
 let number = $w('#numberDropDown').value;
        $w('#dynamicDataset').onReady(() => {
            console.log("The dataset is ready to be filtered.");

    $w('#dynamicDataset').setFilter(wixData.filter()
 .eq("number", number)
 )
 .then(() => {
        console.log("Dataset1 dataset is now filtered with the matching title from the dropdown");
 
 
 let activeDynamicItem = $w('#dynamicDataset').getCurrentItem();
 let fieldX = activeDynamicItem['photoCredit'];
    console.log(fieldX);
    console.log(activeDynamicItem);
 if (fieldX && fieldX === "Joe Bloggs") {
 
        $w('#text488').expand();
 } else {
        $w('#text488').collapse();
 }
 
 })
 
 .catch((err) => {
        console.log(err);
 });
 
 
 });
 });
}



export function numberDropDown_change_1(event) {
    $w('#box9').expand();
    $w('#box10').expand();
    $w('#text356').expand();
    $w('#text472').expand();
    $w('#button15').expand();
    $w('#image14').expand();
    $w('#box8').expand();
    $w('#repeater1').expand();



}

export function button15_click(event) {
    $w('#text484').expand();
    $w('#text482').expand();
    $w('#text485').expand();
    $w('#text483').expand();
    $w('#image15').show();
    $w('#image14').collapse();
    $w('#button14').show();
    $w('#button15').hide();
    $w('#text488').collapse();

}


export function button14_click_1(event) {
    $w('#text484').collapse();
    $w('#text482').collapse();
    $w('#text485').collapse();
    $w('#text483').collapse();
    $w('#image15').hide();
    $w('#image14').expand();
    $w('#button14').hide();
    $w('#button15').show();
    $w('#text488').expand();


}

The above code covers conditional dropdowns, collapsing/expanding elements based on button clicks, showing text based on the data in a database field so hopefully it helps someone with something :slight_smile:

Thanks again for your help Bruno.