Create editable new rows to a table

Question!

I'm trying to add details to a database by using ajax and table dynamic rows.

e.g.

----

{Customer: dropdown menu} | {Description: textarea} | delete

Add New Customer

---

When the user clicks it shows the drop down menu of all available customers. when you click away it just shows the select customer name (not the dropdown menu)

Similarly with the description i want on click to allow them to edit the description of the text area but when you click away it only shows the text you just entered. (not the text area outline)

Add new customer button creates a new empty row.

What libraries or examples can help me get started with this?

I saw this recently in an application recently. In this application it was possible to add new items/rows via ajax and dynamic HTML.



Answers

Most sites where you see such functionality accomplish it with styling - you can style a text input box to look like plain text (by removing the border and setting the background color to transparent). When the input is clicked on (focused), the style changes:

<style>
   .blurredText { border: none; background-color: transparent; }
</style>
. . .
<input type="text" class="blurredText" value="Click me to edit"
    onfocus="this.className=''" 
    onblur="this.className='blurredText'"/>

Styling a select the same way may prove difficult however, since select controls are notoriously resistant to CSS. You can still use the method Dave proposed.

By : levik


You should be able to do that easily enough using jQuery (look at the selectors, events & manipulation in their docs). For example, for the dropdown

<span id="customer-name"></span>
<select name="customer-list" id="customer-list">
	<option class="name" value="cust-1">Frank Frankson</option>
	<option class="name" value="cust-2">John Johnson</option>
</select>

And the jQuery :

$('.name').click(function(){    	
	$('#customer-name').text($(this).text());
	$('#customer-list').hide();
});

In that function you could do something with the option element value if needed (an ajax post or whatever).

The principal for changing the Text Area description would be the same (you could grab the text out of the textarea, add it to a div & hide the textarea; if they need to edit again, just show the textarea & hide the div)

By : Dave


You can't do it the way you want to do it. You can jump through some hoops and get something similar, e.g. using Daniel's solution, but it's not quite the same thing. The reason you can't do it is that arrays are not lvalues in C. An lvalue is something that can appear on the left-hand side of an assignment. The following code is invalid C:

float stuff1[30], stuff2[30];
stuff1 = stuff2;  // ERROR: arrays are not lvalues

As a consequence, you can't declare properties whose types are not lvalues.



This video can help you solving your question :)
By: admin