テキストを編集可能なテキスト入力に変換して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は、コントローラからビューに渡されます。

ここで達成しようとしているのは、ユーザーがname、straße、plz、ortなどのアドレス部分の1つをクリックするだけで、入力フィールドに変換され、値を変更できることです。次に、フォーカスを離れるときに（別の場所でクリックするか、またはその隣に保存ボタンを追加する）、新しいデータをajaxによってコントローラに送信する必要があります（要求自体は問題ありません）。しかし：どのように入力フィールドに変換することができますし、どのように私はそれを変換し、それに反応することができます（その後、ajax要求を送信する）？

私はインターネットで検索、何かを見つけることができませんでした...

編集：それはdoesnのことを、私が欲しいほとんど何んが、私は問題を抱えている、ここでフィドル（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 

EDIT2：この答えを見つけ（https://stackoverflow.com/a/6814092/3375021）ので、contenteditableを使用しますが、私はぼかしでもどちらのアドレスがデータベース内で変更されるべきか、またアドレスのどの部分が変更されるべきではないという問題があります..

Answer 1

jQueryのワーキングソリューションを探しているあなたは、あなたが編集可能な要素をクリックしたときのリスナーを持っているこの

JsFiddle example

で行くことができ、それはそれの価値を取ると、入力中に置くだろう。 あなたがぼかした後、この値を取ってそれで何でもしても構いません。

ここはjavascript（jQuery）の部分です。

私は、あなたがPHPを使用する必要があり、それをエコーするブレードを使用しないようにする必要があり、あなたのデータベースにhtmlタグやJSを保存しようとしている場合は、ブレード {{$variabl}}

の代わりに<?php echo $variable; ?>を使用するべきだと思います

$(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

単純なエコー関数