49857

make a div editable

I need to make a whole div(with class container) editable when the user clicks on the Edit link. Using contenteditable attribute can make a div editable. But it happens only when we double click on that div. I also do not prefer to use any plugins for that. So basically the div should be editable if the user clicks on the Edit button. I am new to jquery and learning th basic stuffs. Please help.

Please find the structure of my Dom elements

http://jsfiddle.net/GeJkU/248/

Sorry for changing the classname.

Answer1:

Updated your jsfiddle example, to the correct class name and it works.

<div class="container "> <div class="container_settings_inner"> <h4 class="fred"><div class="iconnameserver"></div> Test1</h4> </div> </div>

and

$(document).ready(function() { $("#edit").click(function() { $('.container_settings_inner').attr('contentEditable','true'); }); });

You could put focus on the .container_settings_inner h4 attribute when they become editable so the user knows, or light them up a bit.

http://jsfiddle.net/QqbyS/

Recommend

  • Does AOP with AspectJ works with method from Managed Bean called from the view in JSF2?
  • Android, How to theme font colour for just TextView Widgets?
  • Dynamic controls: associated events don't fire if recreated during Page_Load
  • Change variable scope of function in Javascript
  • API (curl)Command to Approve a promoted build Job in Jenkins
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • Ruby and class variables in inherit class
  • Insertion large number of Entities into SQL Server 2012 [duplicate]
  • MAVEN : Run Multiple Maven Project using Maven Test
  • Why isn't my “Fizz Buzz” test in R working?
  • TFS - how do I sum child task hours to parent
  • Python PIL to extract number from image
  • jquery validation - waiting for remote check to complete
  • cell spacing in div table
  • Most efficient way to move table rows from one table to another
  • CodeIgniter URI Parameter is partially bypassing an “if” statement
  • opencv display image without x server
  • Row to Column conversion in Talend
  • Custom preprocessing in caret
  • calculate gradient output for Theta update rule
  • Is it possible to open regedit and navigate to straight to a specific key using process.start?
  • How to clear text inside text field when radio button is select
  • Android fill_parent issue
  • How to delay loading a property with linq to sql external mapping?
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • When should I choose bucket sort over other sorting algorithms?
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Unanticipated behavior
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • How to disable jQuery.jplayer autoplay?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Turn off referential integrity in Derby? is it possible?
  • JaxB to read class hierarchy