如何使用jQuery通过模态窗口传递参数？

Question

我收到提要列表。每个提要都有唯一编号 feed.id。

<c:forEach items="${feedList}" var="feed">
    <td><input readonly="readonly" id="feedId"
        value="<c:out value="${feed.id}" />" /></td>
    <td><c:out value="${feed.name}" /></td>
    <td><a
        href="FeedController?action=delete&id=<c:out value="${feed.id}"/>">Delete</a></td>
    <td><a
        href="FeedItemController?action=feedItemListAsc&id=<c:out value="${feed.id}"/>">View</a>
    </td>
    <td><a href="#dialog" name="modal">Edit</a></td>
</c:forEach>

按编辑打开带有输入名称的模式窗口：

    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag



        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({
            'width' : maskWidth,
            'height' : maskHeight
        });

        //transition effect        
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.8);

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top', winH / 2 - $(id).height() / 2);
        $(id).css('left', winW / 2 - $(id).width() / 2);

        //transition effect
        $(id).fadeIn(2000);


    });

<div id="boxes">
            <div id="dialog" class="window">
                <table class="userInput" border="1">
                    <tr>
                        <td colspan="2"><input type="text" id="feedName" />
                        </td>
                    </tr>

                    <tr>
                        <td><input type="submit" id="renameFeed" value="Submit"></td>
                        <td>
                             <a href="#" class="close">Close it</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="mask"></div>
</div>

最后使用 ajax 从模态窗口中获取名称，并从 forEach 块中获取 id 参数：

$('#renameFeed').click(function() {
            var name = $('#feedName').val();
            var id =  $('#feedId').val();
            var action = 'edit';
            var data = "feedName=" + name + "&id=" + id + "&action=" + action;
            $.ajax({
                type : "Get",
                url : "FeedController",
                data : data,
                success : function(result) {
                    if (typeof (result) != 'undefined') {
                }
                },
                error : function(error) {
                    console.log("error" + error);
                }
            });
        });

之后，我想使用 servlet 和我的 html 页面更改数据库中的名称。 我需要在按下编辑按钮时为每个获取 feed.id，然后在按下 <input type="submit" id="renameFeed" value="Submit"> 时将值发送到 servlet。 可以轻松获取 feed.name 但传递 feed.id 有问题 也许有人知道使用模态窗口和 jQuery ajax 重命名的更好解决方案？

Answer 1

你在这里犯了几个错误：

1. 为循环内的所有输入字段设置相同的 ID (feedId)。
2. 您没有像删除选项那样将 feedId 传递到#dialog。

因此，这些就是您获得相同 feedId 值的原因。 （我认为您正在努力将 feedId 传递给对话框？？）

试试这个方法：（只是一个指导，没试过！）

1. 在您的 JSP 中，尝试设置正确的 id：

   <c:forEach items="${feedList}" var="feed"  varStatus="theCount">
   <td><input readonly="readonly" id="feedId${theCount.index}"
       value="<c:out value="${feed.id}" />" /></td>
   <td><c:out value="${feed.name}" /></td>
   <td><a
       href="FeedController?action=delete&id=<c:out value="${feed.id}"/>">Delete</a></td>
   <td><a
       href="FeedItemController?action=feedItemListAsc&id=<c:out value="${feed.id}"/>">View</a>
   </td>
   <!-- <td><a href="#dialog" name="modal">Edit</a></td> -->
   <td><a href="#dialog" onclick='openEditDialog(<c:out value="${feed.id}"/>)' name="modal">Edit</a></td>
   

2. 您尚未发布打开#dialog 的函数。但它应该是这样的。看看如何将 feedId 传递给您的模式。

function openEditDialog(id) {
  $("#dialog").data("feedId", id).dialog({
    autoOpen: true,
    modal: true,
    buttons: {
      "Edit": function() {
        alert($(this).data('feedId'));
      }
    }
  });
}

1. 如何将 feedId 传递给 servlet：

$('#renameFeed').click(function() {
  var name = $('#feedName').val();
  var id = $('#feedId').val();
  var action = 'edit';
  var data = "feedName=" + name + "&feedId=" + id + "&action=" + action;

  $.ajax({
    type: "Get",
    url: "FeedController",
    data: data,
    success: function(result) {
      if (typeof(result) != 'undefined') {
        console.log("result:" + result);
      }
    },
    error: function(error) {
      console.log("error:" + error);
    }
  });
});

由于格式问题，我只使用了 sn-ps 选项。对此感到抱歉。
只是一个想法，试试看！

更新： 很好的例子就是这个LINK