Repeater user form onChange

Ask the community
, ,
1

I’m trying to create an input form that allows a user to store the dimensions of a building (any building) to a collection. I also want the building data to be visible and editable at all times.


My strategy is to use a repeater, where each container has input fields (read / write) that correspond to the fields in the collection. An onChange event handler for every input field saves user entries to the collection automatically (well that’s the theory).

The add wall button makes a new entry in the collection and then refreshes the dataset which generates a new container and set of input fields.

My problem is that onChange only works for the input fields in the newest container.

Thanks

 export function button1_click(event) {

    let toInsert = {
    "wallName":        "New Wall",
    };

    wixData.insert("Walls", toInsert)
    .then((item) => {
    console.log(item); //see item below
    $w('#dataset1').refresh();
        })
    .catch((err) => {
        console.log(err);
    });
}

export function input1_change(event) {
    
    let newValue = event.target.value;

    $w("#dataset1").save()

}

export function input2_change(event) {

     let newValue = event.target.value;

    $w("#dataset1").save()
    
}

export function input3_change(event) {

    let newValue = event.target.value;
    $w("#dataset1").save()
    
}
2

I don’t see the problem (maybe the collection permissions are set to “Add Item: Admin-only”) , but I think that since you decided to do all the saving through a dataset and not directly ( dataset.save and not wixData,update ), it will make sense to add the new item via dataset as well and then update its fields. You can try:
https://www.wix.com/velo/reference/wix-dataset/dataset/add

3

Thanks for the suggestions, I tried both but unfortunately neither worked.

4

Solved it!

export function input1_change(event) {

  let $item = $w.at(event.context);
  
  let newValue = event.target.value;

  $item("#dataset1").save()
5

Another question. When I use $w(“#dataset1”).add() each new container doesn’t appear as the first or last in the series, but always immediately below the oldest container. I’ve tried sorting the repeater and the collection, but this has no effect?

6

I don’t think I understand your description.
I always use direct wixData.insert() and I have no experience with dataset.add, so I need more details in order to understand what you did (maybe add the code) and what you go, and what you wish to have.

7

Hopefully this explains things a little better. Here’s the code

export function button1_click(event) {
 
$w("#dataset1").add()
  .then( ( ) => {
    console.log("New item added");
  } )
  .catch( (err) => {
    let errMsg = err;
  } );

}

And when I hit the ‘+ Wall’ button I get the following

The new wall container appears second in the order, instead of at the bottom as planned.

So I just figured out one solution, but it’s a bit sluggish. The add() function doesn’t save the new item, so by subsequently saving and then refreshing the dataset the new container moves to the bottom. Although this works, the new container first appears in 2nd position and then moves to last after a short delay, it feels a bit clunky.

I’m starting to think I should just stick to the insert function.