Input repeater needs at least one element saved on dataset?

Ask the community
,
1

I’m having a hard time with something that should be very simple.

I’m building an input repeater based on this one made by @Yisrael (Wix)

Below, the differences between @yisrael-wix 's example and what I want to achieve with my project:

Example:

  • TWO datasets

  • ONE textbox, ONE dropbox

Me:

  • ONE dataset

  • TWO textboxes

I have modified the ‘Inline’ section of the code in the example as follows:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from "wix-data";

//let states = [];

$w.onReady(async function () {

//  let resStates = await wixData.query("States").find();
//  let resItems = resStates.items;
//  states = resItems.map((item) => { return { "label": item.title, "value": item.title } });

    $w("#repeater1").onItemReady(($item, itemData, index) => {
 //$item("#box1").style.backgroundColor = (index % 2 === 0) ? "#FAF0E6" : "#FFEFD5";

 //  $item('#dropdown1').options = states;
 //  $item('#dropdown1').value = itemData.stateOfMind;

        $item('#input2').hide();
        $item('#input1').hide();
        $item("#txtName").show();
        $item("#txtAffi").show();

        $item("#input1").onKeyPress((event) => {
            $item("#btnSave").enable();
            $w("#btnNew").disable();
        });

        $item("#input2").onKeyPress((event) => {  // Edgar: I added $item("#input2").onKeyPress   based on $item("#input1").onKeyPress 
            $item("#btnSave").enable();
            $w("#btnNew").disable();
        });

 //  $item("#dropdown1").onChange((event) => {
 //      $item("#btnSave").enable();
 //      $w("#btnNew").disable();
 //  });

        $item("#btnSave").onClick(async (event) => {

 await $item('#dataset1').save();
 
 // why does this make it work?
 //  $item('#dropdown1').show();
            $item('#input1').show();
            $item('#input2').show();

            $item('#input2').hide();
            $item('#input1').hide();
            $item("#txtName").show();
            $item("#txtAffi").show();
 
            $item("#btnSave").disable();
            $item("#btnEdit").enable();

            $w("#btnNew").enable();
        });

        $item("#btnEdit").onClick(async (event) => {
            $item("#btnEdit").disable();
            $item("#btnSave").enable();

            $item('#dropdown1').show();
            $item('#input1').show();
            $item("#txtName").hide();
            $item("#txtAffi").hide();
        });
    });

    $w("#dataset1").onReady(async () => {
 if ($w("#dataset1").getTotalCount() === 0) {
            $w('#empty').show();
        }
    });
})

export async function btnNew_click(event) {
    $w('#empty').hide();

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

    $w('#btnNew').disable();

    $w("#repeater1").forEachItem(($item, itemData, index) => {
 //$item("#box1").style.backgroundColor = (index % 2 === 0) ? "#FAF0E6" : "#FFEFD5";

 if (item._id === itemData._id) {
            console.log("new", item._id);
            $item("#btnEdit").disable();

            $item('#input2').show();
            $item('#input1').show();
            $item("#txtName").hide();
            $item("#txtAffi").hide();
        }
    });
}

export async function repeater1_itemRemoved(_itemData) {
 if ($w("#dataset1").getTotalCount() === 0) {
        $w('#empty').show();
 return;
    }

    $w("#repeater1").forEachItem(($item, itemData, index) => {
        $item("#box1").style.backgroundColor = (index % 2 === 0) ? "#FAF0E6" : "#FFEFD5";
    });
    $w("#btnNew").enable();

 if ($w("#dataset1").getTotalCount() === 0) {
        $w('#empty').show();
    }
}

async function addNewOnEmpty() {
 if ($w("#dataset1").getTotalCount() === 0) {
        $w('#btnNew').disable();
 await $w('#dataset1').new();
 let item = $w("#dataset1").getCurrentItem();
        $w("#repeater1").forItems([item._id], ($item, itemData, index) => {
            $item("#btnEdit").disable();

 //$item('#dropdown1').options = states;
 //$item('#dropdown1').value = itemData.stateOfMind;

 //$item('#dropdown1').show();
            $item('#input1').show();
            $item('#input2').show();
            $item("#txtName").hide();
            $item("#txtState").hide();
        });
    }
}

This piece of code does not run ok when my dataset has 0 elements. For a certain reason, my version of the code needs to have at least one element already saved in the dataset to run.

This is what I get:

DatasetError: Operation (onReady) is not allowed because the field used to build this page's URL is empty

I have no idea what to modify in my code to make it run. I will appreciate any help as I’m really frustrated trying to achieve this behaviour.

Thank you for your time.

2

Please help?

3

OK, so that’s as lot of code to follow and it’s not so easy to see what’s going on.

One thing that I see (that may very well be irrelevant, is that the dataset onReady() line of code does not need async . You aren’t doing anything in the code that requires the use of async .

Not this:

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

But this:

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

My question to you is why do you only want one dataset? It doesn’t matter how many datasets you have since they only function as connectors between the screen elements (repeater and its elements) and the database collection. You can use one dataset as read-only, and the other as write-only - so each dataset has its purpose. Why can’t you use the example the way it is? That is, with two datasets.

Another question… Is your dataset defined as read-only, write-only, or read-write?

You state that the “code needs to have at least one element already saved in the dataset to run”. I’m not really sure, but it sounds as if this is on a dynamic page.

4

@Yisrael (Wix) Thank you so much for your reply.

I believe that part of my problem is that my understanding of datasets is a bit limited.

I purposed to use only one dataset to ‘simplify’ things. However, I realize that’s not the case.

Unfortunately, I had to stop working on this project abruptly for personal reasons. However, I’ll try to replicate the problem as soon as I have a chance.

Just to document what I was doing in case someone finds this thread interesting… My dataset was set as read-write and I used a Dynamic page.

I appreciate your time and goodwill to help Yisrael.

Cheers!!