Dialog popup always retains data from the first item clicked and does not update

[trmt]

Hi forum!

In a table with different rows each representing a person with name, age etc. there is a button 'CONNECT' on each of these rows which will allow one user to connect with others.

Now, when I press CONNECT on one row, I would like to bring up a dialog popup, with the name of the user clicked asking for a confirmation of connection. I've managed to do this, but the issue is, if I'm pressing Cancel on the dialog and press CONNECT on another row, the data and the name remains always of the first user clicked - until refresh the page or move to another and come back again:

onButtonPress: function(oEvent) {
    const oItem = oEvent.getSource()
    const oContext = oItem.getBindingContext("myModel")
    const sPath = oContext.getPath()

    const person = oContext.getModel().getProperty(sPath)
    
    // outside of the Dialog logic the data is always correct
    // gets the data of item clicked everytime
    console.log(person.name) 

    if (!this.oRejectDialog) {
        this.oRejectDialog = new Dialog({
            title: "Please Confirm",
            type: DialogType.Message,
            content: [
                new Label({
                    // inside of the Dialog logic the data is right only once
                    // that's when the the Dialog opens for the first time after a refresh
                    text: `Are you sure you want to connect with ${person.name}`,
                    labelFor: "connectNote"
                }),
                new TextArea("connectNote", {
                    width: "100%",
                    placeholder: "Add note (optional)"
                })
            ],
            beginButton: new Button({
                type: ButtonType.Emphasized,
                text: "Connect",
                press: function() {
                    this.oRejectDialog.close();
                }.bind(this)
            }),
            endButton: new Button({
                text: "Cancel",
                press: function() {
                    this.oRejectDialog.close()
                }.bind(this)
            })
        });
    }

    this.oRejectDialog.open()
}

Can somebody please explain why this is happening and how to solve this?

Many thanks

[junwu · Accepted solution]

quick dirty way is to destroy the dialog after close

or you use binding to get data from current row

[trmt · Accepted solution]

The data from current row is correctly received when onButtonPress

onButtonPress: function(oEvent) {
    const oItem = oEvent.getSource()
    const oContext = oItem.getBindingContext("myModel")
    const sPath = oContext.getPath()

    const person = oContext.getModel().getProperty(sPath)
    
    // outside of the Dialog logic the data is always correct
    // gets the data of item clicked everytime
    console.log(person.name) 

    if (!this.oRejectDialog) {
        this.oRejectDialog = new Dialog({
            title: "Please Confirm",
            type: DialogType.Message,
            content: [
                new Label({
                    // inside of the Dialog logic the data is right only once
                    // that's when the the Dialog opens for the first time after a refresh
                    text: `Are you sure you want to connect with ${person.name}`,
                    labelFor: "connectNote"
                }),
                new TextArea("connectNote", {
                    width: "100%",
                    placeholder: "Add note (optional)"
                })
            ],
            beginButton: new Button({
                type: ButtonType.Emphasized,
                text: "Connect",
                press: function() {
                    this.oRejectDialog.close();
                }.bind(this)
            }),
            endButton: new Button({
                text: "Cancel",
                press: function() {
                    this.oRejectDialog.close()
                }.bind(this)
            })
        });
    }

    this.oRejectDialog.open()
}

The problem as you can see above is inside the Dialog.

quick dirty way is to destroy the dialog after close

When you say this you mean using some Method like destroyContent? if yes, this should go as new method in the constructor or separate?

Thanks

[junwu · Accepted solution]

endButton: new Button({
                text: "Cancel",
                press: function() {
                    this.oRejectDialog.close()
this.oRejectDialog.destroy();
this.oRejectDialog=null;
                }.bind(this)
            })

[junwu · Accepted solution]

for second solution, I mean using binding in your dialog, you are just using binding thing in your parent event handler.

[trmt · Accepted solution]

Thank you, I've managed to do it the quick and dirty way and it's working.