Nick N. Nick N. - 4 months ago 8
jQuery Question

How to append element in the curently clicked table element from popup form?

So I have made a table table elements and functions for the pop up and the form. Appending element on clicking save button also works. However on a new popup the data from the form is appended in every previously clicked table cell no matter if the cell is full or empty.I am somehow trying to populate the cell with currently generated ID . Considering the fact that I me new at JavaScript I am totally missing something Can someone give me idea what is that. The Code

//================ADDs POPUP ON CLICK================/
$(document).ready(function () {
/*Adding the klikanje class to td*/
$('table tbody tr:not(:first) td').addClass('klikanje');
/*removing the klikanje class from the first column*/
$('table tr:first-child, table td:first-child').removeClass('klikanje');
/*removing the klikanje class from the first row*/
$('table tbody tr:first-child td').removeClass('klikanje');
/*Making random id*/

/*appending data atributs to empty td*/
$('.klikanje').click(function(){
var self = $(this);
if ($(this).is(':empty')) {
var idBase = 'clickId-';
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var idNumber = getRandomInt(1, 1000000);
var clickID = idBase + idNumber
var callingID = '#' + clickID;
$(this).attr({ 'data-toggle': 'modal', 'data-target': '#popUp', 'id': clickID });

/*save to td */
$('#save').click(function () {
var theName = $('input[name=name]').val();
var theLastName = $('input[name=lastname]').val();
var $fullCell = $('<p>' + theName + '' + theLastName + '</p>');
if((theLastName+theLastName).length > 0){
$(callingID).append($fullCell);
$(callingID).css('background-color', 'yellow');

}

}); /*save to td end */



} else {
alert('Already taken spot. Please pick another one!');
$(this).attr({ 'data-toggle': '', 'data-target': '', 'id': '' });
}

});



});//<---ADDs POPUP ON CLICK END


Full code : JsFiddle

Answer

You need to just empty the fields after saving the value because same popup html is used again and again and value once entered in the input elements will stay there until manually cleared.

Use below code.

 var callingID = "";        
$('.klikanje').click(function(){
    var self = $(this);
    if ($(this).is(':empty')) {
        var idBase = 'clickId-';
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }
        var idNumber = getRandomInt(1, 1000000);
        var clickID = idBase + idNumber
        callingID = '#' + clickID;
        $(this).attr({ 'data-toggle': 'modal', 'data-target': '#popUp', 'id': clickID });

updated fiddle : https://jsfiddle.net/9zcj3ab8/27/

Comments