CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Code_Ed_Student
Code_Ed_Student

Reputation: 1190

Appending text and editing text of div - button click event

I am working with div elements and jquery. I am able to create a new div and append text through an on button click event. Each div created has draggable property thanks to a jqueryui plugn. Also, I am able to delete individual divs through an onclick event as well. But I am running into this implementation issue: Since I am able to append text to a div on a button click. How can edit the text of a previously created div? JSFIDDLE

Jquery

/** Remove newly created div **/
$(".remove").click(function(){
    $(".draggable").remove();
});

var z = 1;
$('#button').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'draggable ui-widget-content',
        html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>',
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    }).addClass('placement');


    /** Contain draggable div **/
    $('.middle-side').parent().mousemove(function(e){
        var offset = $(this).offset();
        var relX = e.pageX - offset.left;
        var relY = e.pageY - offset.top;
        $('.placement').css({'top': relY + 30,'left': relX + 10, 'position': 'absolute'});
    })

});

$('body').on('click', '.draggable .close', function () {
    $(this).closest('.draggable').remove();
});

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea>
<br/>
<input type="button" id="button" value="Add Div with Text" />
<br/>
<div>
    <div class="middle-side empty"></div>

</div>

Upvotes: 0

Views: 507

Answers (2)

stefanr
stefanr

Reputation: 76

As you are already using jQuery-ui - what about using a dialog?

Here is an (unstyled) example. As Geraud Mathe suggested I used the dblclick() Event:

JSFiddle | Dialog Doc

theDivJustAdded.dblclick(function() {
        var divElem = $(this);
        dialog = $( "#dialog-form" ).dialog({
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Save": function() {
                    divElem.find('.text').text($( "#dialog-form input" ).val());
                    dialog.dialog( "close" );
                },
                Cancel: function() {
                    dialog.dialog( "close" );
                }
            }
        });

    }
);

Upvotes: 2

Geraud Mathe
Geraud Mathe

Reputation: 711

I would add a double click event listener to each div that is added, then when the event is triggered, you get the text of the div and add it inside the textarea, change the text of the button from "Add Div with Text" to "Update content of the div", when the user clicks on the button , you replace the text of the related div with the one that is inside the textarea

Upvotes: 1

Related Questions