将数据传递给 jQuery modal 并打开它答案

【问题标题】：Pass data to jQuery modal and open it then将数据传递给 jQuery modal 并打开它
【发布时间】：2021-03-01 13:34:48
【问题描述】：

我有一个项目列表，每个项目都包含添加新评论的选项。所以我有这个按钮，我可以在其中显示模式以输入特定项目的新评论。每个项目的唯一标识符是它的commissionNumber：

    @foreach (var item in listofentities) 
    {
    
        <div class="pull-right">
            <a href="javascript:void(0);" id="commentDialogOpener_@item.CommissionNumber" onclick="OpenCommentModal(e)" data-id="@item.CommissionNumber"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
        </div>
    }

    
    <div id="newCommentDialog" title="New Comment">
        <form id="commentForm" asp-action="AddComment">
           <input type="hidden" id="commissionNumber" name="commissionNumber"/>
           <textarea id="comment" name="comment" rows="4" style="width: 100%; height: 95%;"></textarea>
           <label id="EmptyTextAreaWarningLabel" hidden style="color: red;">Please enter a comment</label>
        </form>
    </div>

要打开 DIV 以输入新评论，我使用 onclick- 方法以及为每个项目提供的链接。我尝试将链接的data-id 字段移交给我的新评论模式中的隐藏变量。这是JS部分：

$(document).ready(function () {           

        $(function () {
            $("#newCommentDialog").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    "OK": function () {
                        if ($("#comment").val() == null || $("#comment").val().trim() == '') {
                            // textarea is empty
                            $("#EmptyTextAreaWarningLabel").show();
                        }
                        else {
                            document.getElementById("commentForm").submit();
                        }


                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });

        });
    });

    function OpenCommentModal(e)
    {
        alert(e.Value);
        $('#commissionNumber').val() = ??
        $("#newCommentDialog").dialog("open");
    }

这就是我卡住的地方。我不知道如何将事件数据传递给 OpenCommentModal 函数。我需要读取点击来自的元素的 ID，以将 @item.commissonNumber 后面的值传递给模式中的隐藏变量。我不知何故迷失在这里，因为我不知道在哪里完成。 Intellisense 没有为我提供关于 JS 事件元素的任何帮助...

我得到的唯一错误消息是

Uncaught ReferenceError: e is not defined

指的是我用onclick-routine 传递的参数e

【问题讨论】：

试试OpenCommentModal(this)，注意<a>元素是没有值的，你可以通过获取属性值或者数据值来获取它的关联数据，无论是原生还是使用jQuery
这消除了我收到的错误，我现在可以使用每个项目的按钮打开模式。现在将尝试转发数据...

标签： javascript jquery asp.net-core .net-core jquery-events

【解决方案1】：

您可以将 id 传递给您的点击函数：

<a href="javascript:void(0);" id="commentDialogOpener_@item.CommissionNumber" onclick="OpenCommentModal(this.id)" data-id="@item.CommissionNumber"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>

在您的点击功能中，您可以使用您的 id 并将其存储在名为“id”的数据属性中。

 function OpenCommentModal(id)
 {
     $("#newCommentDialog").data("id", id).dialog("open");
 }

在您的对话框代码中，您现在可以像这样读出它：

 $('#newCommentDialog').data("id");

【讨论】：