Ändern Label, Textbox auf hyperlink Bearbeiten klicken

Verwenden ein hidden-input -

<div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Saghir<i class="icon-star"></i></p></label>
    <input type="text" class="input-medium" style="display:none;">
    <div class="controls">
        <a href="#" onclick="edit(this);">Edit</a>
    </div>
</div>

Wenn Benutzer klicken Sie auf "Bearbeiten", schnappen Sie sich den text aus text-info (z.B. Saghir), blenden Sie die Beschriftung, zeigen den Eingang und stellen Sie die Eingänge Platzhalter-Attribut.

function edit(element) {
    var parent=$(element).parent().parent();
    var placeholder=$(parent).find('.text-info').text();
    //hide label
    $(parent).find('label').hide();
    //show input, set placeholder
    var input=$(parent).find('input[type="text"]');
    $(input).show();
    $(input).attr('placeholder', placeholder);
}

arbeiten fiddle : http://jsfiddle.net/TKW74/

InformationsquelleAutor davidkonrad

Ich fummelte ein bisschen mehr mit Amyth ' s Antwort. Dies ist gerade können Sie klicken Sie auf den text um ihn zu Bearbeiten. Sie müssen nur das hinzufügen einer Klasse zu jedem beliebigen text-element, um die Funktionalität zu aktivieren. Enter-Taste aktualisiert den text. Klicken Sie außerhalb des Eingangs zum Abbruch.

HTML:

<span class="edit-on-click">Click to edit</span>

JS:

$(document).ready(function() {
  $('.edit-on-click').click(function() {
    var $text = $(this),
      $input = $('<input type="text" />')

    $text.hide()
      .after($input);

    $input.val($text.html()).show().focus()
      .keypress(function(e) {
        var key = e.which
        if (key == 13) //enter key
        {
          $input.hide();
          $text.html($input.val())
            .show();
          return false;
        }
      })
      .focusout(function() {
        $input.hide();
        $text.show();
      })
  });
});

JSFiddle

Update (Implementierung von AJAX-update db-Wert):

Hier ist, wie ich landete mit es in der Praxis:
dies nutzt data-Attribute, die auf das ursprüngliche element für die id, das Modell, und das Feld zu aktualisieren, in einem ajax-request. (Dies ist aus einer Django-app mit Bootstrap, so dass einige Zeilen können veraltet sein für Sie, je nach Ihrem setup.)

HTML:

<span onclick="editOnClick(this)" 
      data-id="123" 
      data-model="myapp.MyModel" 
      data-field="my_field">Click to edit</span>

JS:

function editOnClick(el) {
    var $text = $(el),
            $input = $('<input type="text" />');

    $text.hide()
            .after($input);

    $input.val($.trim($text.html())).show()
            .tooltip({title:"press ENTER to save<br>click outside to cancel", container:"body", trigger:'focus', html:true})
            .focus()
            .keypress(function(e) {
                var key = e.which;
                if (key == 13) //enter key
                {
                    $.ajax({
                        type: "POST",
                        data: {
                            value:$input.val(),
                            obj_id:$text.attr('data-id'),
                            obj_model:$text.attr('data-model'),
                            obj_field:$text.attr('data-field'),
                            csrfmiddlewaretoken:'{{ csrf_token }}'
                        },
                        url: "{% url 'edit_on_click' %}",
                        cache: false,
                        dataType: "html",
                        success: function(html, textStatus) {
                            $input.hide();
                            $text.html(html)
                                    .show();
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert('Error: ' + XMLHttpRequest.responseText)
                        }
                    });

                    return false;
                }
            })
            .focusout(function() {
                $input.hide();
                $text.show();
            })
}

InformationsquelleAutor Felix Böhme