jquery + table row edit - String problem

Question

I've one problem with editing a row... I wanted to use a button to enter edit mode in the table (generated from php array (data taken from mysql))

I have two rows for each data:

                <tr class="dataline">
                    <td><?=$row->id; ?></td>
                    <td><?=$row->pl>0 ? '<div id="gain">' . $row->pl .'</div>' : '<div id="loss">' . $row->pl . '</div>';?></td>
                    <td><div id="reason"><?=$row->reason;?></div></td>
                    <td><div id="comment"><?=$row->comment;?></div></td>
                    <td><div id="date"><?=$row->cdate; ?><br /><?=$row->ctime; ?></div></td>
                    <td><div id="date"><?=$row->mdate; ?><br /><?=$row->mtime; ?></div></td>
                    <td colspan="2"><button id="editlink">Edit</button>
                    <button id="deletelink">Delete</button></td>
                </tr>
                <tr class="editline" style="display:none;">
                    <form id="<?php echo $row->id;?>">
                    <td><?php echo $row->id; ?><input type="hidden" name="id" id="id" value="<?php echo $row->id;?>" /></td>
                    <td><input type="text" id="pl" name="pl" value="<?=$row->pl;?>" /></td>
                    <td><textarea id="reason" name="reason"><?=$row->reason;?></textarea></td>
                    <td><textarea id="comment" name="comment"><?=$row->comment;?></textarea></td>
                    <td><div id="date"><?=$row->cdate; ?><br /><?=$row->ctime; ?></div></td>
                    <td><div id="date"><?=$row->mdate; ?><br /><?=$row->mtime; ?></div></td>
                    <td colspan="2"><input id="edit_save" type="Submit" value="Save" />
                    </form>
                    <button id="cancellink">Cancel</button></td>
                </tr>

I attached two jquery statements to it ...

1st. one ... changes the row to

    $("#editlink").click(function() {
        var datapos = $(this).parent().parent().prevAll().length;
        var editpos = datapos + 1;

        $("#data_table tbody tr:eq(" + datapos + ")").hide();
        $("#data_table tbody tr:eq(" + editpos + ")").show();
    });

Works perfectly.

2nd. Suppose to save (POST to PHP script) once the change has been done and reload the page.

    $("#edit_save").click(function() { 
        var dataString = $("form").serialize();

        var editpos = $(this).parent().parent().prevAll().length;
        var datapos = editpos - 1;

        $.ajax({
            type: "POST",
            url: "edit",
            data: dataString,
            success: function() {
                $("#lightbox").fadeIn(900);
                $("#notification-box").show();
                $("#notification-box").html("<img src='<?php base_url();?>img/notification.gif'><p>Saving</p>");

            location.reload();
            }
        });
    });

So, the issue I have here is that the dataString is a value of all values generated in the table not the specific row I wanted to edit.

I would be really glad if someone can help me with that.

Cheers,

/Jacek

adding location.reload(); to the end of success code will make the page reload right after the response is fetched, that means previous $("#lightbox").fadeIn, $("#notification-box").show, $("#notification-box").html calls won't have time to execute. — aularon
– aularon, Commented Sep 4, 2010 at 12:46
That is a working code... I was just testing the lightbox ... I don't think that it will stay there... but thanks — Jacek Dominiak
– Jacek Dominiak, Commented Sep 4, 2010 at 12:48
Note that having multiple elements with the same id is invalid HTML and could cause problems or unexpected behavior (though not your current problem). For example, id="date" should either be class="date" or id="date1", id="date2", etc. — Brock Adams
– Brock Adams, Commented Sep 4, 2010 at 13:06

aularon · Accepted Answer · 2010-09-04 12:55:52Z

1

$("form") would fetch all <form> elements in the page, you need the clicked button parent form: $(this).parent('form'):

var dataString = $(this).parent('form').serialize();

answered Sep 4, 2010 at 12:55

aularon

11.1k4 gold badges38 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jacek Dominiak Over a year ago

I've tried that .... I see what you mean.. but now the string is empty... I tried .parent().parent('form')... as well... same results :(

aularon Over a year ago

It's probably due to that you are putting a <form> tag surrounding the <td>, try inspecting the output (after it's rendered by the browser), probably the browser didn't like that, cuz this is not a valid place for a <form> element. my firefox didn't like it, it closes the <form> tag right before the next <td>: jsfiddle.net/yUERz

Collectives™ on Stack Overflow

jquery + table row edit - String problem

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related