Adding a .new() item to #myDataSet

Ask the community
,
1

I am currently working on a navigation point for my dataset consisting of:

(–) delete
(<<) start
(<) back
(>) forward
(>>) end
(+) add/new

I have it set up as a portal (my description) so that the end user is only sees one entry point which is fed from the dataset displaying the item listing by index/invitation number. The user can scroll through and each entry is displayed. I have all of the buttons working with the exception of the (+) add/new button.

I am using the $w('#myDataSet).new() command, but when the button is clicked, the new addition to the dataset is blank on all fields. I manage to get the focus onto a entry point field for the user, but the entry is not saved immediately, and the only way to add this to the dataset is to use the back/forward button to force it to generate its new index and invite number. As the index starts at zero (0), I created a additional field to display a invite number which is (index +1) so that the first invitation shows up as number 1 instead of 0 (zero).

I have tried various methods to force the save, and have got it to a point where it is not throwing any errors, but it still seems to save it before it has created the new item. I have it as part of a .onReady() which I had success with on the other buttons.

Errors that I have had while trying to code this correctly are as follows:

  1. (save) not possible during .onReady()

  2. (onReady) not allowed during .save()

Another issue that I did have at one point was in relation to the next number in the sequence. I currently have 8 entries; Index/InviteNumber: 0/1 – 7/8. When the new record was added, item 7/8 would be changed to ?/9 before the new item was displayed. The new item then still displayed as blank, as it does now, and to correct the previous item, I had to manually scroll back so that it would correct the displayed number because it was based on the actual index number.

So very basically, my problem is that the $w(‘#myDataSet’).new() should immediately create a new InviteNumber from the new Index number (var InviteNumber = Index +1), display this in the field provided on-screen, and save the dataset.

I have included two (2) images of what the user sees presently. They are invitation 8, and a visual reference for my description of what happens when the add button is clicked and the blank item appears. I have also added a code snippet of the list of variables at the start of my function, and then skipped to the problem section of the if statement. Please let me know if you require further detail or the function in its entirety.

344×503 17.5 KB

// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx //
// xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx //
/* --------------------------------------------------------- */ export function GuestRecordNav (event)      /* --------------------------------------------------------- */
{ // ----------------------------------------------------------                                                 ------------------------------------------------------------ //
 
 var TargetID                = event.target.id ;

/*  var IndexNext               =   wixData.max ('Index') +1 ; */

 var GuestRecordRwdFwd       = ["", 'GuestRecordRwd' , 'GuestRecordFwd' ] ;
 var GuestRecordRRdFFd       = ["", 'GuestRecordRRwd', 'GuestRecordFFwd'] ;
 var GuestRecordDelAdd       = ["", 'GuestRecordDel' , 'GuestRecordAdd' ] ;

 var GuestRecordIndex        = $w("#OrderGuestList").getCurrentItemIndex() ;
 var GuestRecordInvNo        = $w("#OrderGuestList").getCurrentItemIndex() +1 ;  console.log ( "GuestRecordInvNo: " + $w("#OrderGuestList").getCurrentItemIndex() )

 var GuestRecordIndNxt       = GuestRecordIndex +1 ;
 var GuestRecordInvNxt       = GuestRecordInvNo +1 ;

 var IndexMax    = Number.MAX_SAFE_INTEGER ;

    $w('#InviteNumber').value = GuestRecordInvNo ;

    $w('#OrderGuestList').setFieldValues ( { "_id" : $w("#OrderGuestList").getCurrentItem()._id,
 "Index" : $w("#OrderGuestList").getCurrentItemIndex(),
 "Invite_Number" : $w("#OrderGuestList").getCurrentItemIndex() +1,
 /*
                                             "Guests_Adult" : $w("#GuestNameAdult").value,
                                             "Guests_Child" : $w("#GuestNameChild").value,
 
                                             "Adult_1A" : $w('#GuestAdult1'  ).value,   "Adult_1B" : $w('#GuestName1A1S').value,
                                             "Adult_2A" : $w('#GuestAdult2'  ).value,   "Adult_2B" : $w('#GuestName1A2S').value,
 
                                             "Child_1A" : $w('#GuestChild1' ).value,    "Child_1B" : $w('#GuestChild1S').value,
                                             "Child_2A" : $w('#GuestChild2' ).value,    "Child_2B" : $w('#GuestChild2S').value,
                                             "Child_3A" : $w('#GuestChild3' ).value,    "Child_3B" : $w('#GuestChild3S').value,

                                             "Child_4A" : $w('#GuestChild4' ).value,    "Child_4B" : $w('#GuestChild4S').value,
                                             "Child_5A" : $w('#GuestChild5' ).value,    "Child_5B" : $w('#GuestChild5S').value,
                                             "Child_6A" : $w('#GuestChild6' ).value,    "Child_6B" : $w('#GuestChild6S').value,
 
                                             "Child_7A" : $w('#GuestChild7' ).value,    "Child_7B" : $w('#GuestChild7S').value,
                                             "Child_8A" : $w('#GuestChild8' ).value,    "Child_8B" : $w('#GuestChild8S').value,
                                             "Child_9A" : $w('#GuestChild9' ).value,    "Child_9B" : $w('#GuestChild9S').value,
 
                                             "Child_10A" : $w('#GuestChild10' ).value,  "Child_10B" : $w('#GuestChild10S').value */ } ) ;
 
        console.log("(from) Index No/Invite No:  " + GuestRecordIndex + "/" + GuestRecordInvNo + "\n\n" ) ;

        wixData.save() ; 

// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //
// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //
// ------------------------------------------------------------          Guest Records Navigation (if)          ------------------------------------------------------------ //

if ( TargetID === GuestRecordRwdFwd[1] ) { $w("#OrderGuestList").previous() ; } else
if ( TargetID === GuestRecordRwdFwd[2] ) { $w("#OrderGuestList").next() ; } else

if ( TargetID === GuestRecordRRdFFd[1] ) { $w("#OrderGuestList").setCurrentItemIndex(0) ; } else
if ( TargetID === GuestRecordRRdFFd[2] ) { $w("#OrderGuestList").setCurrentItemIndex(IndexMax) ; } else

if ( TargetID === GuestRecordDelAdd[1] ) { $w("#OrderGuestList").remove() ; $w("#OrderGuestList").setCurrentItemIndex() ;
 
 
        console.log("(from) Index No/Invite No:  " + GuestRecordIndex + "/" + GuestRecordInvNo + "\n\n" ) ;

        wixData.save() ; } else
 
if ( TargetID === GuestRecordDelAdd[2] ) { 

     $w.onReady ( () =>
            { $w('#OrderGuestList').onReady ( () => 
                    { $w('#OrderGuestList').new() ;

    $w('#OrderGuestList').setFieldValues ( { "_id" : $w("#OrderGuestList").getCurrentItem()._id, 
 "Index" : $w("#OrderGuestList").getCurrentItemIndex(),
 "Invite_Number" : $w("#OrderGuestList").getCurrentItemIndex() +1
 /*
                                             "Guests_Adult" : $w("#GuestNameAdult").value,
                                             "Guests_Child" : $w("#GuestNameChild").value,
 
                                             "Adult_1A" : $w('#GuestAdult1'  ).value,   "Adult_1B" : $w('#GuestName1A1S').value,
                                             "Adult_2A" : $w('#GuestAdult2'  ).value,   "Adult_2B" : $w('#GuestName1A2S').value,
 
                                             "Child_1A" : $w('#GuestChild1' ).value,    "Child_1B" : $w('#GuestChild1S').value,
                                             "Child_2A" : $w('#GuestChild2' ).value,    "Child_2B" : $w('#GuestChild2S').value,
                                             "Child_3A" : $w('#GuestChild3' ).value,    "Child_3B" : $w('#GuestChild3S').value,

                                             "Child_4A" : $w('#GuestChild4' ).value,    "Child_4B" : $w('#GuestChild4S').value,
                                             "Child_5A" : $w('#GuestChild5' ).value,    "Child_5B" : $w('#GuestChild5S').value,
                                             "Child_6A" : $w('#GuestChild6' ).value,    "Child_6B" : $w('#GuestChild6S').value,
 
                                             "Child_7A" : $w('#GuestChild7' ).value,    "Child_7B" : $w('#GuestChild7S').value,
                                             "Child_8A" : $w('#GuestChild8' ).value,    "Child_8B" : $w('#GuestChild8S').value,
                                             "Child_9A" : $w('#GuestChild9' ).value,    "Child_9B" : $w('#GuestChild9S').value,
 
                                             "Child_10A" : $w('#GuestChild10' ).value,  "Child_10B" : $w('#GuestChild10S').value */ } )
 

 /*  $w('#OrderGuestList').save()
                                               .then( ( ) => { console.log("New Item Added") ; } )
                                               .catch( (err) => { let errMsg = err; console.log ( errMsg ) ; } ) */  } ) ;  } ) ; 

        console.log("New Item Added") ;
        console.log("(from) Index No/Invite No:  " + GuestRecordIndex + "/" + GuestRecordInvNo + "\n\n" ) ; $w('#GuestNameAdult').focus() ; 

        wixData.save() ; /*

        $w('#GuestNameAdult').focus() ; $w('#InviteNumber').value = GuestRecordInvNxt ; *//* $w('#OrderGuestList').setCurrentItemIndex(GuestRecordIndNxt) ; 

     $w('#OrderGuestList').save() ; wixData.save() ; */ } console.log ( $w("#OrderGuestList").getCurrentItemIndex() + "," + $w("#OrderGuestList").getCurrentItemIndex() + "," + $w("#OrderGuestList").getCurrentItemIndex()  ) ;
 

// ------------------------------------------------------------          Guest Records Navigation (end)         ------------------------------------------------------------ //
// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //
// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //

I think that I have a unique way of sectioning things off so that I can follow things more easily, so please accept my apologies if this makes it more difficult for you. You’ll see that I have also blocked of sections of code to try and narrow down where things were going wrong, but as this code currently sits is how it is currently functioning. The final part (end) of the if statement is the portion for you to look at.

One last thing to note is that the names are entered in the Adult and Child boxes at the top, and are split and added to the reference fields for each invited guest below. These are only shown so that I can see that things are working. They will not be on the final site page.

I look forward to any insights or help that you can offer.

2

Hello.

Try using an afterInsert() or onAfterSave() data hook to return the item just after it has been added to your collection.

You can learn more on what you can do with data hooks here: https://support.wix.com/en/article/corvid-using-data-hooks

Good luck!

3

Hi Sam.

Thanks for the suggestions . I have to admit that I don’t understand data hooks just yet, but I’ll have a good look at the link that you’ve supplied here. They may make things a little bit easier for me overall.

For the moment, I have simplified my (1) function and split it into multiple parts so that it works under different names with different triggers on the field, such as, onKeyStroke, onChange, onBlur. I may have been trying to do accomplish too much within a single function.

Since splitting them up and calling them separately, I have not had a problem with the numbering. The dataset is saved the same way as it was before: $w(‘#myDataSet’).save() ; Perhaps there was something that was just causing a slight conflict when it was trying to meet the parameters of each if statement.

Hopefully, others can learn from my mistakes to resolve issues like this. Simplify things wherever you can. You can use the same variables within separate functions, so just copy and paste what you have; rename the function, and cut it back to a single step (#1). You can then do the same with step 2, 3, 4, and so on.

If you’re feeling brave or need to satisfy the OCD monster inside you; once you’ve got them all working, you can try stringing them together under one function name. Beware though. If it aint broke, don’t fix it.

Thanks again for your suggestions Sam.