How to edit onclick data

Question

I'm not sure what it's called, but I want me to have the ability to click, for example. a div containing a number, and then it will change into the input text box with the value I click.

Then I want to edit the number and click ( onblur event) and it will return to the div from the text box showing the new edited number. The number would also be updated in the database via ajax.

What is called this function? What is the best way to encode this?

Answer 1

You can do the following:

Have a click event and create a text field on the fly that takes the text in the div as a value.

They even have a blur that binds to this text field and makes an AJAX call and if successful changes the text div

Lets say your HTML is like:

 <div id="fullname">Amazing Spider man</div> 

And your JS code will look like this:

 $('#fullname').click(function(){ var name = $(this).text(); $(this).html(''); $('<input></input>') .attr({ 'type': 'text', 'name': 'fname', 'id': 'txt_fullname', 'size': '30', 'value': name }) .appendTo('#fullname'); $('#txt_fullname').focus(); }); $(document).on('blur','#txt_fullname', function(){ var name = $(this).val(); $.ajax({ type: 'post', url: 'change-name.xhr?name=' + name, success: function(){ $('#fullname').text(name); } }); }); 

This is demonstrated in this jsfiddle.

Answer 2

HTML5 has a contentEditable attribute with pretty good browser support, so you can learn this first, especially if you want to do no-jquery. Simply placing contentEditable="true" in a div element will make it interactive and editable (body text).

For practical use of an editable element, you need to use a JS listener to "observe" the element and trigger an action when you enter it. In the case of OP in JS, they would put the newly edited content somewhere (like an array) ready for the ajax function to send it to an external database. More info here .

Also, here is a plugin that goes further and gives more WYSIWYG controls for these fields.

Anyway, here is a sample code, without plugins, without jQuery:

 var myEditableElement = document.getElementById('myContent'); myEditableElement.addEventListener('input', function() { console.log('An edit input has been detected'); console.log(myEditableElement.innerHTML); }); 

 <div id="myContent" contentEditable="true">This is an editable element. Click and type something!</div> 

Answer 3

There is jEditable: http://www.appelsiini.net/projects/jeditable

However, the X-editable looks a lot nicer: http://vitalets.imtqy.com/x-editable/

Answer 4

It is called jQuery editing. There is jQuery for plugins for this.

Answer 5

Why not just stay with one input field and change the field styles to blur. You can take everything so that it does not look like an entrance, so there is no need to change it back and forth. Make the Ajax call blurry.

Answer 6

You have already named the whole process.

Assign all of your numbers or fields to some class first.

 <div class="editable">value</div> 

Then assign the click event to this class.

 $('.editable').click(function(){ //replace element with input element containing the value //attach an onblur event to the new element $(newelement).blur(function(){ //use $.ajax to send the element value to your server //remove the input element and then replace the previous element with the new value }); });