Change label to textbox on hyperclick click - mvc

Question

I want to change a label into a textbox when the user clicks on the EDIT link. I am doing the same thing that is discussed in this post, only difference is that I am using mvc razor syntax DisplayFor instead of using <label class="text-info">Saghir</label>.
I am not getting the desired result, please tell me where I am going wrong.

HTML:

@Html.DisplayFor(m => m.FirstName, new { @id = "#attribute", @class = "text-info" })
<a href="#" id="edit">Edit</a>

JS:

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

I'm not familiar with the razor syntax, but shouldn't `@id = "#attribute"`be `@id = "attribute"` ? — Cornwell, May 23 '16 at 08:42
@Cornwell I tried with `@id = "attribute"` as well, but still not getting the result — Sumedha Vangury, May 23 '16 at 08:44
@sumedha He meant something like this: https://jsfiddle.net/cegpbhuc/ — Cornwell, May 23 '16 at 08:56
@Cornwell ok but how will the user know that, that particular field is editable. If I give an "Edit" link and then allow the user to edit the content, it would be more intuitive. — Sumedha Vangury, May 23 '16 at 09:00
@sumedha You would need to add some css, but this basic example would fit your needs: https://jsfiddle.net/cegpbhuc/ — Cornwell, May 23 '16 at 09:09
@sumedha Sorry I forgot jsfiddle didn't save changes. Try this: https://jsfiddle.net/x1um7tkp/ — Cornwell, May 23 '16 at 11:29

Dinesh J · Answer 1 · 2016-05-23T09:48:57.837

2

Try This one

HTML

@Html.DisplayFor(m => m.FirstName, new { @id = "attribute", @class = "text-info" })
<a href="#" id="edit">Edit</a>

JS

$(document).ready(function (){
  $('#edit').click(function () {
     var text = $('.text-info').text();     
     var input = "<input id='attribute' type='text' class='text-fill' value='" + text + "' onfocusout='myFunction($(this))' />";
     $('.text-info').parent().text('').append(input);         
   });
});

function myFunction(e){
  var text = e.val(); 
  var dad = e.parent();  
  e.remove();
  dad.append("<label for='name' id='attribute' class='text-info'>" + text + "</label>");
}

For Example Fiddle - http://jsbin.com/xegusicige/1/edit?html,js,output

edited May 23 '16 at 09:48

answered May 23 '16 at 09:04

Dinesh J

113
11

Thanks for you answer @DineshJ but its not giving me the result. When the "Edit" link click event is fired, I can see this error in internet explorer's inspect element: "Object doesn't support property or method 'select'" – Sumedha Vangury May 23 '16 at 09:15
Wait i Share You fiddle. – Dinesh J May 23 '16 at 09:16
@Sumedha Now check the fiddle once click Run with JS button in fiddle then check it – Dinesh J May 23 '16 at 09:36
your fiddle is working for the first time but if I click on the edit link again, I cannot edit the field. – Sumedha Vangury May 23 '16 at 09:40
this is working when I use but when I am using DisplayFor it is not showing me the result. Is it because of this : `dad.text("" + text + "");` if yes then how can I make it work – Sumedha Vangury May 23 '16 at 10:02
@Sumedha Use dad.append("" + text + ""). Check my answer also – Dinesh J May 23 '16 at 10:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112667/discussion-between-sumedha-and-dinesh-j). – Sumedha Vangury May 23 '16 at 10:10
Discussion Chat is not opening to me – Dinesh J May 23 '16 at 10:19
ok maybe you do not have that many points to view the discussion. Anyways, when i click on the edit hyperlink nothing happens, I even did inspect element using firebug but I am not getting any errors also dont know whats going wrong, did you test the answer that you posted using razor syntax? is it working in your end? – Sumedha Vangury May 23 '16 at 10:23
ok can able to share me you display for how it is render in browser check inspect element and share that tag – Dinesh J May 23 '16 at 10:28
Its exactly the same html that you posted in this answer. – Sumedha Vangury May 23 '16 at 10:34
Can you put screen shot of it – Dinesh J May 23 '16 at 10:35
I cant attach a screen shot in my comment, that option is not available here, but as I said I did not change anything in the html code `DisplayFor`, I only changed the javascript, accroding to the answer you posted. HTML is the same: `@Html.DisplayFor(m => m.FirstName, new { @id = "attribute", @class = "text-info" }) Edit` – Sumedha Vangury May 23 '16 at 10:39
I have sent you an email – Sumedha Vangury May 23 '16 at 11:24
can't get where its getting stuck. tried the same code posted by you, I am trying to figure out whats going wrong, as soon as I get it will post the answer here – Sumedha Vangury May 23 '16 at 11:47
ok give alert message inside the $(".edit").click(function (){ alert("text"); }); Check it any alert message came or not – Dinesh J May 23 '16 at 11:51
This has already taken up a lot of my time, I tried a lot but did not get the desired result, so I decided to use the code as it is, instead of using Html.DisplayFor. I have taken it in a label `@Html.DisplayFor(m => m.FullName)` – Sumedha Vangury May 23 '16 at 12:05
@sumedha once i have check it here if its work i inform you – Dinesh J May 23 '16 at 12:10
ok. one more thing I wanted to ask is what if I want to do this for more than one label on the same page? how to pass the id. – Sumedha Vangury May 23 '16 at 12:39
More than one label is how u use the edit. one edit for one label or one edit for all the labels. – Dinesh J May 23 '16 at 12:55
one edit for all labels. On click of the edit button all the labels should convert to texboxes and the user can edit the values. How to do this? – Sumedha Vangury May 23 '16 at 13:21
No need to change any thing this code will working fine for that – Dinesh J May 23 '16 at 14:37

Cornwell · Answer 2 · 2016-05-23T12:24:54.613

From My comment:

var textEl = document.getElementById("text");
document.getElementById("edit").addEventListener("click", function() {
  textEl.setAttribute("contenteditable", "true");
  textEl.focus();
}, false);
//per Dinesh J's suggestion:
textEl.addEventListener("blur", function() {
  this.setAttribute("contenteditable", "false");
}, false);

<button id="edit">
  Edit!
</button>
<div id="text">
  Random text
</div>

Change label to textbox on hyperclick click - mvc

2 Answers2