A working example if needed : <div id="sidebarRouteEdit" style="display: none;background-color: rgba(255, 255, 255, 0.95)" class="leaflet-control"> <t:zone t:id="routeEditZone"> <h1>Route Edit ${routeEditChangedIndicator}</h1> <a id="sidebarRouteCreate" style="cursor: pointer;${ts2ControlsVisibility}">Create</a> <a id="sidebarRouteUpdate" style="cursor: pointer;${routeControlsVisibility}">Update</a> <a id="sidebarRouteDelete" style="cursor: pointer;${routeControlsVisibility}">Delete</a>
<p/> <t:form t:id="routeEditForm" class="form-horizontal well" async="true"> Route Id: ${routeId}<br/> Selected ts2Id: ${ts2Id}<br/> Route length: ${routeLengthInKmFormatted} km <p/> <div class="form-group"> <t:submit event="SubmitUpdate" value="Update" data-id="sidebarRouteEditUpdate" style="display: none;margin-left:15px"/> <t:submit event="SubmitSave" value="Save" disabled="${saveDisabled}" data-id="sidebarRouteEditSubmit" style="margin-left:15px"/> <div id="sidebarRouteEditClose" class="btn btn-default">Close</div> </div> <t:grid data-id="compactGrid" source="routeElements" row="freshRouteelement" model="model" renderTableIfEmpty="true" rowsPerPage="9999"> <p:udHeader><i class="fa fa-chevron-circle-down"/> <i class="fa fa-chevron-circle-up"/></p:udHeader> <p:reverseDirectionHeader><i class="fa fa-exchange"/></p:reverseDirectionHeader> <p:removeHeader><span class="fa fa-remove" style="color: #cccccc;padding: 2px"/></p:removeHeader> <p:reverseDirectionCell> <t:checkbox onchange="$('[data-id=\'sidebarRouteEditUpdate\']').click()" value="freshRouteelement.reverseDirection"/> </p:reverseDirectionCell> <p:udCell> <t:eventlink event="upDown" context="[freshRouteelement.sequence, 1]" async="true" style="padding: 2px;${lastVisibility}" class="fa fa-chevron-circle-down"/> <t:eventlink event="upDown" context="[freshRouteelement.sequence, -1]" async="true" style="padding: 2px;${firstVisibility}" class="fa fa-chevron-circle-up"/> </p:udCell> <p:removeCell> <t:eventlink event="removeRouteElement" context="[freshRouteelement.trackSegment2Id]" async="true" style="padding: 2px;color:#333" class="fa fa-remove"/> </p:removeCell> </t:grid> </t:form> </t:zone> <h4>Ctrl + Click to Add</h4> <h4>Ctrl + Shift + Click to Remove</h4> </div> void onSubmitUpdate() { isRouteChanged = true; routeChangedAjaxResponse(); } void onSubmitSave() { routeService.saveRoute(routeId, routeElements); isRouteChanged = false; routeChangedAjaxResponse(); } private void routeChangedAjaxResponse() { if (request.isXHR()) { final JSONArray jsonRouteElements = new JSONArray(); for (final FreshRouteelement freshRouteelement : this.routeElements) { JSONArray latLngs = new JSONArray(); for (Coordinate coordinate : freshRouteelement.getTracksegment2ByTrackSegment2Id().getLineString().getCoordinates()) { latLngs.put(new LatLng(coordinate.y, coordinate.x).getJsonObject()); } jsonRouteElements.put(new JSONObject( "ts2Id", freshRouteelement.getTrackSegment2Id(), "rev", freshRouteelement.getReverseDirection(), "latLngs", latLngs)); } ajaxResponseRenderer .addRender(routeEditZone) .addCallback(new JavaScriptCallback() { @Override public void run(JavaScriptSupport javascriptSupport) { javascriptSupport.require("map/map-superadmin").invoke("updateRouteHelperLine") .with(new JSONObject("routeElements", jsonRouteElements)); } }); setRouteChangedFlagAjaxResponse(isRouteChanged); } }