So Bearbeiten Sie Daten onclick

Ich bin nicht sicher, was es heißt, aber ich möchte in der Lage sein zu klicken, z.B. auf einen div mit einer Nummer, und dann wird es änderung in einem input-text-Feld mit dem Wert, der als die Zahl, die ich angeklickt.

Dann möchte ich Bearbeiten Sie die Nummer und klicken Sie auf off (onblur- Ereignis), und es wird wieder eine div, aus dem text-Feld zeigt die neue Ausgabe der Reihe. Die Anzahl würde wurden ebenfalls aktualisiert und in die Datenbank per ajax.

Was ist diese Funktion?

Was ist der beste Weg, um code dieser?

  • inline-editing oder edit in place
InformationsquelleAutor Source | 2013-04-24
  1. 15

    Können Sie Folgendes tun:

    Haben ein click-Ereignis, und erstellen Sie ein Textfeld auf die Fliegen, die den text innerhalb der div-Wert.

    Die haben eine Unschärfe, auch die bindet, die textbox und macht einen AJAX-call und der Erfolg der änderung des div text

    Lets sagen, dass Ihre HTML-ist wie:

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

    Und dein JS-code Aussehen wird:

    $('#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 nachgewiesenermassen in diesem jsfiddle

    • Dies ist der einfachste Weg, dies zu tun. Aber für eine bessere Benutzer-Erfahrung, die Sie ersetzen können $('#txt_fullname').focus(); mit $("#txt_fullname").focus().val("").val(name); verschieben Sie den Fokus neben der input-Wert.
    • Statt blur wie verwenden Sie enter?
    • irgendeine Idee, warum der input-Wert klärt auf konzentrieren obwohl?
    InformationsquelleAutor jsshah
  2. 6

    HTML5 hat eine contentEditable Attribut mit ziemlich guter browser unterstützen, so möchten Sie vielleicht zu erkunden, diese erste, vor allem, wenn Sie wollen, zu tun, no-jquery. Einfach, indem ich contentEditable="true" in einem div wird es anklickbar und editierbar (basic text).

    In der praktischen Anwendung der editierbaren element, werden Sie brauchen, um eine JS-listener 'beobachtet' das element und die eine Aktion auslösen, wenn es Eingang. In OP ' s Fall in JS Sie würde das neu bearbeitete Inhalt irgendwo (wie ein array) bereit für eine ajax-Funktion, um es zu senden, um eine externe Datenbank. Mehr info hier.

    Auch, hier ist ein plugin, dass geht noch weiter und gibt mehr WYSIWYG-Kontrollen für diese Felder.

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

    JS:

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

    HTML:

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

    InformationsquelleAutor MarsAndBack
  3. 4

    Es ist jEditable: http://www.appelsiini.net/projects/jeditable

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

    So Bearbeiten Sie Daten onclick

    • Wooow, ist sehr einfach umzusetzen, das jquery-plugin. Geholfen
    InformationsquelleAutor imsky
  4. 2

    Heißt es jQuery edit in place. Es gibt eine Reihe von verfügbaren plugins von jQuery für die.

    • Es wird kategorisiert, wie ein jQuery-Frage!
    • sorry dafür - mein bad
    InformationsquelleAutor vinaynag
  5. 2

    Warum nicht einfach bleiben, mit einem Eingabe Feld, und ändern Sie das Feld Formatvorlagen auf die Unschärfe. Sie können nehmen Sie alles Weg, also es sieht nicht wie eine Eingabe, so gibt es keine Notwendigkeit zu ändern, hin und her. Machen Sie einen Ajax-call auf die Unschärfe.

    • das ist eine nette Idee, es kann immer noch update der db durch ajax onblur sowie Recht?
    • Ja, nur fügen Sie einen Ereignis-handler .blur(.ajax....)
    InformationsquelleAutor nick
  6. 1

    Ihnen namens des gesamten Prozesses bereits.

    Weisen Sie zuerst alle Ihre zahlen oder Felder mit Klasse.

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

    Dann zuweisen, dass die Klasse ein click-Ereignis.

    $('.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
 });
});
    InformationsquelleAutor Travis J
Schreibe einen Kommentar