Question

how to update a table without redirecting the page using javascript or jquery
this is my script

    function doubleclick(table,id1)
        {
            table.innerHTML="<input type=text name=tab onBlur=\"javascript:submitNewName(this,'"+id1+"');\" value=\""+table.innerHTML+"\">";
            table.firstChild.focus();

        }
        function submitNewName(text,id2)
        {
            text.parentNode.innerHTML=text.value;
        $.ajax({
            url: 'update',
            data:{text1:text.value,id:id2},
            type:"POST",
            dataType:"json",
            error:function(data)
            {
                alert('error')
            },
            success: function(data) 
            {
               // alert('updated!')
            }
        });  
        }

html

<td onDblclick="javascript:doubleclick(this,${item.id});">${item.filedesc}</td>

when i double click the table a edit box will appear within the column,an onblur event is called when the text box loses focus (by clicking outside the table), when it loses focus a update servlet should be called without redirecting the page. the update process should occur in the background

Edit

sorry for the late edit.did some editing to my script.i have posted my full working html and javascript code.solved this issue a month ago.users please check the code and suggest whether it can be improved more.

Answer 1

You can use jquery’s ajax to achieve this. You can pass a callback method so it will notify you when the real update is complete.

This is a table cell, it can be anything, i am using div for this example:

<div id="table-cell" editing="0">Value</div>    

js should be something like this

$('#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()
            $(this).parent().html(value);
            $(this).parent().attr('editing',0);

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