单击表格行并编辑后如何打开对话框答案

【问题标题】：how to open a dialog box after clicking a table row and edit单击表格行并编辑后如何打开对话框
【发布时间】：2014-08-01 04:19:00
【问题描述】：

我想实现一个对话框，只要我单击表格行，它就会打开。基本上想通过表格行来编辑数据库。表内容存储在数据库中并从那里获取。如果我要编辑该行，那么数据库也应该自动更新。当我单击该行时，对话框将从行中获取一些特定的单元格，我将修改它或删除该行，结果应该立即在表中可见。我想通过jquery，ajax来做到这一点。打开对话框后，ajax 应该调用一个servlet 并修改数据库。也请给代码。

<fieldset id ="allTweets">

                    <table cellspacing="20" class ="tweetTable"  >
                    <caption>Tweets</caption>
            <%
                while(rs.next()){
            %>
                    <tr id="ForChangingTweet">
                        <td><%=rs.getString(1)%></td>
                        <td><%=rs.getString(2)%></td>
                        <td><%=rs.getString(3)%></td>
                    </tr>

            <%
                }
            %>
                </table>
                </fieldset>
    Here is my jquery
    $('#ForChangingTweet').click(function ()
                    {
                        $("#dialog").dialog({
                            autoOpen: true,
                            modal: true,
                            width: 600,
                            height: 300,
                                            resizable: false,
                            buttons: {
                                "Yeah!": function() {
                                    $(this).dialog("close");
                                },
                                "Sure, Why Not": function() {
                                    $(this).dialog("close");
                                }
                                            }
                        });

                        $.ajax({

                            type: "post",
                            url: "ChangeTweets", 
                            data: {
                                notifyidd: $(this).attr("id")


                            },
                            error : function(){ 
                                alert('Error'); 
                            },
                            success: function(msg){      

                                    alert('Success'); 

                            }

                        });
                    });

我还添加了一些js文件

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

每行的最后两个是我的目标

【问题讨论】：

请同时提供代码。抱歉，内容太宽泛了。
到目前为止您尝试过什么来执行数据库更改？并使用 Servlet 而不是 Scriptlet。另见how to avoid java code in jsp 和Jquery AJAX

标签： jquery ajax jsp servlets

【解决方案1】：

首先你应该改变

<tr id="ForChangingTweet">

到

<tr class="ForChangingTweet">

并使用 $('.ForChangingTweet') 来获取 tr。因为 $('#ForChangingTweet') 在 dom 中只能得到一个 id。

【讨论】：

【解决方案2】：

要使用 jquery 对话框将数据发送到 servlet，您可以使用 ajax 尝试类似的操作，

var $dialog = $('#ForChangingTweet'),
    width = 500, 
    height = 350;

$dialog.dialog({
    autoOpen: false,
    resizable: false,
    width: width,
    height: height      
});

如上设置对话框属性

// handles submit
    $dialog.on('submit', 'form', function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url:  "url here",
            data: $(this).serialize(),
            success: function(res) {
                $dialog.dialog('close');
            }
        });
    });

使用您的 servlet 获取数据并将其插入数据库。你可以在这里找到一个密切相关的问题，

how to change data at DB from jquery-ui dialog?

希望这会有所帮助！！

【讨论】：