GSP 中的 onclick 删除功能问题

Question

在 GSP 中，我编写了这样的代码来显示文件列表：

       <g:each in="${fileList}" var="file">
            <div>
                <a href="#" onclick="remove('${file.attachmentId}')"> 
                <span class="glyphicon glyphicon-remove"></span></a> 
                <a href="/forms/landing/attachment/${file.attachmentId}" >${file.name}</a> 
                </br>
            </div>
        </g:each>

我的 javaScript 代码是：

function remove(attachmentId) {
$(document).ready(function(){
        $('.glyphicon-remove').click ( function(e){
            e.preventDefault();
            $(this).parent().parent().remove();

            $.ajax({
                       url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
                        data: {
                                attachmentId: attachmentId
                        },
                        success: function(data){
                                alert("Success");
                        }

                   });

             });
        });

    }

我正在调用 onclick remove() 函数，将选定的 attachmentId 作为参数传递。第一次只能双击删除文件。

为什么第一次双击才删除文件？

提前感谢您的帮助。

注意：应用程序在 IE 中是运行。

Answer 1

因为这个标签

<div id="remove">

出现在 g:each 标签内，您正在同一页面中创建多个 ID。当调用函数 remove() 时，它会删除所有找到 "remove" 作为 id 的 div。使每个 id 唯一，这将解决问题

由于您正在使用 jQuery，请尝试使用此代码。这将消除唯一 ID 的使用。

<script>
        $(document).ready(function(){
            $('.glyphicon-remove').click ( function(e){
                e.preventDefault();
                $(this).parent().parent().remove();
            });
        });
    </script>

Answer 2

具有重复的 ID 值会导致任何 DOM（文档对象模型）操作出现问题。您的问题是如何通过浏览器界面从服务器上正确删除文件。 Groovy 可以利用 Apache Ant 进行文件操作，并且通过使用 AntBuilder class 可以简化与文件操作相关的各种任务。

请阅读 this entry in the Groovy docs 关于使用 AntBuilder 的内容。并查看 Grails 文档中的服务层以了解如何使用服务。面向服务的体系结构将帮助您保持控制器和域 class 非常传统，并允许您创建可由多个控制器调用以实现更具体功能的服务。如果您遵循 Grails 的约定，您的控制器将已经具有 delete 函数。不要在该控制器中添加 deleteFile 方法，而是调用定义 deleteFile.

的服务

您要删除的代码如下所示：

Create a service for file manipulation（例如 FileService.groovy 在您项目的服务部分下）。您可以在此处放置 classes 和函数来删除、添加、压缩文本文件。通过调用 AntBuilder 实用程序，利用 groovy 对 ApacheAnt 的内置支持。

//This is to instantiate an instance of the AntBuilder class.
import groovy.util.AntBuilder

class FileRemover {
    def ant = new AntBuilder() 


    //Define the file, which you will want to pass a value from the page. 
    //You may need to tweak the file path to match your project structure. 

    def file = new File(ant.project.baseDir,
                    "/forms/landing/attachment/${file.attachmentId}")
    def fileName = file.name.toString()
    assert file.exists()

    //Function to remove file
    def fileRemover = file.delete()

    //Provide messaging to let the user know the file has been removed
    println 'File ' + {fileName} + ' has been removed.'
}

此代码需要进行一些个性化更改才能在您的项目中运行，但通过阅读答案中链接的文档并遵循代码的基本思想，您应该能够创建一个删除文件的操作，并且可以从 GSP 页面调用。

更新：

要查看用 Grails 编写的文件管理器的简单示例，请阅读 Thomas Lin 的 this blog post。

Answer 3

普惠制：

<g:each in="${fileList}" var="file">
            <div>
                <a href="#" onclick="remove('${file.attachmentId}', this)">
                <span class="glyphicon glyphicon-remove"></span></a> 
                <a href="/forms/landing/attachment/${file.attachmentId}" >${file.name}</a> 
                </br>
            </div>
        </g:each>

在JavaScript中：

function remove(attachmentId, elem) {
    $(elem).parent().remove();
    $.ajax({
       url: "${g.createLink(controller: "landing", action: "deleteSelectedFile")}",
       data: {attachmentId: attachmentId},
        success: function(data){
            alert("Success");
        }

   });
}

这样就可以完美解决问题

GSP 中的 onclick 删除功能问题

Onclick remove function issue in GSP

javascript

jquery

grails

gsp