JavaScript does not change or add CSS class to element

Question

I am using C# ASP MVC, JavaScript and jQuery for my web application. I currently have a grid where you can click a row to select the item. Once you click the item, there is a css class named .highlight that makes sure the item is selected.

When I select the item and click on a button, the grid refreshes, that is good as well. But now I am wondering how I can make it re-select the same item before it refreshes the page?

Here is what I've tried:

 var $this = $selectedRow;
    if ($this.hasClass("row-simple")){
       // $(".highlight").removeClass("highlight");
        $this.addClass("highlight");
    }

After we click the button it will check if there is a row selected and do this Ajax request. You can see at the end of the function that I am actually trying to select the selected item again.

function StartToTravel() {

    var $selectedRow = $(".highlight");
    if ($selectedRow.length == 1) {

        var id = $selectedRow.children(".td-dc")[0].innerText.trim();
        if (id) {
        $.ajax({
            type: 'post',
            url: appPath + '/service/StartTrip',
            data: {
               id: id
            },
            success: function (response) {
                if (response.success) {
                    RefreshGrid();

                }
                $("#dialog .modal-body").html(response.message);
                $("#dialog #dialog-title").html(response.title);
                $("#dialog").modal("show");




            },
            error: function (response) {
                $("#dialog .modal-body").html(msgErrorDuringRequest);
                $("#dialog #dialog-title").html(errorTitle);
                $("#dialog").modal("show");

            }
            });

        var $this = $selectedRow;
        if ($this.hasClass("row-simple") || $this.hasClass("highlight")) {
           // $(".highlight").removeClass("highlight");
            $this.addClass("highlight");
        }

        }
    }
}

The function for refreshing:

function RefreshGrid() {
    var numberPlate = $("#NumberPlate").val();
    var url = '/Service/Grid?numberPlate='+numberPlate;
    $("#Grid").load(url);
}

How can I make sure to select the previous selected item?

After pressing the button:

when close pop-up row remains unselected

you are replacing grid content with new html data. that will probably wont work. it would be easier if you just move the if statement to top, save element index or `id` and then add the class after grid and ajax is complete — mwebber, May 21 '17 at 21:22
create a demo for that .. and @mwebber is totally right *save element index* or find a specific way for this selection something you can reach it after refresh — Mohamed-Yousef, May 21 '17 at 21:34

score 1 · Accepted Answer · answered Jul 27 '17 at 14:51

As mwebber already explained in the comments, the loaded grid replaces the previous one completely, so everything you changed about the original one will not be there once the grid is replaced. As such, you need to remember which row you want to affect, and perform that modification after the grid has been refreshed.

Since you refresh the grid using jQuery.load, you can simply use the complete callback to have a way to act after it is done:

function RefreshGrid() {
    // …
    $("#Grid").load(url, null, reselectSelectedRow);
}

So this calls reselectSelectedRow after it’s done. In that callback function, you need to have your selection logic:

function reselectSelectedRow() {
    // get the selected row using the row index
    // you might need to adjust this depending on your HTML
    var selectedRow = $('#Grid tr').get(_selectedRowIndex);

    if (selectedRow.hasClass("row-simple") || selectedRow.hasClass("highlight")) {
        selectedRow.addClass("highlight");
    }
}

Now all that’s left is making sure that _selectedRowIndex is declared and set properly whenever you actually select a row. As explained in this question, you can query the index of an element in its parent, so we use that.

// declare the variable outside of the function so it exists on an outer scope
var _selectedRowIndex;

function StartToTravel() {
    var $selectedRow = $(".highlight");
    if ($selectedRow.length == 1) {
        // store the index of the selected row
        _selectedRowIndex = $selectedRow.index();

        // the other AJAX stuff…
    }
}

JavaScript does not change or add CSS class to element

1 Answers1