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

Question

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

Deep · Accepted Answer · 2016-07-22T17:48:36.753

0

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/

edited Jul 22 '16 at 17:48

answered Jul 22 '16 at 15:59

Deep

9,594
2
21
33

This is also useful thank you, but that wasn't my question . When i click on new cell , and after i enter the input values , this values are appended in the currently clicked cell and every other cell that is clicked before . I am somehow trying to populate the cell with currently generated ID . With your code the new input values are appended only in the firstly clicked cell . Check [here](https://jsfiddle.net/9zcj3ab8/24/) . – Nick N. Jul 22 '16 at 16:18
that behavior is happening because your calling id is local variable to click function, i have updated the answer. – Deep Jul 22 '16 at 17:47
One more question . How to save this to local storage and when the page is refreshed the input values are appear in the cell ? – Nick N. Aug 04 '16 at 22:20

score 0 · Answer 2 · answered Jul 22 '16 at 18:26

I don't know why this is happening but if you remove the attributes for what I think it's a bootstrap modal you get the desired behavior. I think is something related with you are referencing the modal with every cell you have clicked before, but removing the attributes it seems to work properly.

Update this in your code:

    $('#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');
      $(this).attr({ 'data-toggle': '', 'data-target': '', 'id': '' });
    });  /*save to td end */

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

2 Answers2