javascript - Thymeleaf page refresh followup - Now with AJAX -


as followup earlier question using thymeleaf , preventing page refresh:

http://forum.thymeleaf.org/preventing-page-refresh-thymeleaf-amp-spring-mvc-td4029155.html

basically had working spring mvc app uses thymeleaf save form data. when user saves data page refresh (since wanted leave them on page more edits) , wanted eliminate page refresh.

i have coded javascript use jquery ajax post data spring mvc controller. trick seemed to not use submit button, regular button , bind js function sending data server.

it seems work perfectly, want make sure understand happening. in particular i'm wondering if thymeleaf redundant. don't think because when load page thymeleaf still bound data bean. using debugger on server side in controller looks post request calls mapped method , passes in data model.

i appreciate comments on whether or not correct way accomplish this.

finally, how handle error, example repository fails persist data reason?

thanks much.

here important parts of form:

<form id="admindataform" action="#" th:action="@{/admin_ajax}" th:object="${adminformajax}" method="post">   <input type="button" value="save changes" id="post" onclick="senddata()" /> 

here javascript:

function senddata() {         $.ajax(         {             type: "post",             data: $("#admindataform").serialize(),             cache: false,             url: "/admin_ajax",             success: function(data)              {                 alert("your changes have been saved");             },             error: function()             {                 alert("error - data not saved");             }          }); } 

here controller:

@sessionattributes("adminformajax") @controller public class testcontroller  {     final static protected long index_ra = 2l;      @autowired     private admindatarepository rep;      @requestmapping(value="/admin_ajax", method=requestmethod.get)     public string adminformajax(model model)      {         admindata ad = rep.findbyid(index_ra);          // if there no configuration record, create 1 , assign primary key         if(ad == null)         {             ad = new admindata();             ad.setid(index_ra);         }          model.addattribute("adminformajax", ad);         return "adminformajax";     }      @requestmapping(value="/admin_ajax", method=requestmethod.post)     public @responsebody admindata adminsubmit(@modelattribute("adminformajax") admindata ad, model model)      {         rep.save(ad);         model.addattribute("adminformajax", ad);         return ad;     }  } 

so breakdown of answer.

  1. thymeleaf not redundant, still render html page prior sending client. ajax further processing on client side.
  2. you can use submit button well, need ensure form structured , have javascript listening submit button click e.g.

    $("#submitbutton").on('click', function (){//do stuff});

  3. you handle , exceptions/issues within ajax controller standard controller. need separate issue handling @ different levels. e.g. respository level issues should managed @ rep level, controller/pojo should @ controller level (or pojo if using 1 processing). should capturing exceptions through global medium (e.g. controlleradvice).

  4. any issues/errors pick should communicating via return call in adminsubmit, , managing relevant client response in ajax.

Comments

Popular posts from this blog

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

c# - Display ASPX Popup control in RowDeleteing Event (ASPX Gridview) -

Nuget pack csproj using nuspec -