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.

[saurabh_vakil]

Define the afterClose event for the Dialog control and in this event handler, check if the user has pressed the Cancel button. If yes, then clear the user name in the dialog so that it updates the correct value after selecting another table entry and clicking connect.

[trmt]

Hi, thanks for the reply.

So I should write a new method, afterClose in the constructor, after endButton? what should be the best way to select and clear the username from the Dialog, or rather from the Label?

[saurabh_vakil]

Yes, you can declare the afterClose event as one of the properties of the Dialog control. I believe that you would have used data binding between the control(s) used to display the user detail(s) and a model in your code - just set the corresponding model properties to blank ("") in the event handler to clear the previously displayed values upon closing the dialog.

[trmt]

I don't know if I did the right thing, but it is still not working.

I'm resetting the object which provides the name in the afterClose event to an empty object, (in theory this will also reference the model?!) I'm logging it in the same event and it's {}, next time I open the dialog, the object gets recreated with the correct values of the item clicked (again logged the correct values), but the text in the Dialog stays the same as for the first item clicked, not updating, it's driving me nuts.