Ajax Change class name of a link upon button submit

Question

I have a four menu tabs. in One tab is a submit form (default), the second tab contain list of entries, each entry has a button called change status. When i click "change status" I called windows.reload using ajax to update the page with out refresh but the tab will go back to the default one which is the first one. Now my problem is how can i update the menutab class to the current selected menu to become an active one. below is my ajax codes:

<input type="button" value="change status"> // a button to click to change status

<a class="active">tab1</a> // need to change classname when the button clicked
<a class="nonactive">tab2</a> // need to change classname when the button clicked

<script>
$(document).ready(function() { 
    $(".closeBTN").click(function() {

    var data = $(this).attr('id');
    //alert (data);
    $.ajax( {
        type: "POST",
        url: "../deals_status_update.php",
        data: { 'id': data }
    }).done(function(msg) {
        $("#notification").html(msg);           
        window.setTimeout(function(){
            location.reload()

            $('#itrade .active').removeClass().addClass('nonactive');
            $('#iopendeals .nonactive').removeClass().addClass('active');
        },100)          
    });
});
});        
</script>

Answer 1

try using location.hash, cuz as explained location.reload() will actually refresh the page, and i still don't get why you need to refresh the page to update data !

<input type="button" value="change status"> // a button to click to change status

<a class="active">tab1</a> // need to change classname when the button clicked
<a class="nonactive">tab2</a> // need to change classname when the button clicked

<script>
$(document).ready(function() { 
    $(".closeBTN").click(function() {    
        var data = $(this).attr('id');

        $.ajax( {
            type: "POST",
            url: "../deals_status_update.php",
            data: { 'id': data }
        }).done(function(msg) {
            $("#notification").html(msg);           
            window.setTimeout(function(){
                location.hash = 'iopendeals';
                location.reload();
            },100)          
        });
    });

    if(location.hash != '') {
        $('.active').removeClass().addClass('nonactive');
        $(location.hash + ' .nonactive').removeClass().addClass('active');
    }
});        
</script>

Answer 2

You're reloading the page, so any JavaScript that happened later will lose its state. DOM modifications are only good for the current page session. Once it is navigated away or reloaded, they lose progress.

Have you considered not reloading? Why are you reloading for anyway?

or,

Can you maybe do those changes client-side, and instead of reload, redirect to the same page with different GET parameters?

<li class="menuitem<?=$_GET['page'] == 'homepage' ? ' active' : ''?>">
    Homepage
</li>

Answer 3

location.reload() reloads the website, so you cant use jQuery methods after that.

maybe window.location.hash can help you.

Add a hash and parse this hash after the website reload to trigger your classes?