Катерина Катерина - 1 year ago 89
Javascript Question

JavaScript does not change or add CSS class to element

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?enter image description here

After pressing the button:
enter image description here

when close pop-up row remains unselected
enter image description here

Answer Source

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…
    }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download