Grails, Delete-button on same form as Update in edit-view - ajax

Question

I'm trying to add a delete-button to my edit-form but have not found anything that works. Suggestions I've seen, is using AJAX, but I don't know how to make it.
I don't like to make another form below the existing one for "update" but it looks impossible to have the delete-button to the right of the update-button.
Any one having an idea...?
I tested this:
$( document ).ready( function() {
$('#delete_prod').on('click',function(event) {
alert('DELETE!!!');
var id=$(this).data('id');
var url="${createLink(controller: 'prodBuffer',action:'delete')}/"+id
$.ajax({
type: 'POST',
url: url,
success: function(data){
$('#results').html(data);
}
});
});
});
</script>
<span id="delete_prod" data-id="1">Delete<span>
But the alert will not be hit.

Answer 1

A button within existing form will act as submit button, you can look into <g:actionSubmit and submit it as a delete action that you then control in the contorller or use something like this - make something behave as a button then action it using ajax
<span id="deleteButton" data-id="${instance.id}">Delete<span>
<script>
$('#deleteButton').on('click',function() {
var id=$(this).attr('data-id');
var url="${createLink(controller: 'controller',action:'delete')}/"+id
$.ajax({
type: 'POST',
url: url,
success: function(data){
$('#results').html(data);
}
});
})
<script>

Answer 2

You could do the following.
Change your span to an <a> tag. It might be easier to handle the
different states it has, and easier to style if you use bootstrap or
similar frameworks.
Now to the code:
<form id="myForm">
<!-- your form fields here-->
<div>
<button type="submit">My update button</button> <!-- The normal buttons you´d use-->
Delete button <!-- your actual delete button -->
</div>
</form>
<div id="results"></div>
The html is quite simple and quite similar to what you might have. The difference being that I would prefer to reference my <a> via class instead of ID. Using <a> instead of <span> might make your code more manageable.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$('.delete-button').on('click', function(event){
event.preventDefault(); //1
var deleteTarget = $(this).prop('href'); //2
if(confirm("Are you sure?")){ //3
$.post( //4
deleteTarget,
function successhandler(responseData){
$('#results').html(responseData);
}
);
}
});
});
</script>
As for the javascript, the following applies:
Prevent the default action for your <a>
Obtain the href of the clicked link
Add a confirmation, just in case
Send your data and manage your response

Answer 3

You can use a button group (bootstrap) and a single javascript ajax call to handle both buttons. We're using the id of the button to distinguish which action to call.
Your form will be different with regard to the data present, I've just used a hidden id field as an example below.
<script type="text/javascript">
$( document ).ready( function() {
$( '.itemAction' ).click(function (event) {
if ( confirm( 'Are you sure?' )) {
$.ajax({
url: "/prodBuffer/" + this.id,
type: "POST",
data: $( '#myForm' ).serialize(),
success: function ( data ) {
$( '#resultdiv' ).html( 'Success' );
window.setTimeout( function(){ location = '/prodBuffer/index' }, 2000 )
},
error: function(j, status, eThrown) { console.log( 'Error ' + eThrown ) },
complete: function() { console.log( 'Complete' ) }
});
}
});
});
</script>
<div id="resultdiv"></div>
<g:form name="myForm">
<g:hiddenField name="id" value="1" />
<div class="btn-group" role="group">
<button type="button" name="myUpdate" id="myUpdate" value="Update" class="itemAction btn btn-primary">Update</button>
<button type="button" name="myDelete" id="myDelete" value="Delete" class="itemAction btn btn-danger">Delete</button>
</div>
</g:form>
Controller:
def myUpdate() {
myService.update( params )
render (['success'] as JSON )
}
def myDelete() {
myService.delete( params )
render (['success'] as JSON )
}

Answer 4

I think you do not need to use Ajax for deletion, you can make a Delete button and code on your Domain's show page and controller (for show) like below which also give you a confirm alert. this call the delete method. Have a look.
Show page Code (show.gsp)
<g:form>
<fieldset class="buttons">
<g:hiddenField name="id" value="${prodBufferInstance?.id}" />
<g:link class="edit" action="edit" id="${prodBufferInstance?.id}"><g:message code="default.button.edit.label" default="Edit" /></g:link>
<g:actionSubmit class="delete" action="delete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" />
</fieldset>
</g:form>
Controller Code (for show page)
def show(Long id) {
def prodBufferIns = ProdBuffer.get(id)
if (!prodBufferIns) {
flash.message = message(code: 'default.not.found.message', args: [message(code: 'prodBufferIns.label', default: 'CustMeterReadingTemp'), id])
redirect(action: "list")
return
}
[prodBufferInstance: prodBufferIns]
}
Controller Code (Delete method)
def delete(Long id) {
def prodBufferIns= ProdBuffer.get(id)
if (!prodBufferIns) {
flash.message = message(code: 'default.not.found.message', args: [message(code: 'prodBuffer.label', default: 'prodBuffer'), id])
redirect(action: "list")
return
}
try {
prodBufferIns.delete(flush: true)
flash.message = message(code: 'default.deleted.message', args: [message(code: 'prodBuffer.label', default: 'prodBuffer'), id])
redirect(action: "list")
}
catch (DataIntegrityViolationException e) {
flash.message = message(code: 'default.not.deleted.message', args: [message(code: 'prodBuffer.label', default: 'prodBuffer'), id])
redirect(action: "show", id: id)
}
}