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

Question

I'm currently implementing a feature that somebody can add addresses on my page. He can do this via a simple form. What I have now (to print the addresses) is:

@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

The variable addresses is passed into the view from the controller.

What I'm trying to achieve now, is that the user can simply click on one of those address parts, like name, straße, plz and ort, and it's converted to an input field, so the value can be changed. Then, when leaving the focus (so clicking somewhere else (or maybe add a save button next to it)), the new data has to be sent to the controller by ajax (the request itself should be no problem then). But: How can I convert it to an input field and how can I then convert it back and react to it (to then send the ajax request)?

I searched in the internet, but didn't find something...

Edit: found a fiddle here (http://jsfiddle.net/yXcZG/3) that does nearly what I want, but I have the problem, that it doesn't seem to keep the format, 1. it has much more space between the lines and: when clicking on it to edit, the input field jumps to the bottom of the page and doesn't stay on the same position. Also I just want the variables to be editable, not the text before the :. So this is what I tried: (of course the AJAX thing is still missing, but first the other thing has to work)

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: Found this answer on stackoverflow too (https://stackoverflow.com/a/6814092/3375021), so use contenteditable, but I have the problem, that I on blur neither know, which address should be changed in the database, nor which part of the address..

Answer 1

If you're looking for a jQuery working solution you can go with this

JsFiddle example

You have a listener for when you click an element that is editable, it'll take the value of it and put it inside an input. After you blur you can take this value and do whatever you want with it..

Here is the javascript (jQuery) part.

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

});