Ajax Grails中的“删除”按钮与“编辑”视图中的“更新”按钮位于同一窗体上

我正在尝试向编辑表单中添加删除按钮，但未找到任何有效的按钮。我看到的建议是使用AJAX，但我不知道如何使用它

我不想在现有表单的下方创建另一个“更新”表单，但似乎不可能在“更新”按钮的右侧设置“删除”按钮。 有人有想法吗

我测试了这个：

            $( 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>

$（文档）.ready（函数（）{
$（'delete#u prod'）。在（'click'，函数（事件）{
警报（'DELETE！！！'）；
var id=$（this.data（'id'）；
var url=“${createLink（控制器：'prodBuffer'，操作：'delete'）}/”+id
$.ajax({
键入：“POST”，
url:url，
成功：功能（数据）{
$（'#results'）.html（数据）；
}
});
});
});
删除

---

但是警报不会被触发。

现有表单中的按钮将充当提交按钮，您可以查看

现有表单中的按钮将充当提交按钮，您可以查看
您可以使用按钮组（引导）和单个javascript ajax调用来处理这两个按钮。我们使用按钮的id来区分要调用的操作

您的表单将与当前的数据不同，我刚才使用了一个隐藏的id字段作为下面的示例

<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>

您可以使用一个按钮组（引导）和一个javascript ajax调用来处理这两个按钮。我们使用按钮的id来区分要调用的操作

您的表单将与当前的数据不同，我刚才使用了一个隐藏的id字段作为下面的示例

<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>

您可以执行以下操作


将跨度更改为


html非常简单，与您可能拥有的内容非常相似。区别在于我更喜欢通过类而不是ID引用我的
。使用
而不是
可能会使代码更易于管理

<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>


$（文档）.ready（函数（）{
$（'.delete button'）。在（'click'，函数（事件）{
event.preventDefault（）；//1
var deleteTarget=$（this.prop（'href'）；//2
如果（确认（“你确定吗？”）{//3
$.post（//4
删除目标，
函数successhandler（responseData）{
$（'#results'）.html（responseData）；
}
);
}
});
});

对于javascript，以下内容适用：

阻止您的

获取所单击链接的href
添加确认，以防万一
发送数据并管理响应
您可以执行以下操作


将跨度更改为


html非常简单，与您可能拥有的内容非常相似。区别在于我更喜欢通过类而不是ID引用我的
。使用
而不是
可能会使代码更易于管理

<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>


$（文档）.ready（函数（）{
$（'.delete button'）。在（'click'，函数（事件）{
event.preventDefault（）；//1
var deleteTarget=$（this.prop（'href'）；//2
如果（确认（“你确定吗？”）{//3
$.post（//4
删除目标，
函数successhandler（responseData）{
$（'#results'）.html（responseData）；
}
);
}
});
});

对于javascript，以下内容适用：

阻止您的

获取所单击链接的href
添加确认，以防万一
发送数据并管理响应
我认为您不需要使用Ajax进行删除，您可以在域的显示页面和控制器（用于显示）上创建一个删除按钮和代码，如下所示，这也会给您一个确认警报。这将调用delete方法。看一看



显示页面代码（Show.gsp）
控制器代码（删除方法）
我认为您不需要使用Ajax进行删除，您可以在域的显示页面和控制器（用于显示）上创建一个删除按钮和代码，如下所示，这也会给您一个确认警报。这将调用delete方法。看一看



显示页面代码（Show.gsp）
控制器代码（删除方法）
我测试了您的代码，然后对其进行了几次更改，但即使是警报也不会执行。我在问题中添加了代码。我也把普惠制代码移到了不同的地方，但什么也没发生。我测试了删除除警报调用之外的所有代码，但没有成功。这很奇怪，因为我已经有一些其他javascript在工作。脚本中有一个打字错误，现在已经修复了，可能是页面上有其他东西，删除id因此重命名为deleteButton。请注意，如果是迭代，则将
id=“deleteButton”
更改为
class=“deletButton”
并将js从
$（“#deleteButton”）
到
$（“.deleteButton”）。在..
上，您每页只能有一个id实例，更改为类将在html页面上的deleteButton的所有迭代中工作，并基于
$分配正确的值（此）
我的旧脚本中发生了一些变化，因此当我删除一个不再需要的脚本时，您的脚本开始响应，但我必须将类型从“post”更改为“delete”，否则我得到了“Method not allowed”。当我使用“Generate all”获取初始控制器和视图时，我的删除操作完成了“重定向”，但在
<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>

        <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>

    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]
}

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)
    }
}