So bearbeiten Sie Daten onclick

Question

Ich bin nicht sicher, wie es heißt, aber ich möchte in der Lage sein, z. Ein div enthält eine Nummer, und dann wird es in ein Eingabetextfeld geändert, wobei der Wert die Nummer ist, auf die ich geklickt habe.

Dann möchte ich die Nummer bearbeiten, und klicken Sie auf (onblur Ereignis), und es wird zurück zu einem div, aus dem Textfeld, das die neue bearbeitete Zahl zeigt. Die Nummer wäre ebenfalls über Ajax in die Datenbank übernommen worden.

Wie heißt diese Funktion?
Was ist der beste Weg, dies zu kodieren?

Answer 1

Es heißt jQuery an Ort und Stelle bearbeiten. Dafür gibt es eine Reihe von Plugins von jQuery.

Answer 2

Sie haben den gesamten Prozess bereits benannt.

Ordnen Sie zuerst alle Ihre Nummern oder Felder einer Klasse zu.

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

Dann weisen Sie dieser Klasse ein Klickereignis zu.

$('.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 
}); 
}); 

Answer 3

Es gibt Jeditable: http://www.appelsiini.net/projects/jeditable

jedoch X-editierbare sieht viel schöner: http://vitalets.github.io/x-editable/

Answer 4

Warum nicht einfach mit einem Eingabefeld, den Aufenthalt und die Feld Arten ändern verwischen. Sie können alles wegnehmen, so dass es nicht wie eine Eingabe aussieht, so dass Sie nicht hin und her wechseln müssen. Mache einen Ajax-Anruf bei Unschärfe.

Answer 5

Sie können folgendes tun:

ein Click-Ereignis und eine Textbox on the fly erstellen, die den Text innerhalb des div als Wert annimmt.

Die haben eine Unschärfe auch die zu dieser Textbox bindet und macht einen AJAX-Aufruf und in seinem Erfolg den div Text ändern

sagen Lässt Ihre HTML ist wie:

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

Und Ihre JS-Code wird wie zum Beispiel:

$('#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); 
     } 
    }); 
}); 

Dies ist in diesem jsfiddle demostrated

Answer 6

Die Dinge haben sich geändert. HTML5 hat ein contentEditable-Attribut mit bereits ziemlich guter Browser-Unterstützung, daher sollten Sie dieses zuerst erkunden, vor allem, wenn Sie keine JQuery machen wollen.

Wenn Sie contentEditable = true in ein div einfügen, wird es anklickbar und editierbar (Basistext). Sie können einen grundlegenden Listener einrichten und ein Update in ein Array einspeisen, das zum Speichern über Ajax bereit ist. More info here.

Auch, here's a plugin das dauert es weiter und gibt mehr WYSIWYG-Steuerelemente für diese Felder.

Anyways, hier ist ein Beispielcode, keine Plugins, keine jquery:

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

<div id="myContent" contentEditable=true>This is a paragraph. Click to make it editable.</div>