how to open a dialog box after clicking a table row and edit

Question

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'); 

                            }

                        });
                    });

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

what you have tried so far to perform database chhanges?? and use Servlet instead of Scriptlets. See also [how to avoid java code in jsp](http://stackoverflow.com/questions/3177733/how-to-avoid-java-code-in-jsp-files) and [Jquery AJAX](http://api.jquery.com/jquery.ajax/) — Abhishek Nayak, Aug 01 '14 at 04:25

score 0 · Answer 1 · answered Aug 01 '14 at 04:45

0

First you should change

<tr id="ForChangingTweet">

to

<tr class="ForChangingTweet">

and use $('.ForChangingTweet') to get tr. because $('#ForChangingTweet') can get only one id in dom.

answered Aug 01 '14 at 04:45

worldask

1,837
3
22
37

score 0 · Answer 2 · edited May 23 '17 at 12:04

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

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

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

hope this helps !!

how to open a dialog box after clicking a table row and edit

2 Answers2