刷新一个ajax页面的标签

Question

I'm having a little problem with refreshing a tab and not a whole page in Ajax. This tab concerns the removal of credit cards. Once I select the credit card I want to delete and validate I use "window.location.reload ();" which allows refreshing the whole page but suddenly it sends me back to "My profile" (see photo):

Before refresh:

After refresh:

While I want it refreshes only tab "means of payment" here is my code:

handleCardDelete = () => {
    var numCard = $('input[name=rbCard]:checked').val();
    console.log(this.state.token);
     $.ajax({
        url: 'http://API.....,

        dataType: 'json',

        type: 'DELETE',

        headers: {
            'Authorization' : 'Bearer ' + this.state.token
        },

        complete: function(){
            alert("carte supprimée avec succès");
            window.location.reload();
        },

    });

};

HTML

<Button animated='fade' onClick={this.handleAddCardSubmit}>
    <Button.Content visible>
        Ajouter une carte
    </Button.Content>
    <Button.Content hidden>
        <Icon name='add' />
    </Button.Content>
</Button>

<Button animated='fade' onClick={this.handleCardDelete}>
    <Button.Content visible>
        Supprimer la carte
    </Button.Content>
    <Button.Content hidden>
        <Icon name='delete' />
    </Button.Content>
</Button>

I hope I have been clear, I continue my research and I wish you a good day!

Answer 1

There are two easy options to handle this. The issue you are seeing is that the page doesn't remember which tab was open when it is refreshed. You can either save this in storage or add it to the url query string, then on page load, check if a tab was saved and start there. I will include documentation for using storage as this is my preferred way.

Please note however, there are some drawbacks to this method. The tab changes will not register in the browser history, so clicking back will take you to the previous page rather than previous tab, as well as not being supported on some very early versions of browsers.

You don't have an "openTab" method in your posted code, so I will use openTab(tab) as a placeholder for that function in your code.

Local Storage

There are two options here, both used the same way, local storage or session storage. I'm guessing session storage would be the best option for you.

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

// this will be run on page load
$(function() {
    // check if a tab was saved
    if (sessionStorage.tab) {
        // here is where you will open the tab previously saved
        openTab(sessionStorage.tab);
    }
    // if no tab saved, don't do anything, load page like normal
})

// this will be in your openTab() function
openTab(tab) {
    // this will be the new code
    // this is just saving the opened tab to local storage
    //
    // tab is just what ever identifying piece of data you need
    // to know which tab to open
    sessionStorage.tab = tab;

    // this is what you were normally doing
    .....
}