Question

我收到了Feed列表。每个Feed都有唯一编号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

你在这里犯了几个错误：

为循环内的所有输入字段设置相同的ID（feedId）。
您没有将feedId传递给#dialog，就像删除选项一样。

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

尝试这种方式:(只是一个指导，没试过！）

，尝试设置正确的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>

您尚未发布打开#dialog的功能。但它应该是这样的。看看如何将feedId传递给你的模态。

＆＃13;

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

＆＃13;

如何将feedId传递给servlet：

＆＃13;

$('#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);
    }
  });
});

＆＃13;

由于格式问题，我只使用了代码段选项。对不起。
只是一个想法，试试看！

<强>更新这个LINK

如何使用jQuery传递带模态窗口的参数？

1 个答案: