2

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.

user912187
  • 59
  • 1
  • 5

1 Answers1

1

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/

rapadura
  • 5,242
  • 7
  • 39
  • 57
  • but using the contenteditable attribute, the div would become editable only when the user clicks on that div. Am I correct?? I want to make a div(.container) editable when the user clicks on edit button – user912187 Jan 19 '12 at 21:00
  • You could focus on the element $('.container_settings_inner') when the user clicks in the button. – Chango Jan 19 '12 at 21:04