CODEWITHSUNDEEP
javascriptjqueryhtml
Richa
Richa

Reputation: 3289

Adding New Div In Editable Mode

I have following JsFiddle for editing a Div, now I some how want too add a div which in edit mode by default.

When i click on Add New div,new div is added and then it can be edited by clicking Edit . But i was wondering is there a way when i click on ADD New Div the div should be by default in Edit mode. Is there any way i can achieve it.

Following is Js Fiddle

Thanks For Help :)

Upvotes: 1

Views: 221

Answers (2)

T J
T J

Reputation: 43156

Change your function as follows:

 $("#add").click(function () {
     $('#accordion').prepend($("#appendpanel").clone().removeAttr('id').find('.panel-title, .panel-collapse').attr('contenteditable',true).css('border','2px solid'));
});

check this JSFiddle

Updated Fiddle as per comments

Note: There are other neat ways for doing what you want. You can simply keep a hidden editable div, add its clone and make it visible.. Or create a function that dynamically adds the mark up you need..

Side notes: Please avoid using inline-css, here is why: Why Use CSS @ MDN

for changing style attributes jQuery has a dedicatedcss() function

You don't need two $(document).ready() functions

Upvotes: 1

Gaurang Tandon
Gaurang Tandon

Reputation: 6753

Not a one-liner, but does the job ;)

$("#add").click(function () {

   var clone = $("#appendpanel").clone().removeAttr('id');
   $('#accordion').prepend(clone);

   // trigger a click event on the button, which makes the required div's content-editable
   clone.find("#edit1").trigger("click"); 
});

Updated fiddle

Updated:

Use this code in $('#accordion').on('click', '.delete-link', function () {

var children = $(".panel");
// get those not hidden
children = children.filter(
    function(index){
        return children.eq(index).css("display") !== "none"; 
    }
).length;

if(children === 1){  // the only child left is "Add new div"
     $("#message").show(500);
}

And this in $("#add").click(function () {

$("#message").hide(500);

Updated fiddle

Upvotes: 1

Related Questions