Replace element in a repeater with an element in a different repeater

Discussion Ask a question
,
1

Hi guys, already a week now trying to solve this, please help me!

I’m just trying to have the users update their profile pics with images they already uploaded.
I have a repeater containing the current profile pic and I have another repeater with the pics the user has uploaded. Both repeaters are connected to the same collection with 2 different datasets, one for each repeater. I would like the user to be able to select an image from their uploaded images to update the profile pic.

Here’s the code I’m trying, I got the code from an older post:

export function container2_click(event) {
$w(“#repeater6”).onItemReady(($item, itemData, index) => {
let clickedItemData = $item(“#dataset4”).getCurrentItem();
$w(“#image9”).src = itemData.img;
});
}

container2 is holding the uploaded images inside #repeater6, this repeater and its elements are connected to #dataset4.
#image9 is the current pic

Here’s the #error I’m getting:
-----Wix code SDK Warning: The src parameter of “image9” that is passed to the src method cannot be set to null or undefined-----

I saw this same error in an older post and it was solved but I couldn’t fix it anyway. I hope you guys can help me.

Thanks a lot in advance guys!

2

Try something like:


$w.onReady(() => {
  $w("#repeater2").onItemReady(($item, itemData, index) => { 
    $item("#setNewImageButton").onClick(event => {
     let newImage = $item("#image1").src;
      $w("#dataset1").setFieldValue("image", newImage);
      $w("#dataset1").save()
      .then( (item) => {
         $w("#dataset1").refresh();
      })
      .catch( (err) => {
        let errMsg = err;
      });
  })
})
3

So, I replaced what I think it needed to be replaced in the code. Can you please check if I’m doing it right? I have very little experience in coding.
I’m getting an error script in setFieldVlaue line. What should I put there?

$w.onReady(() => {
$w(“#repeater6”).onItemReady(($item, itemData, index) => {
$item(“#firstImage”).onClick(event => {
let newImage = $item(“#image”).src;
$w(“#dataset4”).setFieldValue(“image”, “newImage”);
$w(“#dataset4”).save()
.then( (item) => {
$w(“#dataset4”).refresh();
})
. catch ( (err) => {
let errMsg = err;
});
})
})
});

#firstImage is the image I’m clicking to replace the current profile pic with that image.

Thank you very much for your response.

4

instead of this line:

 let newImage = $item("#image").src;

Write:

 let newImage = $item("#firstImage").src;

instead of this line:

  $w("#dataset4").setFieldValue("image", "newImage");

Use this line:

  $w("#dataset4").setFieldValue("image", newImage); //newImage without quotation
  • make sure dataset4 is the dataset for the current profile and that field key of the image in this dataset is “image”.
5

You’re awesome! That worked perfectly.

Here’s the code:

$w.onReady(() => {
$w(“#repeater6”).onItemReady(($item, itemData, index) => {
$item(“#firstImage”).onClick(event => {
let newImage = $item(“#firstImage”).src;
$w(“#dataset3”).setFieldValue(“profilePic”, newImage);
$w(“#dataset3”).save()
.then((item) => {
$w(“#dataset3”).refresh();
})
. catch ((err) => {
let errMsg = err;
});
})
})
});

The problem I’m having now is that we’re submitting the change straight away by clicking #firstImage, that’s great but I have this context:

1197×455 256 KB

That #savebutton1 submits whatever is in the upload button, that’s done. The 3 images are the uploaded images where #firstImage is, all are #firstImage. I guess I can add another #savebutton2 to submit the change when using the uploaded images, put it in the same place but hidden and show it when one of the uploaded images is clicked, vice-versa if #uploadbutton1 > 0, not sure if this would be the best approach. How can I, first, show the user she/he has selected one of the uploaded images, like a highlighted border; second, submit the change with the #savebutton2.

Thanks for all your help. I would’ve never got it.

6

Ok, I think I’m almost getting this. I have this:

$w.onReady(() => {
$w(“#repeater6”).onItemReady(($item, itemData, index) => {
$item(“#firstImage”).onClick(event => {
let newImage = $item(“#firstImage”).src;
$w(“#dataset3”).setFieldValue(“profilePic”, newImage);
$item(‘#imgUploadedSelect’).show();

    }); 
})

})

export function uploadedImageSave_click(event) {
$w(“#dataset3”).save()
.then((item) => {
$w(“#dataset3”).refresh();
})
. catch ((err) => {
let errMsg = err;

    });

}

The #imgUploadedSelect is shape element I put around #firstImage to show a selection, I have that hidden on load, but I don’t know how to switch from a clicked image to another.

7

I don’t understand what you’re trying to do, and what the problem is.

8

I’m trying to show the user what image he has selected to replace the profile pic, so i put a border shape (#imgUploadedSelect) around the clicked image, i’m showing this border when the user clicks but when a different image is clicked, the border of the previous clicked image has to hide, i dont know how to do it.

I have this:

$w.onReady(() => { $w(" #repeater6 “).onItemReady(($item, itemData, index) => { $item(” #firstImage “).onClick(event => { let newImage = $item(” #firstImage “).src; $w(” #dataset3 ").setFieldValue(“profilePic”, newImage);
$item(’ #imgUploadedSelect ').show();
});
})
})

9

So try somthing like:

 $w.onReady(() => { 
  $w("#repeater6").onItemReady(($item, itemData, index) => { 
  $item("#firstImage").onClick(event => 
   let newImage = $item("#firstImage").src;  
   $w("#dataset3").setFieldValue("profilePic", newImage);  
  $w("#repeater6").forEachItem( ($i, iData, inx) => {
    $i("#imgUploadedSelect").hide();
  })
  $item("#imgUploadedSelect").show();
  })
 })
})
10

Or maybe even shorter (this may work as well):

$w.onReady(() => { 
  $w("#repeater6").onItemReady(($item, itemData, index) => { 
  $item("#firstImage").onClick(event => 
   let newImage = $item("#firstImage").src;  
   $w("#dataset3").setFieldValue("profilePic", newImage);  
   $w("#imgUploadedSelect").hide();
  $item("#imgUploadedSelect").show();
  })
 })
})
11

Actually, I tried that shorter way before asking you and it didn’t work. The first one did.

12

Everything has worked, thank you for taking the time.

Now, #repeater6 shows 3 options to update the profile pic, the current pic is one of them, How can I not show the current image and instead show another pic available?

And one last thing (the cancel button), the profile pic is changed after an image has been selected and it is not submitted until #save is clicked, meaning that if I click cancel, the change is not submitted but the profile pic is changed, how do I make the cancel button revert the change and put back the current pic? Including removing the border(#imgUploadedSelect) that shows that an image is selected.

13

It depends on the structure of your collections.
I don’t even know why you’re using 2 repeaters on this page, so it’s not easy to answer.

14

I understand, by the way, forget about the cancel button, I made it after many tries.

I’ll write about the collections in a minute, let me take some screen shots.

15

So, #repeater5 shows the current profile picture, #repeater6 shows the already uploaded images.

362×679 47.2 KB

Here’s #dataset3, #repeater5 and it’s element (current profile pic) are connected to this #dataset3.
I hope this is what you mean by structure. The sort is date created New to Old

368×683 44.1 KB

Here’s #dataset4, #repeater6 and it’s element (uploaded pics) are connected to this #dataset4.

1904×854 354 KB

The little camera icon opens up #repeater6.

1913×861 318 KB

16

it is one collection with 2 fields: profile pic, cover, both image

17

Why do you need a repeater to display the current profile picture? There’s nothing repeating there.

18

I thought that was the only way to connect an element to a dataset

19

Of course not, you can connect any place holder (image, gallery) to a dataset. And in your case you should do it, and don’t use a repeater. Repeater is only for repeating elements.

20

Got it!