CODEWITHSUNDEEP
javascriptajaxjquery
Source
Source

Reputation: 1021

How to click-and-edit an element inline

I am not sure what it is called, but I want to be able to click on e.g. a div containing a number, and then it will change into a input text field, with the value being the number I clicked.

Then I want to edit the number, and click off (onblur event), and it will change back to a div, from the text field showing the new edited number. The number would have also been updated into the database via ajax.

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

Upvotes: 16

Views: 53276

Answers (7)

Kalnode
Kalnode

Reputation: 11394

Use HTML5's contentEditable

HTML5 has a native contentEditable attribute with pretty good browser support, so you may want to explore this if it aligns with your situation. Simply putting contentEditable="true" onto a div will make it clickable and editable. More info here and here. Also, here's a plugin that takes it further and gives rich text, WYSIWYG tools and HTML support for contentEditable elements.

To make practical use of the editable element, you'll need to use JS to trigger an action when input occurs. For the original poster, they would likely pass the input content to another function that sends it to an external database.

Sample code for contentEditable, no plugins, no jquery:

var myEditableElement = document.getElementById('myContent');
myEditableElement.addEventListener('input', function() {
    console.log('--- input detected ---');
    console.log(myEditableElement.innerHTML);
});
<div id="myContent" contentEditable="true">This is an editable element. Click and type something!</div>

Upvotes: 24

JackChilds
JackChilds

Reputation: 41

I know this is an old thread, but I built a project that does exactly this a while ago: https://github.com/JackChilds/Preview-In-Place.

You can then use it like this:

// get element:
var el = document.querySelector('#idOfElement')
// function to process the user's data, e.g. you could convert markdown to HTML here:
function processData(data) {
  return data.toUpperCase() // do something with the data here
}
// initialise the class:
var example = new PreviewInPlace(el, {
  // options
  previewGenerator: processData // reference to the function that processes the data
})
<div id="idOfElement" class="block">
  <textarea class="edit">Some Text Here</textarea>
  <div class="preview"></div>
</div>

<script src="https://cdn.jsdelivr.net/gh/JackChilds/Preview-In-Place@main/dist/previewinplace.min.js"></script>

And of course you can add some CSS to make it look a bit neater:

// get element:
var el = document.querySelector('#idOfElement')
// function to process the user's data, e.g. you could convert markdown to HTML here:
function processData(data) {
  return data.toUpperCase() // do something with the data here
}
// initialise the class:
var example = new PreviewInPlace(el, {
  // options
  previewGenerator: processData // reference to the function that processes the data
})
.block {
  width: 200px;
}
.block .edit {
  border: none;
  outline: none;
  border-radius: 0;
  resize: none;
}
.block .edit, .block .preview {
  padding: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

/* Make the 'block' have a red background when in edit mode */
.block.state-edit .edit {
  background-color: rgba(131, 0, 0, 0.3);
}
/* Make the 'block' have a green background when in preview mode */
.block.state-preview .preview {
  background-color: rgba(9, 174, 0, 0.3);
}
<div id="idOfElement" class="block">
  <textarea class="edit" rows="1">Some Text Here</textarea>
  <div class="preview"></div>
</div>

<script src="https://cdn.jsdelivr.net/gh/JackChilds/Preview-In-Place@main/dist/previewinplace.min.js"></script>

Upvotes: 2

jsshah
jsshah

Reputation: 1741

You can do the following:

Have a click event and create a textbox on the fly which takes the text inside the div as a value.

The have a blur even which binds to that textbox and makes an AJAX call and in its success change the div text

Lets say your HTML is like:

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

And your JS code will be like:

$('#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 demostrated in this jsfiddle

Upvotes: 20

nick
nick

Reputation: 610

Why not just stay with one input field, and change the field styles on blur. You can take everything away so it doesnt look like an input, that way there's no need to change back and forth. Make an Ajax call on blur.

Upvotes: 2

imsky
imsky

Reputation: 3289

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

However, X-editable looks much nicer: http://vitalets.github.io/x-editable/

enter image description here

Upvotes: 6

Travis J
Travis J

Reputation: 82357

You named the whole process already.

First, assign all of your numbers or fields with some class.

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

Then, assign that class a click event.

$('.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's value to your server
  //remove the input element and then replace the previous element with the new value
 });
});

Upvotes: 1

vinaynag
vinaynag

Reputation: 271

It is called jQuery edit in place. There are a number of plugins available from jQuery for that.

Upvotes: 3

Related Questions