javascript - ページをリダイレクトせずにテーブルを更新する

Question

javascriptまたはjqueryを使用してページをリダイレクトせずにテーブルを更新する方法これは私のスクリプトです

    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>

テーブルをダブルクリックすると、編集ボックスが列内に表示されます。テキスト ボックスがフォーカスを失うと (テーブルの外側をクリックして)、onblur イベントが呼び出されます。フォーカスを失うと、ページをリダイレクトせずに更新サーブレットを呼び出す必要があります。更新プロセスはバックグラウンドで発生する必要があります

編集

編集が遅れて申し訳ありません。スクリプトを編集しました。完全に機能する HTML と JavaScript コードを投稿しました。1 か月前にこの問題を解決しました。ユーザーはコードを確認し、さらに改善できるかどうかを提案してください。

Answer 1

これを実現するには、jquery の ajax を使用できます。実際の更新が完了したときに通知されるように、コールバック メソッドを渡すことができます。

これは表のセルです。何でもかまいません。この例では div を使用しています。

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

jsは次のようになるはずです

$('#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!')
                }
            });
        });
    }
});

Answer 2

jQuery の $.ajax() メソッドを見てください。ページの更新をトリガーせずにコンテンツを取得または投稿するのは非常に簡単です。

http://api.jquery.com/jQuery.ajax/

Answer 3

$.post 短縮形を使用します。

http://api.jquery.com/jQuery.post/をご覧ください。