help! hiding a section if the reference fields is empty

Ask the community
,
1

hi! i have 2 databases that are connected to each other through reference fields. in a dynamic page, i tried to show a section that is related to the other dataset of the dynamic page, and hide it when there is no connection between the two items . for example, if my main database is called " recipes " and has an item " salad ": if there is an item connected to " salad " in the reference dataset called " nutrition " then show the section that is connected to the nutrition database. this way i can show nutritional value of the salad . i hope it is clear.
this is the code i have been using but it doesn’t seem to work.
can anyone help me understand what am i doing wrong

(dynamicdataset = recipes dataset , nutrishion = reference field connected to recipes database , section7 = the section i would want to hide/show)


$w.onReady(function () {
   $w("#dynamicDataset").onReady( () => { 
       let item = $w("#dynamicDataset").getCurrentItem(); 

       if (item.nutrishion===null) {
          $w("#section7").hide();
          $w("#section7").collapse();
          
       } else {
          $w("#section7").show();
          $w("#section7").expand();

       }

    } );

    });

thank you

2

1326×447 130 KB

this is the element (section7).
i have also tried to do this:

$w.onReady(function () {
   $w("#dataset1").onReady( () => { 

       let item = $w("#dataset1").getCurrentItem(); 

       if (item.reference===null) {
          $w("#section7").hide();
          $w("#section7").collapse();
          

       } else {
          $w("#section7").show();
          $w("#section7").expand();

       }

    } );


    });

but it still doesnt work.
it doesnt hide the section! on pages that are not connected to an element in the nutrition database the section shows but doesnt display connected content, like so:

890×422 85.8 KB

note: this image is a placeholder. the text and the image are cconnected to the nutrition dataset.

3

Try const instead of let:

$w . onReady (() => {

$w ( "#dynamicDataset" ). onReady (() => {

const item = $w ( “#dynamicDataset” ). getCurrentItem ();

**if**  (! item . nutrishion ) { 
        $w ( "#section7" ). hide (); 
        $w ( "#section7" ). collapse (); 
    } 

 });

});

4

Did you ever checked which results you get ???

$w.onReady(function () {
   $w("#dynamicDataset").onReady( () => { 
       let item = $w("#dynamicDataset").getCurrentItem();
       console.log("ITEM: ", item);
   });
});

Take a look into your console and ispect the results.

5

sadly, it didn’t help :frowning: any other clue?

6

how do I check this?

7

Already shown directly on the ANSWER above…

$w.onReady(function(){
	$w("#dynamicDataset").onReady(()=>{
		letitem=$w("#dynamicDataset").getCurrentItem();
		console.log("ITEM: ", item);
	});
});

Test this code and open the preview-mode in your Wix-Editor.
Open the console of it and inspect the results.

You will get something like…

{…} <--------> it’s an Object

…or you will get an ARRAY <---------> […]

Click onto this and open the data you got back as results.

8

if anyone has a clue, i have been searching for a solution for quite a while now and can’t get it to work :hugs:

9

As i can see, you are still searching for solution and i wil tell you why you still searching for solution.

Because…

  1. You do not provide a screen of your 2 databases and how there are structured.
  2. You do not provide related DB-Fields
  3. You do not provide a screenshot, of your 2 databases, which would clarify your setup.
  4. You did not provide a RESULT-OBJECT of my provided code.

Anybody can see what is inside of the resulting OBJECT.

Provide more info about your DATABASE. (show a screenshot of both).
Also show OBJECT-RESULTS .


$w.onReady(function(){
	$w("#dynamicDataset").onReady(()=>{
	   let item = $w("#dynamicDataset").getCurrentItem();
	   console.log("ITEM: ", item);
	});
});
10

heard you loud and clear. thank you for your time. i will be able to upload more info tommorow.