jquery - valor - hipervinculo html w3school

Cambiar etiqueta a cuadro de texto al editar clic en hipervínculo

Question

Soy nuevo en ruby ​​on rails y twitter bootstrap. Acepte mi disculpa si mi pregunta suena tonta. Estoy usando Twitter bootstrap para el diseño de mi sitio. He intentado utilizar bootstrap para cambiar mi etiqueta a la caja de texto usando el clic del botón de hipervínculo.

<div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Saghir<i class="icon-star"></i></p></label>
    <div class="controls">
        <a href="#">Edit</a>
    </div>

pero no puedo hacerlo, debería usar jquery para hacerlo, o puedo usar bootstrap para eso. Por favor, dirígeme a la dirección correcta. Gracias por adelantado

El código de edición se actualiza con un hipervínculo (también podría ser un botón). es como, cuando hago clic en el hipervínculo "Editar", mi etiqueta debe mostrar el contenido "Saghir" que se puede usar utilizando el atributo de marcador de posición de bootstrap. Puedo enviar un formulario para actualizar los valores a la base de datos.

Answer 1

Como dijo Chris, Bootstrap no proporciona esta funcionalidad, ya que es un marco de front-end. puedes usar jQuery para lograr esto. Sin embargo, deberá agregar algunas identificaciones o clases personalizadas a sus elementos para asegurarse de que solo está seleccionando los elementos necesarios. Puedes hacer algo como lo siguiente:

HTML

<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="edit-input" />
    <div class="controls">
        <a class="edit" href="#">Edit</a>
    </div>
</div>

jQuery

$(document).ready(function() {
    $(''a.edit'').click(function () {
        var dad = $(this).parent().parent();
        dad.find(''label'').hide();
        dad.find(''input[type="text"]'').show().focus();
    });

    $(''input[type=text]'').focusout(function() {
        var dad = $(this).parent();
        $(this).hide();
        dad.find(''label'').show();
    });
});

CSS

.edit-input {
    display:none;
}

Aquí hay un JSFiddle que funciona para su referencia.

Answer 2

Use una entrada oculta

<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>

Cuando el usuario hace clic en "Editar", toma el texto de text-info de text-info (p. Ej., Saghir), oculta la etiqueta, muestra la entrada y establece las entradas placeholder-attribute.

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);
}

fiddle de trabajo: http://jsfiddle.net/TKW74/

Answer 3

Creo que necesitas jQuery para eso. Prueba esto :

$(''#edit'').click(function() {
 var text = $(''.text-info'').text();
 var input = $(''<input id="attribute" type="text" value="'' + text + ''" />'')
 $(''.text-info'').text('''').append(input);
 input.select();

 input.blur(function() {
   var text = $(''#attribute'').val();
   $(''#attribute'').parent().text(text);
   $(''#attribute'').remove();
 });
});

.control-label .text-info { display:inline-block; }

 
<label for="name" class="control-label"><p class="text-info">Saghir</p><i class="icon-star"></i></label>
<div class="controls">
   <a href="#" id="edit" class="btn">Edit</a>
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

Actualizar

Si desea cambiar la etiqueta a la entrada y poner el texto de la etiqueta en el marcador de posición de la entrada, intente esto

$(''#edit'').click(function() {
 var text = $(''.text-info'').text();
 var input = $(''<input type="text" placeholder="'' + text + ''" />'')
 $(''.text-info'').text('''').append(input);
});

.control-label .text-info { display:inline-block; }

<label for="name" class="control-label"><p class="text-info">Saghir</p><i class="icon-star"></i></label>
<div class="controls">
   <a href="#" id="edit" class="btn">Edit</a>
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

jsfiddle jsfiddle 2

Answer 4

Sé que es una vieja pregunta, pero acaba de agregar la opción Actualizar a la respuesta de Saghirs,

http://jsfiddle.net/integerz/k3p4vhnb/

    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"]'');
        var edit = $(parent).find(''.controls-edit'');
        var update = $(parent).find(''.controls-update'');
        $(input).show();
        $(edit).hide();
        $(update).show();
        //$(input).attr(''placeholder'', placeholder);
    }

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

Esto permitirá al usuario volver al modo normal. También la llamada de actualización de Ajax se puede activar en la función de actualización.

Answer 5

Jugueteé un poco más con la respuesta de Amyth. Éste solo le permite hacer clic en el texto para editarlo. Solo necesita agregar una clase a cualquier elemento de texto para habilitar la funcionalidad. Enter key actualiza el texto. Haga clic fuera de la entrada para abortar.

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

Actualización (implementación de AJAX para actualizar el valor de db):

Así es como terminé usándolo en la práctica: esto usa atributos de datos en el elemento original para el id, el modelo y el campo para actualizar en una solicitud ajax. (Esto es de una aplicación de Django que usa Bootstrap, por lo que algunas líneas podrían ser obsoletas para usted dependiendo de su configuración).

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