如何单击表行后，打开一个对话框，并编辑 [英] how to open a dialog box after clicking a table row and edit

问题描述

我想实现一个对话框，会尽快，我会点击一个表row.Basically想通过表行编辑数据库打开。表的内容被存储到数据库中，并从那里取出。如果我将编辑的行则数据库也应该可以自动更新。当我将点击行则对话框将获取从行某些特定的细胞，我会修改或删除行和结果应在表中立即可见。我想通过jQ​​uery来做到这一点，阿贾克斯。之后打开对话框AJAX应该调用servlet并修改数据库。请给code也。

I want to implement a dialog box which will open as soon as i will click a table row.Basically want to edit the database through table rows. The table content is stored into the database and fetched from there. If I will edit the row then the database also should be updated automatically. When I will click on the row then dialog box will fetch some particular cell from row and i will modify it or delete the row and the result should be visible immediately in the table. I want to do it through jquery, ajax. After opening the dialog box ajax should call a servlet and modify the database. Please give the code also.

<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文件

I have also added some js files

<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>

过去两年的每一行中是我的目标。

last two in the each row is my target

推荐答案

要发送数据到使用的jQuery 对话框中的servlet，您可以尝试使用这样的事情阿贾克斯，

To send the data to the servlet using jquery dialog , you can try something like this using ajax,

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

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

设置对话框属性上面

set the dialog properties as above

// 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来获得数据并将其插入到数据库中。你可以在这里找到一个密切相关的问题，

use your servlet to get the data and insert it into database. you can find a closely related question here,

如何从jquery-改变在DB数据用户界面对话框？

希望这有助于！

这篇关于如何单击表行后，打开一个对话框，并编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！