Change shortcut to text box for editing hyperlink

Question

I'm new to rubies on twitter rails and bootstraps. Please accept my apologies if my question sounds stupid. I use twitter bootstrap for my website design. I am trying to use bootstrap to change my label in a text field by clicking a hyperlink button.

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

but I cannot do this, should I use jquery for this, or can I use bootstrap for this. Please direct me in the right direction. thanks in advance

Edit The code is updated with a hyperlink (this can also be a button). it looks like when I click on the "Edit" hyperlink, my shortcut should show the "Saghir" content, which can be used using the placeholder bootstrap attribute. I can submit a form to update the values ​​in the database.

Answer 1

As Chris said, Bootstrap does not provide this functionality, as it is an interface infrastructure. you can use jQuery to achieve this. Although you need to add some custom identifiers or classes to your elements to make sure that you select only the elements you need. You can do something like the following:

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

Here is the JSFiddle link for reference.

Answer 2

I think you need jQuery for this. Try the following:

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

Update

If you want the input change label and label text to fit in the input placeholder, try this for

 $('#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 3

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

When the user clicks "Edit", take the text with text-info (for example, Saghir), hide the label, show the input and set the attributes of the 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); } 

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

Answer 4

I know his old question, but just added the "Update" option to the Saghirs answer,

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

This will allow the user to return to normal mode. Also, the Ajax function call for updating can be activated during the update.

Answer 5

I tried more with Amit's answer. It just allows you to click the text to edit it. You just need to add the class to any text element to enable functionality. Enter the key, refresh the text. Press outside to cancel.

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 (AJAX implementation to update db value):

Here's how I used it in practice: it uses the data attributes for the source element for the identifier, model, and update field in the ajax request. (This is from a Django application using Bootstrap, so some lines may be deprecated for you depending on your installation.)

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