asp.net mvc - Using jQuery to toggle between DisplayFor and EditorFor in MVC -


In my view, there should be a way to toggle between a DisplayFor and EditorFor div. I want to click on an "edit" button next to a display field and I have the DisplayFor element hidden and the EditorFor field is visible. Once I update the text, I want to submit the form and data in the editor field.

I'm not sure why this is not working, tips?

My jQuery

  & lt; Script type = "text / javascript" & gt; Myfunction (element) {$ (element) Find ("span.item-display"). Html ($ (element) Find ("span.item-field") Find (": input: first"). Val ()); $ (Element) .Find ("span.item-display"). Show () .next ("span.item-field") .hide (); }   

My HTML view

  & lt; Dt & gt; & Lt; Strong & gt; @ Html.labelFor (m = & gt; m .FirstName) & lt; / Strong> & Lt; / Dt & gt; & Lt; Dd & gt; & Lt; Span class = "item-display" & gt; @html DisplayForm (M => M.Fst_Name) & lt; / Span & gt; & Lt; Span class = "item-field" style = "display: none" & gt; @ Html.EditorFor (m = & gt; m.FirstName) & lt; / Span & gt; & Lt; Period & gt; & Lt; Button type = "button" onclick = "myfunction (this)" /> & Lt; / Span & gt; & Lt; / Dd>    

Use Jquery toggle below:

  & lt; Dt & gt; & Lt; Strong & gt; @ Html.labelFor (m = & gt; m.FirstName) & lt; / Strong> & Lt; / Dt & gt; & Lt; Dd & gt; & Lt; Span class = "item-display toggle-control" & gt; @html DisplayForm (M => M.Fst_Name) & lt; / Span & gt; & Lt; Span class = "item field toggle-control" style = "display: none" & gt; @ Html.EditorFor (m = & gt; m.FirstName) & lt; / Span & gt; & Lt; Period & gt; & Lt; Button type = "button" onclick = "toggler ()" /> & Lt; / Span & gt; & Lt; / Dd> & Lt; / Dt & gt; & Lt; Script & gt; Function toggler () {$ (". Toggle-Control"). Toggle (); } & Lt; / Script & gt;    

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -