如何将表行检索到对话框并进行编辑

时间:2014-08-01 06:57:09

标签: jquery ajax jsp servlets

我有像这样的jquery

<script type="text/javascript">
$(document).ready(function () {
function fnOpenNormalDialog() {
            $("#dialog-editTweet").html("Tweet Edit Box");

            // Define the Dialog and its properties.
            $("#dialog-editTweet").dialog({
                resizable: false,
                modal: true,
                title: "Modal",
                height: 250,
                width: 400,
                buttons: {
                    "Yes": function () {
                        $(this).dialog('close');
                        callback(true);
                    },
                        "No": function () {
                        $(this).dialog('close');
                        callback(false);
                    }
                }
            });
        }

        $('.btnOpenDialog').click(fnOpenNormalDialog);

        function callback(value) {
            if (value) {
                alert("Tweet Edited");
            } else {
                alert("Rejected");
            }
        }


    });

我有这样的表

<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>
                <td><input type="button" class="btnOpenDialog" value="Edit Tweet" /></td>
                <div id="dialog-editTweet"></div>

            </tr>

    <%
        }
    %>
        </table>
        </fieldset>
    <%

现在我想将对话框编辑为表单,这样当我点击“编辑推文”时按钮它应该立即检索最后两个,我将编辑对话框中的中间。我想在我的jquery中使用ajax,它将最后和编辑的中间发送到servlet,并根据最后的值我将修改数据库。我无法更改最后一个因为它是时间戳值。请告诉我们如何使用ajax来调用servlet来改变数据库。我是jquery的新手。

1 个答案:

答案 0 :(得分:0)

您提出此问题多次。不要那样做。要为您的问题增加价值,请尝试简明文字并清楚地发布您尝试的内容以及您遇到的问题?当然提供了足够的赏金来快速解决这个问题。

顺便说一下,我为您发布了一半的解决方案。单击按钮直到编辑表值。请在模态中找到获取表值的代码。在脚本中,

 $("#firstTextBox").val($(this).parent().parent().find('td:eq(1)').text());
 $("#secondTextBox").val($(this).parent().parent().find('td:eq(2)').text());
 $("#thirdTextBox").val($(this).parent().parent().find('td:eq(3)').text());

HTML中的轻微修改,

<div id="dialog-editTweet" style="display:none;">
    Name:  <input type="text" id="firstTextBox" name="firstTextBox" /><br>
    Age: <input type="text" id="secondTextBox" name="secondTextBox" /><br>
    Subject: <input type="text" id="thirdTextBox" name="thirdTextBox" /><br>
</div>

由此您需要发送ajax请求以将已编辑的值更新到DB中。

这是 DEMO

PS:使用隐藏的ID更新行。希望这会给出起点。干杯..