Jeditable displaying whole page in place of edited row

Question

I am using Jeditable to edit table rows. My problem is that after submitting the changed value (and storing it in the database) when I return to the page it displays the whole page in place of edited row. It is also displaying outside the table.

-------table--------------
row11    row12
row21    row22
--------------------------

Suppose I changed row11 and updated the value in the database. Now the whole table is displayed two times. First under row11 and the second time outside the table. I cannot figure out why that is happening.

Below is the script I am using for sending the value, and other things:

<script type="text/javascript">
$(document).ready(function() {
        $('.edit').editable('', {
            indicator : 'Saving...',
            tooltip   : 'Click to edit...'
        });
        $('.edit_area').editable('http://localhost:8080/Interceptors_Struts2_Ant/parameters.action', { 
        type      : 'textarea',
        cancel    : 'Cancel',

        submit    : 'OK',
        indicator : '<img src="img/indicator.gif">',
        submitdata : function() {
            var id2 = '${param.city}';
            return {city: id2, tableid: $(this).closest('table').attr('id'),
            rowid: $(this).parent().index()}},
            tooltip   : 'Click to edit....',
            name : 'newvalue'
        });
    });
   </script>

Answer 1

It is because your submitdata return value is now being displayed where the edited element is. To avoid this, but still keep functionally what I did was to use callback.

callback: function(value, settings) {
      $(this).text(value);
   }

Add that to your .editable and have POST action return the text that you want displayed. (value is the return value of post)