Problems with update input Objects in JQuery

Question

When I double click the card the dialog pops up, and it is then possible to create dynamic checkBoxes, and comments. So far so good. When creating the checkBoxes or comments it is possible to edit or delete it.

The issue is when creating one comment and name it eg. "Hallo". Then I want to edit it, and name it "Hallo World", then save the data via Button "Get value". When I open the same card the comment is still named "Hallo", and not "Hallo World". I need to update the input objects' commentString property. I tried to implement this on label element:

$('<label />', {
        id: 'comment' + id,
        text: commentString
    }).on('change', function () {            
        data1.commentString = $(this).val();
    }).appendTo(div);

and this line on edit function:

element.children('input').change();

But it seems not to work.

JQuery:

function addComment(commentString) {

        var container = $('#divComments');
        var inputs = container.find('label');
        var id = inputs.length + 1;

        var data1 = {            
            commentString: commentString
        };

        var div = $('<div />', { class: 'CommentStyle' });

        $('<label />', {
            id: 'comment' + id,
            text: commentString
        }).on('change', function () {            
            data1.commentString = $(this).val();
        }).appendTo(div);      

        $('<br/>').appendTo(div);

        var $Image = $('<img />',
            {
                "src": "/Pages/Images/alert.png",
                "class": "CommentImage",
                "for": "comment" + id
            }).appendTo(container);

        var d = new Date();
        var $fulaDate = $('<div>' + d.getDate()
            + "-" + monthNames[d.getMonth()]
            + "-" + d.getFullYear()
            + "//" + d.getHours()
            + ":" + d.getMinutes()
            + '</div>').addClass('labelStyle').append(' ~').appendTo(div);

        var $edit = $('<p />', {
            class: 'edit',
            text: 'Edit'
        }).append(' ~').appendTo(div);

        var $delete = $('<p />', {
            class: 'delete',
            text: 'Delete'
        }).appendTo(div);        

        div.appendTo(container).focus();

        container.data('comments').push(data1);

    }

    $('#submit').click(function () {
        addComment($('#comments').val());
        $('#comments').val("");
    });

   $('#divComments').on('click', '.edit', function () {
        var element = $(this).parent()
        var text = $(this).parents(".CommentStyle").find("label").text();
        var input = $('<input id="attribute" value="' + text + '" />')
        element.children('label,p').addClass('hidden').end().append(input);        
        input.select();

        input.blur(function () {
            var text = $('#attribute').val();
            element.children('label').text(text);
            element.children('.hidden').removeClass('hidden');
            $('#attribute').remove();
            element.children('input').val(text);
            element.children('input').change();
        });
    });

Live Demo

Could you add a fiddle?

Mark Rijsmus
– Mark Rijsmus

2014-05-14 16:16:38 +00:00
Commented May 14, 2014 at 16:16 — Mark Rijsmus
– Mark Rijsmus, Commented May 14, 2014 at 16:16
The scope is updated :)

AdiT
– AdiT

2014-05-14 16:18:31 +00:00
Commented May 14, 2014 at 16:18 — AdiT
– AdiT, Commented May 14, 2014 at 16:18

Djizeus · Accepted Answer · 2014-05-14 16:45:14Z

2

The issue is that the data1 object is attached to the label element, that holds the comment, but when the comment is edited the value of the new comment is sent to element.children('input'), which was the input to edit the comment. What you want is send the value to the label:

    input.blur(function () {
        var text = $('#attribute').val();
        element.children('label').text(text);
        element.children('.hidden').removeClass('hidden');
        $('#attribute').remove();
        element.children('label').val(text);
        element.children('label').change();
    });

To be more accurate, in fact you should not use .val() on a label, this method is meant to be used on form elements. So a better solution would be to use the .text() value in the "change" handler (here again, this seems un-natural to put a change handler on a label, but that works). and in the blur handler:

    $('<label />', {
        id: 'comment' + id,
        text: commentString
    }).on('change', function () {            
        data1.commentString = $(this).text();
    }).appendTo(div);

...

    input.blur(function () {
        var text = $('#attribute').val();
        element.children('label').text(text);
        element.children('.hidden').removeClass('hidden');
        $('#attribute').remove();
        element.children('label').change();
    });

Updated fiddle: http://jsfiddle.net/62QY8/139/

edited May 14, 2014 at 16:45

answered May 14, 2014 at 16:35

Djizeus

4,1751 gold badge26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AdiT Over a year ago

Can you maybe tell me, after I save the Data via the button 'get value', and open the same card the image appears twice?

Djizeus Over a year ago

This is because when the form is initialized in the doubleClick handler, you have to remove the images, just like you remove the comments and checkboxes: $('.CommentImage').remove();.

Collectives™ on Stack Overflow

Problems with update input Objects in JQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related