We Keep Coding

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

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..

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

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

editing dynamically generated table

I have a dynamically generated tables the foot of the table contain some text fields when click on save i want to add the value of text fields to the body of that table .
here is the table
<table border="1" class="entity_table">
<tfoot>
<tr>
<td>
<div class="pane1"></div>
<div class="pane2">
<input type="text" id="name"><br>
<select id="data">
<option value="1">int</option>
<option value="2">tinyint</option>
</select>
<br><span id="save">save</span>
</div>
</td>
</tr>
</tfoot>
<tbody class="table-body" id='myid'></tbody>
</table>
i did this but this is id specific ..i want to update that specific table on which it is clicked and edited .
var myName = document.getElementById("name");
var data = document.getElementById("data");
var Mtable = document.getElementById("myid");
var rowCount = Mtable.rows.length;
var mrow = Mtable.insertRow(rowCount);
var mcell = mrow.insertCell(0);
mcell.innerHTML = myName.value;
var mcell1 = mrow.insertCell(1);
mcell1.innerHTML = size.value;
i want to update each dynamically generated table with values that is entered in its table's foot section

You can use below jQuery :
$(function(){
$('#save').click(function(){
$(this).closest('table').find('tbody').append('<tr><td>'+$('#name').val()+' and '+$('#data').val()+'</td></tr>');
});
});
Demo
EDIT - to eliminate input and select box id dependency use below code :
$(function(){
$('#save').click(function(){
var name = $(this).closest('tr').find('input[type=text]').val();
var data = $(this).closest('tr').find('select').val();
$(this).closest('table').find('tbody').append('<tr><td>'+name+' and '+data+'</td></tr>');
});
});
Demo

So if I understood this right, you dont want to use element's ID to select it.
You have some else options if you dont want to work with elements IDs:
1) You can add them some data- attribute, for example: data-id. And based on this you select your element like this:
myElement.querySelector("[data-id='X']") where myElement is some parent element of your tables and X is their ID which you generated before (lets say it will start from 0 and will increment with every next table).
2) If possible, work with objects. When you create your tables, you either create them with raw text with defining html elements or you create new elements with calling createElement("table") on document keyword. If second option is your option, you can save this elements to some array (myTables in this case) and then approach this elements in a standard way - lets say:
myTables[0].getElementsByTagName("input")
Hope it helps your issue. Hope I understood issue you were asking about.

HTML5 storing multiple text boxes to local storage

Am able to store one text box to local storage via a button. How would I go about allowing it to take in all the text boxes I have in my 'survey'? Create id's for each text box then listing them all out within the get/set of my js?
<label for="serveri"> Server: </label> <input type='text' name="server" id="saveServer"/> <button onclick="saveData()" type="button" value="Save" id="Save">Save</button>
var save_button = document.getElementById('Save')
save_button.onclick = saveData;
function saveData(){
var input = document.getElementById("saveServer");
localStorage.setItem("server", input.value);
var storedValue = localStorage.getItem("server");
}
To get a better understanding(all text boxes), here is the whole in JSfiddle:http://jsfiddle.net/BDutb/

If you use a library like jQuery you can get the elements and loop through the values very easily. If you want the localStorage variables names to make sense then assign the input fields names and you can do:
See my example here:
http://jsfiddle.net/spacebean/BDutb/11/
$('form').submit(function() {
$('input, select, textarea').each(function() {
var value = $(this).val(),
name = $(this).attr('name');
localStorage[name] = value;
});
});
I shortened the form for demo sake, but you should be able to take it from there.
Edit: updated fixed jsFiddle link.

How to dynamically turn a text field into dropdown?

The name says all. I want to change a text field element into combo box using javascript. It will be nice if it's cross-browser.
EDIT: I may use jQuery

The trick is to create the dropdown element and add it to the form, as well as remove the text field. You can have HTML like this:
<form id='myform'>
...
<span id='textelement'>text goes here</span>
<input type='button' value='change text to dropdown' onclick='change()'/>
...
</form>
Then your change() function could be something like this:
function change() {
var _form = document.getElementById('myform');
var _text = document.getElementById('textelement');
_form.removeChild(_text);
var _combo = document.createElement('select');
_combo.setAttribute('size', '1');
_combo.setAttribute('id', 'dropdownelement');
_form.appendChild(_combo);
_combo = document.getElementById('dropdownelement');
//add first value to the dropdown
var _opt = document.createElement('option');
_opt.text = 'New option 1';
_opt.value = '1';
_combo.add(_opt);
//add second value to the dropdown
_opt = document.createElement('option');
_opt.text = 'New option 2';
_opt.value = '2';
_combo.add(_opt);
...
}
Note that I haven't tested this code - use it as a starting point only.

Are you wanting to change it client side or server side. If client side there really is not way without using javascript of some sort.

You can use InnerHTML but it isn't compatible with all browsers (Not compatible with: NN4 , OP5, OP6)

how to update a list of html items based on a list of json data

I have a list of checkboxes in my html page, like so:
<ul id="myList">
<li class="checkboxItem">
<input type="checkbox" name="item1" value="001" id="item-1"/>
<label for="item-1" class="checkboxLabel">Display 1</label>
</li>
<li class="checkboxItem">
<input type="checkbox" name="item2" value="042" id="item-2"/>
<label for="item-2" class="checkboxLabel">Display 42</label>
</li>
</ul>
now I make a call to get some json data, which comes back like so:
[{"name":"002","title":"Display 1"}]
what I want to do is loop the returned json and update the list of checkboxes such that any item not in the returned list is disabled, and those where the title matches a given label, the input value is updated.
so in this example, item2 will be disables and item1 will have its value updates to 002.
here's what I have so far, i'm not quite sure where to go from here, that is, what to do inside the loop. I do have some control over how the json is returned, so if it makes sense to retunr the json in another format, I can do that.
EDIT, updated the function, see below. however, once I get inside the for loop inside the each function, elem is getting a value of "0" rather than a js object such as:
{"name":"002","title":"Display 1"}. clearly data, is being transferred from the outside scope of the function to the inside scope of the each function, but how do I make that happen?
function(data) {
$('#myList').children('li').each(function(i,e) {
for(var elem in data) {
var elemDescr = elem['title'];
var elemName = elem['name'];
if(elemDescr==$(this).find('.checkboxLabel').text()) {
$(this).find('input').attr('value',elemName);
}
}
});

It might be easier to have an outer loop for each checkbox, and an inner loop go through each json element, enabling or disabling based on whether the element/checkboxes have a match.
So an inversion of what you have:
function(data) {
$('#myList').children('li').each(function() {
// loop through your data elements here
});
}
Another option (probably less desirable because it may cause multiple disabled/enabled transitions) is to disable all checkboxes, and enable them as you loop through each element.

I have found my problem. rather than doing:
for(var elem in data) {
var elemDescr = elem['title'];
var elemName = elem['name'];
}
I needed to do:
for(var index in data) {
var elemDescr = data[index].title;
var elemName = data[index].name;
}