Change event.CurrentTarget after calling apex method

Question

I'm trying to modify the event.currentTarget (a cell of a table) with the information returned by an Apex method, but every time I click on the element, the information of the apex class is not yet available and does nothing on the first click, I have to click on it a second time, so that it has the data already loaded.

Is there any way to be able to modify that event.currentTarget having collected the information and painting it with a single click?

JS


@api hour;
@api day;
@api target;

handleSubdivisionTouchStart(event){
        this.hour= event.currentTarget.getAttribute("data-hour");
        this.day= event.currentTarget.getAttribute("data-day");
        this.target = event.currentTarget;        
        if(!this.disabled){
            if(this.result != null){
                this.target.textContent = this.result;
            }else{
                this.target.textContent = '';
            }
        }
    }

@wire (getData, {hour: '$hour', day: '$day', target : '$target'})
    getDataCalendar(result){
        const { data, error } = result;
        if(data){
                this.field1 = data;
            }
        }else{
            this.field1 = '';
            this.currentType = '';
        }
    }

HTML

<span data-type="" data-hour={hour.name} data-day={day.name}
    onmousedown={handleSubdivisionTouchStart}
    ontouchmove={handleSubdivisionTouchMove}
    onmouseup={handleSubdivisionTouchEnd} class="squareSubdivision">

APEX

public static String getData(String hour, String day, event target){

        List<Data__c> lstResult = [SELECT Id, Field__c, 
                                        FROM Data__c 
                                        WHERE Hour__c =: hour AND Day__c =: day];
        
        if (lstResult.size() != 0){
            return lstMat[0].Field__c;
        }else{
            return null;
        }
    }

Thanks in advance.

I suppose you anonymized some variable names (i.e. lstMat in apex method is never defined, so it should be lstResult and maybe in js this.result and this.field1 are the same, lastly the instance variables hour and day are used as object in HTML, see data-hour={hour.name}, while in handleSubdivisionTouchStart you overwrite them with strings), keep in mind that doing this while not being 100% consisent only makes harder to help you. If possible, please post the code as-is. You could hide the issue (or add a new one) by changing it. — RubenDG
– RubenDG, Commented Jan 22 at 10:13

RubenDG · Accepted Answer · 2025-01-22 10:23:53Z

Since you need the result of Apex method in handleSubdivisionTouchStart method, you should call it imperatively, therefore hour and day could be local variables.
Calling an Apex method results in an async operation, so I would add a spinner and show it as soon as handleSubdivisionTouchStart starts.
Finally to retrieve custom data-* attributes, you could leverage dataset read-only property, i.e. event.currentTarget.dataset.hour.
When setting textContent, instead of checking against null, you could use nullish coalescing operator (??).

JS

handleSubdivisionTouchStart(event) {
    this.showSpinner = true;
    const target = event.currentTarget;
    const hour = target.dataset.hour;
    const day = target.dataset.day;
    getData({ hour, day })
        .then((data) => {
            if (data) {
                this.field1 = data;
                if (!this.disabled) {
                    target.textContent = this.result ?? ''; // maybe this should be target.textContent = data ?? '';
                }
            } else {
                this.field1 = '';
                this.currentType = '';
            }
        })
        .catch((error) => {
            // handle the error
        })
        .finally(() => {
            this.showSpinner = false;
        });
    
}

Since target was not used by the Apex method, I removed it, and I added LIMIT 1 to the SOQL since you only used the first record.
The Apex method doesn't need cacheable=true if it's called imperatively. Apex

@AuraEnabled
public static String getData(String hour, String day) {

    List<Data__c> lstResult = [SELECT Field__c, 
                                FROM Data__c 
                                WHERE Hour__c = :hour AND Day__c = :day
                                LIMIT 1];

    return lstResult.isEmpty() ? null : lstResult[0].Field__c;
}

fred · Accepted Answer · 2025-01-21 15:24:19Z

0

Try using refreshApex. You will need to follow the last example on this page:

Example: Refresh the Cache for a Wired Function

Add import { refreshApex } from '@salesforce/apex'; at the top.

And then do refreshApex(this.result) when you access any variable populated in your wired method. (Amend the parameter if you need to)

answered Jan 21 at 15:24

fred

3,9013 gold badges19 silver badges33 bronze badges

I have tried, but it still does not update correctly. What do you mean by amend the parameter?

Rubén NC
– Rubén NC

2025-01-22 07:41:43 +00:00
Commented Jan 22 at 7:41

Add a comment |

Stack Exchange Network

Change event.CurrentTarget after calling apex method

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Change event.CurrentTarget after calling apex method

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions