passing cell value inorder to update table using ajax post

working with jquery for the past 2 days iam trying to get a cell value which is needed to perform an update by calling a servlet through ajax.i have used a double click event to replace the cell with textbox for editing values,when the textbox loses focus the values are passed to the servlet.i need to pass the edited value along with a ID number for updating the table.now i need to get the id value of the row which the user edits.

i tried to get the values but only the first row is getting updated because i can get only the id values of the first row.how to get the values of the other rows so the user can update all the rows.

<script>
        $(function(){
    $('.table-cell').dblclick(function(){
//    if ($(this).attr('editing') == '0')
//    {
    // only trigger this when the cell is not in edit mode
   $(this).attr('editing',1);

    // show the input
    var input = $('<input type="text" value="'+$(this).html()+'">');
    $(this).html('');
    $(this).append(input);

    // bind blur event to input
    input.blur(function(){

        // update value from input to the table cell
        var value = $(this).val();
       // alert(value);
        $(this).parent().text(value);
        $(this).parent().attr('editing',0);
        //this will get only the first id value,no matter which column i edit
       var fid= document.getElementById("filename").textContent;
       // alert(fid);
       //this will iterate  
    $('#table').ready(function() { 
        $(this).find('.filename').each( function() { 
            alert($(this).html()); 
        }) 
    })




        // send the data to the server for update
        $.ajax({
            url: 'update',
            data: {text1:value,filename1:fid},
            type:"POST",
            dataType:"json",
            error:function(data){
               // alert('error')
            },
            success: function(data) {
                //alert('updated!')
            }
        });

    });
 //    }
});
    });
</script>
<table border="1" id="table">
 <th>S.NO</th>
 <th>Description</th>
 <th>File Name</th>
 <th>Category</th>
 <th>Sector</th>
 <th>Delete</th>
 <th>Edit</th>
 <c:forEach items="${fileDetails}" var="item" varStatus="counter">
 <tr>  
 <td>${counter.count}</td>
 <td onDblclick="javascript:doubleclick(this);" >${item.filedesc}</td> //editable row
 <td><a href="download?name=${item.filepath}" id="changes">${item.filenaame}</a></td>
 <td>${item.category}</td> 
 <td>${item.sector}</td>
 <td hidden="true" id="filename" class="filename" index="1" >${item.id}</td> //id values from db table
 <td> <input type="submit" onclick="filedelete('${item.id}','${item.sector}')" value="Delete"> </td>

 </tr>

 </c:forEach>
 <input type="hidden" name="delete" id="delete" >
 <input type="hidden" name="num" id="num">
 <input type="hidden" name="sect" id="sect">

 </table>

Answers:

Answer

You can encode the number of the row for example like that:

<tr index="counter.index">

... and than get hold of it by jQuery in the appropriate place

row=$(this).parent().attr("index")

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.