Update Row with Spring MVC

PIGAYE

Hi Allan,

I'm using Spring MVC as server-side software.

I can easily display list of records with datatables.

But I don't know how to update or delete a record with Editor.

I want do something like :

              editor = new $.fn.dataTable.Editor( {
                    ajax: {
                        create: {
                            type: 'POST',
                            url:  'personnephysique/create'
                        },
                        edit: {
                            type: 'PUT',
                            url:  'personnephysique/editRow?id=_id_'
                        }
                        ,
                        remove: {
                            type: 'DELETE',
                            url:  'personnephysique/removeRow?id=_id_'
                        }
                    },
                    table: "#personne_physique_datatable",
                    idSrc:  'id',
                   (...)

And java server-side :

    /**/
    @RequestMapping(value = serviceId + "/editRow", method = RequestMethod.PUT)
    public @ResponseBody PersonnePhysiqueEntite getPersonnePhysiqueData() {       
        //Process update operation
    }
    /**/

---

Do you have some clue for me please?

allan

I'm sorry - I haven't used Spring MVC at all myself, so that isn't something I can offer any help with.

All I can really say is that Editor's client / server communication is fully documented and if you have any questions about that documentation I'm happy to answer them.

Allan

rduncecb

As soon as you get onto the Spring MVC side of the system it's entirely up to you and has nothing else to do with Editor (except with how it will response to requests to full fill the serverside communication). The important thing is the JSON interface between the client and server side. The JSON structures are populated into your java objects and from there,...there are so many ways you could implement the database side such as Spring Data, JPA, standard JDBC, EJB, the list goes on,... so it's up to you have to take the objects and process them and produce responses in whatever manner your system requires.

My advice would be to look at your JSON communication / request and responses, create code using Editor to work with it, once you're on the service side create whatever code you need to read requests, produce responses and read/persist your objects to whatever data store your application needs. Design your requests and responses in a way that can work with the Editor client/server protocol linked in a previous post.

A system I'm working on does exactly that, using Spring and JDBC we handle our objects via a service layer to our DAO layer. We use Spring to implement a JSON / REST interface. We then use DataTables/Editor to create the interface, the interface doesn't care about anything other than producing and consuming the correct REST/JSON protocol. The protocol isn't tied to DataTables/Editor but using the event model of DT/Editor we can make it work.

How you implement your server side code is so open I doubt there are many suitable examples. I am not aware of a server side Editor system that is a direct replacement for the PHP etc code Editor comes with. Back when we evaluated DT/Editor for use in our client application my search for a fully and well implemented serverside DT/Editor java implementation did not produce any results.

PIGAYE

Hi Kevin, Allan, rduncecb,
Thank you for your help.

After two days spent searching, I finally solved the problem I had to integrate DT Editor with Spring.

My goal was to perform CRUD operations using DT Editor in place of HTML forms that take time to complete.
I use Spring MVC with a REST controller, Spring Data JPA and Spring Security.

For example, I wanted to use Editor's Edit button to save the following Json object:

{ "Civility": { "code": "Mrs."}, "first names": "SAMBOU", "name": "Margaritta", "BirthDate": "1986-12-31", "occupation": "Programmer" , "email", "am @ email"}

Implementing Editor:

...
editor = new $ .fn.dataTable.Editor ({
Url: urlAjax,
Ajax: {
Create: {
Type: 'POST',
Url: 'personphysical / create'
}
Edit: {
Type: 'PUT',
ContentType: 'application / json',
Url: 'personphysics / edit? Id = _id_',
Data: function (d) {
Var newdata;
$ .each (d.data, function (key, value) {
Newdata = JSON.stringify (value) ;;
});
Return newdata;
}
Success: function (response) {
. $ ( '# Post') html (response.responseText);
}
Error: function (jqXHR, exception) {
. $ ( '# Err') html (response.responseText);
}
}
Remove: {
Type: 'DELETE',
Url: 'personphysical / removeRow? Id = _id_'
}
}

At each attempt to save I got this error: PUT: 405 Method Not Allowed (405)

Even if the url does not exist on the server side, it always displays error code 405.
Indeed if I put url: 'an-url that-does-not-exist / abcd? Id = id', I was expecting a 404 error, but it was still 405.

This is where I started to see Spring Security and I realized that by default CSRF protection is enabled.
This causes Spring Security to block PUT and POST requests from DT Editor (in fact I had already fixed this problem with my HTML forms).

The solution is to disable the CSRF in the Spring Security configuration:

<Http>
<! - ... ->
<Csrf disabled = "true" />
</ Http>

But since this poses a security problem, I think I would have to change the code of datatables.editor.js to include the following change:

<Form action = "__ the_url" method = "post || put">
<Input type = "submit" ... />
<Input type = "hidden" name = "$ {_ csrf.parameterName}" value = "$ {_ csrf.token}" />
</ Form>

Thank you for telling me what you think.

rduncecb

Glad you got it fixed up.
In regards to the CSRF token, it had completely slipped my mind! I handled the CSRF token issue by adding the token header to the default ajax settings, that way all ajax calls
(including those made by DT/Editor) send the header with zero modifications to DT/Editor.

$.ajaxSetup({
    headers: {"X-XSRF-TOKEN": getCookie('XSRF-TOKEN')},
});
function getCookie(key) {
    var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
    return keyValue ? keyValue[2] : null;
}

PIGAYE

Thank you very much.

You are great !