将文本转换为可编辑的文本输入并保存到db-Laravel中

Question

我目前正在实现一个功能，有人可以在我的页面上添加地址。他可以通过一个简单的表格来完成。我现在(打印地址)的是：

@foreach($addresses as $address)
@if($address->typeOfAddress==0)
Name: {{$address->name}}<br/>
Straße: {{$address->street}}<br/>
PLZ: {{$address->plz}}<br/>
Ort: {{$address->city}}<br/>
<a type="button" class="btn btn-info" href="/editAddress/{{$address->id}}">Bearbeiten</a>
<a type="button" class="btn btn-danger deleteAddressButton" href="/deleteAddress/{{$address->id}}">Löschen</a>
<br/><br/>
@endif
@endforeach

变量addresses从控制器传递到视图中。

我现在试图实现的是，用户可以简单地点击其中一个地址部分，如名称、straße、plz和ort，然后将其转换为输入字段，从而可以更改值。然后，当离开焦点时(所以点击其他地方(或者可能在旁边添加一个保存按钮)，新数据必须通过ajax发送到控制器(这样请求本身应该没有问题)。但是：我如何将它转换为输入字段，然后如何将其转换回并对其做出反应(然后发送ajax请求)？

我在网上搜索，但没有找到什么。。。

编辑：在此处找到一把小提琴(http://jsfiddle.net/yXcZG/3)这几乎是我想要的，但我有一个问题，它似乎没有保持格式，1。它在行和行之间有更多的空间：当点击它进行编辑时，输入字段会跳到页面底部，不会停留在同一位置。此外，我只希望变量是可编辑的，而不是:之前的文本。所以这就是我尝试的：(当然AJAX的东西仍然缺失，但首先其他东西必须工作)

In JS:
$(document).on('click', '.editableText', function (e) {
console.log(this);
TBox(this);
});
$("input").live('blur', function (e) {
RBox(this);
});
function TBox(obj) {
var id = $(obj).attr("id");
var input = $('<input />', { 'type': 'text', 'id': id, 'class': 'editableText', 'value': $(obj).html() });
$(obj).parent().append(input);
$(obj).remove();
input.focus();
}
function RBox(obj) {
var id = $(obj).attr("id");
var input = $('<p />', { 'id': id, 'class': 'editableText', 'html': $(obj).val() });
$(obj).parent().append(input);
$(obj).remove();
}

HTML:

@foreach($addresses as $address)
@if($address->typeOfAddress==0)
Name: <span id="addressName{{$address->id}}" class="editableText">{{$address->name}}</span><br/>
Straße: <span id="addressStreet{{$address->id}}" class="editableText">{{$address->street}}</span><br/>
PLZ: <span id="addressPLZ{{$address->id}}" class="editableText">{{$address->plz}}</span><br/>
Ort: <span id="addressCity{{$address->id}}" class="editableText">{{$address->city}}</span><br/>
<a type="button" class="btn btn-danger deleteAddressButton" href="/deleteAddress/{{$address->id}}">Löschen</a>
<br/><br/>
@endif
@endforeach

第2版：在stackoverflow上也找到了这个答案(https://stackoverflow.com/a/6814092/3375021)，所以使用contenteditable，但我有一个问题，我在blur上既不知道数据库中应该更改哪个地址，也不知道地址的哪个部分。。

Answer 1

如果你正在寻找一个jQuery工作解决方案，你可以使用这个

Js报价示例

您有一个监听器，当您单击一个可编辑的元素时，它会获取该元素的值并将其放入输入中。模糊后，你可以取这个值，用它做任何你想做的事。

这是javascript(jQuery)部分。

$(function(){
$('body').on("click", ".changeable", function(e){
var text = $(this).text();
$(this).html("<input type='text' class='input-editable' value='" + text + "'>");
$(this).find('input').focus();
});
$('body').on("blur", ".input-editable", function(e){
var text = $(this).val();
$(this).parent().html(text);
console.log("Value changes to: " + text);
});
});

Answer 2

我认为应该使用<?php echo $variable; ?>而不是刀片{{$variabl}}

如果你要将html标签或js存储到数据库中，那么你不需要使用blade来回显它，你应该使用php简单的回显函数，而不是