Change style on a row in JQuery Datatables when editing displayed values

Question

I have a datatable from the JQuery plugin that displayes objects fetched from a database. At the end of each row there is an "edit" button that when clicked opens up a popup with fields that allows the user to change the object.

The code below is the "edit" button opening the popup.

<td>@Ajax.ActionLink("Edit",
                                 "controllerMethodReturningEditView",
                                 new
                                 {
                                     Id = @m.Id
                                 },
                                 new AjaxOptions
                                 {
                                     HttpMethod = "GET",
                                     UpdateTargetId = "popupBox",
                                     InsertionMode = InsertionMode.Replace,
                                     OnSuccess = "openPopup('myPopup')"
                                 })</td>

The controller method called when pressing the edit button just opens a view that is a partial displayed in a popupbox

return PartialView("editObjectView", objectModel);

and this "editObjectView" just contains a form with fields for taking input.

@using(Html.BeginForm(...
           <label>...</label><input ... />
           .... and so on

Then in this popup the user is allowed to edit the values of the displayed object. When the user presses a "save" button in the popup the new values will be sent to a controller method that saves the values (to the object) in the database. When the values are saved the controller method calls the controller method that loaded the first view (the view showing the datatable) and that method requests all objects from the database in order to display new objects or changes to objects.

Now here is my question: when the page is reloaded after an object has been edited, how do I change the style of the edited row? All I want is to set a red border around the recently edited row. I would prefer if I would not have to send the object through all the controller methods used to reload the page.

Thanks for the help, appreciate it!

Can you post the content returned by "controllerMethodReturningEditView"? — Chandu
– Chandu, Commented Jul 11, 2012 at 13:37
I have another question regarding datatables here: stackoverflow.com/questions/11447735/… if anyone would like to help me out there aswell. Really appreciate your help guys! — Marcus Åberg
– Marcus Åberg, Commented Jul 12, 2012 at 8:21
For your data that is being returned, is there a datetime record for the last modified? — anAgent
– anAgent, Commented Jul 12, 2012 at 12:05
Nope and it is not needed either. It is just supposed to be a temporary thing, navigate away from that page and go back and it will be forgoten — Marcus Åberg
– Marcus Åberg, Commented Jul 12, 2012 at 12:30
Since you are refreshing the page rather than doing an Ajax post and replacing the content, this is going to be challenging to know what has changed. If you add a hidden time-stamp with the last update time, you could then hook some JavaScript to highlight any row that has been updated in "X" seconds. If this is do-able, then I can assist with some code... — anAgent
– anAgent, Commented Jul 12, 2012 at 13:28

anAgent · Accepted Answer · 2012-07-11 14:36:40Z

1

Not knowing what's being returned to the page and not knowing the styling you want to update.

Let's say you want to alternate each rows css class. You could do something like below after the content is added to the page:

$("tr:nth-child(odd)", "#YOUR_TABLE_ID").addClass("odd-row");

Or, make sure that each rows HTML is formatted it an unique ID tag "..." and then do some jQuery do set the class after being added to the page.

If the request is an Ajax request, and you're returning something back using json - like:

var json { Id = Table.ID, status = true };

Then the OnSuccess event would do something like this:

function OnSaveSuccess(data) {
    if (data.status) {
        $("#" + data.Id).addClass("highlight-row");
    } else {
    console.warn("save was not successful!");
    }
}

edited Jul 11, 2012 at 14:36

answered Jul 11, 2012 at 13:44

anAgent

2,78027 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marcus Åberg Over a year ago

I think you missunderstand my question. I want to edit a row in the table -> update the object by sending the changes to the database -> reload the page and putting a red border on the row containing the object information that was just edited so the user can verify his/hers changes. Everything is working today except for the part where the row gets a red border around itself, and that's what I need help with

anAgent Over a year ago

Oh, thanks for clarifying. I'm not sure what you're returning, but I've updated the example as if you were returning json.

Marcus Åberg Over a year ago

I'm not returning a json object. See the site is constantly working with a database, and everytjme a view is loaded data is requested from backend (wcf) which gets the data from the database. See my question for an update and thank you for trying to help me :)

Collectives™ on Stack Overflow

Change style on a row in JQuery Datatables when editing displayed values

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related