convert text to editable text input and save into 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..

Why not load the data into a form and then have an update button? Implement resourceful routes. — Denis Priebe
– Denis Priebe, Commented Jan 24, 2017 at 18:59
@DenisPriebe Don't want to have that many forms on one page, because there are many addresses on one page... So I only want to show a form when the user presses a button to make a new address, but if he wants to edit one, he should just press on one part of the address, it should be converted to an input and then saved when leaving focus... — nameless
– nameless, Commented Jan 24, 2017 at 19:04
that it doesn't seem to keep the format what do you mean with format? — Jose Rojas
– Jose Rojas, Commented Jan 24, 2017 at 19:33
@JoseRojas exactly the 2 points I wrote after it, there's much more space between the lines and the input jumps to the bottom of the page — nameless
– nameless, Commented Jan 24, 2017 at 19:39
Please update your question what you have done so far, Could be a problem of style — Jose Rojas
– Jose Rojas, Commented Jan 24, 2017 at 20:07

AfikDeri · Accepted Answer · 2017-01-24 21:14:30Z

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

});

answered Jan 24, 2017 at 21:14

AfikDeri

2,13918 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AfikDeri Over a year ago

@nameless with this one you have the text on blur event and you can do any ajax call within this function to modify your DB. This is what you where looking for, right?

nameless Over a year ago

Yes, you're right, thats exactly what I wanted. And it's better then the other 2 solutions but theres one issue: Clicking on the text 2 times, so the first time converting it to an input, the second time clicking just for fun / basically because you often click on it to make sure the cursor blinks there or just to edit something on the very end or the beginning of the text theres a problem (what a long sentence): the text disappears the second I time I click on...How can I fix that?

AfikDeri Over a year ago

@nameless I've updated the JsFiddle example , Please mark my answer if it works well for you, Good Luck :)

Mahmoud Kassem · Accepted Answer · 2017-01-24 21:32:33Z

0

I think you should be using <?php echo $variable; ?> instead of blade {{$variabl}}

If you going to store a html tags or js into your database then you need to not use blade to echo it, you should use php simple echo function instead

answered Jan 24, 2017 at 21:32

Mahmoud Kassem

4295 silver badges10 bronze badges

Collectives™ on Stack Overflow

convert text to editable text input and save into db - Laravel

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related