How to submit Edit form with submit button on Lightbox? Lightbox with input field & Textbox opens when edit icon clicked on repeater.

Ask the community
,
1

Hello All, I have a edit icon on repeater which opens a lightbox with a input field #input33 & a textbox #textBox1. The input field and textbox gets repeater’s item data without any issues. Now I would like to know how can I edit these two fields and submit them through button #button6 so edited data saves in respectively repeater’s data in collection with success (#text196) and error messages (#text197).

Please help me out.

2

Where is your code?

3

Here below is my code.

// On Dynamic Page - Code to enable edit and delete button only for user who submitted the content and hide edit/delete buttons for other logged in user. Delete button deletes the row in the database. Edit button opens lightbox with repeater's data. 
  
$w("#repeater9").onItemReady(($item, itemData, index)=>{
              if (itemData._owner === wixUsers.currentUser.id) {
                $item('#vectorImage4').show();
                $item('#vectorImage3').show();
            } else {
                $item('#vectorImage4').hide();
                $item('#vectorImage3').hide();
             }

  $item('#vectorImage3').onClick((event) => {
  $item('#vectorImage3').show();
  let id = itemData._id;
  wixData.remove("reviews", id)
  .then(() => {
   $w('#dataset1').refresh();
  }); 
 });

 $item("#vectorImage4").onClick((event)=>{
        const repeaterItem = itemData;
        wixWindow.openLightbox("TEST -  Ratings Lightbox",repeaterItem)
    })

});

// Lightbox page - Code to receive the repeater's data. 
 
import wixWindow from 'wix-window';
import { currentMember } from 'wix-members';
import wixData from 'wix-data';

$w.onReady(function () {
    let receivedData = wixWindow.lightbox.getContext()
    $w("#input33").value = receivedData.reviewTitle
    $w("#textBox1").value = receivedData.review
    });
    
 // would like to know How to submit the edits done on input and textbox through button click (#button6) with success (#text196) and error messages (#text197).
4

Here you send data to lightbox by a click onto a VECTOR-IMAGE…

$item("#vectorImage4").onClick((event)=>{
	wixWindow.openLightbox("TEST -  Ratings Lightbox", temData);
})

…on LIGHTBOX you recieve the data…

let receivedData = wixWindow.lightbox.getContext();
$w("#input33").value = receivedData.reviewTitle;
$w("#textBox1").value = receivedData.review;

Your question…

Now I would like to know how can I edit these two fields and submit them through button #button6 so edited data saves in respectively repeater’s data in collection with success (#text196) and error messages (#text197).

So now you want first to EDIT the data…
… and then save this data back to DATABASE.

There are 2 possible ways you can do it.

  1. RETURNING all CONTEXT-DATA back trough LIGHBOY to PAGE an then SAVE.
  2. DIRECTLY SAVE

I would prefer the - → RETURN ← - way.

How to do ?

1289×275 11.6 KB

That means…
You have to close the lighbox (for example on a click onto a SUBMIT-BUTTON.
The LIGHBOX gets closed and sends data back to page.

$w('#btnSubmitOnLighbox').onClick(()=>{
	wixWindow.lightbox.close(YOUR_DATA_HERE_FOR_RETURNING_2_PAGE)
});

But to be able to recieve returning data, you would have to change your code on your page, too…

wixWindow.openLightbox("TEST -  Ratings Lightbox", temData)
.then((res)=>{
    let returningResults = res;
    console.log("Returning-Results: ", returningResults);
});

And back on your page, you can do the SAVING and REFRESHING of your DATASET to refresh your REPEATER.

5

Could you please advise some example links so I follow them