CODEWITHSUNDEEP
jquery
Michael Joseph Aubry
Michael Joseph Aubry

Reputation: 13462

Appending data to dynamic DIVs (created by jquery .clone())

I bet I am overlooking something simple here, but I took some time to write this FIDDLE hoping someone can point out, why its not appending the data from the input to the div .row it came from.

Let's start with the HTML

    //Ill be grabbing HTML from here
    <div id="sample-content">
        <div class="row">
            <button type="button" class="open-editor">open editor</button>
        </div>
    </div>

    //Where the input value will come from, (hidden at start)
    <div class="editor">
        <input name="content" value=""/>
        <button type="button" class="send-to-content">insert content</button>
        <button type="button" class="close-editor">close this editor</button>
    </div>

    //Displaying the actual generated content here. Appending the .row from the sample.
    //Has a button to the editor which I want to append the value to the specific row
    <div class="display-content">

    </div>

    //Add a new row into .display-content
    <button type="button" class="add-row">add row</button>

Then the jQuery

var myApp = {

    openEditor : function(el) {

        jQuery('.editor').addClass('opened')

    },

    closeEditor : function(el) {

        jQuery('.editor').removeClass('opened')

    },

    appendRow : function(el) {

        var cloneRow = jQuery('#sample-content > div.row').clone();

        cloneRow.appendTo('.display-content');

    },

    sendContent : function(el) {

        var contentData = jQuery('input[name="content"]').val();

        alert(contentData +  ' <- append this to the row the button click came from');

        jQuery('.display-content > row').append(contentData);

        myApp.closeEditor()

    },

}

    jQuery('.add-row').on('click', function() {

        myApp.appendRow(this)

    });

    jQuery('.display-content').on('click', '.open-editor', function() {

        myApp.openEditor(this)

    });

    jQuery('.editor').on('click', '.send-to-content', function() {

        myApp.sendContent(this)

    });

    jQuery('.editor').on('click', '.close-editor', function() {

        myApp.closeEditor(this)

    });

Everything is from this fiddle I made, take a look to get an idea of my angle here.

Essentially user adds a new row, opens an editor and then I want to append the input data to the specific row the open editor came from...

I am not sure how to incorporate this when there is two functions occurring and the function to send the data is not the element I am referring to.

If I append content in the first row it appends nicely, then when I add a new row and make a new input value, it appends to the first row and the row it came from, how do I limit it to the row it came from?

I was thinking of possibly needed to create an index function that gets the index of the element, but again not 100% sure how to incorporate it.. Hoping for some tips :)

FIDDLE

Upvotes: 0

Views: 1457

Answers (2)

vitaliy zadorozhnyy
vitaliy zadorozhnyy

Reputation: 1246

you written selector wrongly when adding to row class(should be ".row" instead of "row"). inatead of

jQuery('.display-content > row').append(contentData);

use

jQuery('.display-content > .row').append(contentData);

Upvotes: 0

adeneo
adeneo

Reputation: 318312

Set the row that is currently being edited to .active, and append the content to that :

var myApp = {
    openEditor : function() {
        $('.editor').addClass('opened');
        $(this).closest('.row').addClass('active');
    },
    closeEditor : function() {
        $('.editor').removeClass('opened');
        $('.row').removeClass('active');
    },
    appendRow : function() {
        var cloneRow = $('#sample-content > div.row').clone();
        cloneRow.appendTo('.display-content');
    },
    sendContent : function() {
        var contentData = $('input[name="content"]').val();
        alert(contentData +  ' <- append this to the row the button click came from');
        $('.row.active').append(contentData);
        myApp.closeEditor();
        $('.row').removeClass('active');
    }
}

$('.add-row').on('click', myApp.appendRow);
$('.display-content').on('click', '.open-editor', myApp.openEditor);
$('.editor').on('click', '.send-to-content', myApp.sendContent);
$('.editor').on('click', '.close-editor', myApp.closeEditor);

FIDDLE

Upvotes: 2

Related Questions