Javascript從按鈕上傳信息

Question

我正在研究在php（phtml視圖文件）中生成的概要頭帶，如下所示：

echo    "<div>
        Nom : " . $this->currentP->getName() . "</br>
        " . "Version : " . $this->currentP->getVersion() . "</br>
        " . "Date de début : " . $this->currentP->getCreation_date() . "</br>
         ...
        </div>";

我想在每個字段旁邊有一個小按鈕（帶有圖像），以突出顯示每個字段的當前值，並允許用戶在未提交等情況下直接更改它...一種概述性儀表板上的動態版本。 這樣就可以編輯所顯示的對象，而無需彈出窗口或更改當前頁面。

我沒有在網絡上找到任何東西，所以我認為這要歸功於我不太了解的Javascript。

首先，我不知道是否必須聲明鏈接或按鈕來調用更新函數。 那么，接下來會發生什么？

感謝您的閱讀和您的答復！

Answer 1

1）您為每個字段（或更好的是，直接單擊字段）添加按鈕： <div class='editableField'><span>Some text to edit</span></div>

2）在字段上單擊，隱藏文本並應用輸入字段

$('.editableField').click(function(){
    $(this).append('<input type="text" value="'+$('span', this).text()+'" class="editableInput"/>');
    $('span', this).remove(); // remove this span temporary
});

3）當.editableInput焦點時，使用ajax調用保存字段值：

$(document).on('focusOut', '.editableInput', function(){
    $.ajax({
       url: 'example.com/saveFieldValues.php',
       type: 'post',
       data: {fieldValue: $(this).val()},
       success: function(){
           $(this).parent().append('<span>'+$(this).val()+'</span>'); // return back old span element
           $(this).remove(); // remove unnecessary input field 
       }
    });
});