Geek Answers Handbook

Editing a row jquery + table - String

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

I have two lines for each information:

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

first. one ... changes the string 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 great.

second. Assume to save (POST to PHP script) after the change has been made 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 problem I have here is that the dataString is the value of all the values ​​generated in the table, and not the specific row that I wanted to change.

I would be very happy if someone can help me.

Greetings

/ Jacek

+1
source share
1 answer

$("form") will retrieve all the <form> elements on the page, you need the parent form of the button with the button pressed: $(this).parent('form') :

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

More articles:


All Articles