0

Hello everyone and thanks for reading:

I´m having a problem in a Javascript file from a LWC I´ve built.

handleSaveUniqueRecord (event)
{
    //clone event obj using spread
    //event cant be used inside .then because of different scope
    this.eventClone = event;
    let objField = [];

    console.log('tst access reference1 ' + this.eventClone.target.name);
    console.log('tst access reference2 ' + event.target.name);


    saveUniqueFieldData ({fieldRecordId: event.target.dataset.id,
        fieldRecordValue: event.target.value.toString(),
        fieldAnswerLabel: event.target.dataset.selectedanswerlabel,
        fieldRecordNodeType: event.target.dataset.nodetype,
        fieldStatus: event.target.dataset.status != null ? event.target.dataset.status : event.target.value.toString() === '' ? 'Incomplete': 'Complete',
        sectionId: this.formDataArray.salesforceValueId,
        sectionStatus:  this.formDataArray.status
    })
    .then(result => {
        console.log('result inside promise   ', result)

        //when changing the value that disables the dependant field the value of the dependant field needs to be cleared 
        //pending development
        console.log('tst access reference eventClone inside THEN ' + this.eventClone.target.name);
        console.log('tst access reference event inside THEN ' + this.event.target.name);
        this.error = false;

        console.log('loguea despues del name ??')

        //Update section status and send it back to parent component
        this.formDataArray.status = result;
    })
    .catch(error => {

        console.log('error in DynamicFormFields.js' );
        //show toast error message when something went wrong with saving the individual question.
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error saving form data',
                message: error.message ,
                variant: 'error',
                mode:'sticky'
            })
        );
        this.error = true;
    });

    //needs to be changed to then promise
    if (this.error == true)
    {
        objField = this.formDataArray.fieldsBlock.find(t=>t.internalId===event.target.name);
        console.log(' .... inside error if ... ', event.target.name)
        //update the original value in the JSON for future validations
        objField.value = objField.originalValue;
        objField.errorSaving = true;
    }
    else{
        console.log('function init');
        let objField = [];
        objField = this.formDataArray.fieldsBlock.find(t=>t.internalId===event.target.name);

        console.log('after objfield ' + objField);
        console.log('after objfield ' + objField.nodeType);
        //update the original value in the JSON for future validations
        if (objField.nodeType!= "InputTextArea")
            this.formDataArray.rating = (+this.formDataArray.rating - (+objField.originalValue) ) + event.target.value ;

        objField.originalValue = event.target.value;
        
        objField.errorSaving = false;
        objField.valueChanged = false;

        this.updateSectionValues ();
    }
}

This is the code.

It recieves an event and calls the saveUniqueFieldData Apex method which returns a String ('Incompleted' in my case) and then needs to do something in the .then function of the promise. Inside the .then method I need to get the value of this lines

  console.log('tst access reference eventClone inside THEN ' + this.eventClone.target.name);
  console.log('tst access reference event inside THEN ' + this.event.target.name);

but they are both comming back as 'undefined' and I can't understand why they are working fine before the .then method

console.log('tst access reference1 ' + this.eventClone.target.name);
    console.log('tst access reference2 ' + event.target.name);

and not inside it.

Improve this question
2
  • I imagine an exception is being thrown. But then I would expect you to see the details in the console, unless something is catching and silently ignoring the exception... Commented Jun 3, 2022 at 21:38
  • Hi @PhilW, thanks for the comment. I've updated the question to make it more clear. Commented Jun 3, 2022 at 21:51

1 Answer 1

Reset to default
1

Seems like the event DOM property is not directly accessible when promise is resolved i.e. inside .then.

You need to create a local property [named target in this example] to hold event.target, doing so target is accessible inside .then-

handleSaveUniqueRecord (event) {
    let target = event.target;

    saveUniqueFieldData ({
        // your properties here
    })
    .then(result => {
        console.log('access reference event inside THEN ' + target.name);
    }
}

Psuedo working example on https://webcomponents.dev/

OR Another alternative would be to use async/await pattern.

Note: I think event represent DOM which is accessible in sync call inside a function, when you call a promise; its executed in a separate microtask where DOM is not accessible anymore.

Improve this answer
2
  • Thanks for commenting Raul ! I´ll check it out and let you know :) Commented Jun 4, 2022 at 15:39
  • Raul, thanks for the answer !!! It´s a bit odd how your solution works but mine, cloning the hole event and then using it as a class variable won't. I can't see why, but it worked. Thanks :D Commented Jun 4, 2022 at 16:08

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.