1

I have a dynamic HTML table created using json data. I want to create an extra column for datapicker plugin. My requirement is that when I click on a particular datapicker cell for the corresponding row, an input field should be created in that cell. When this input is clicked, the datapicker for this particular row should be invoked. I should be able to pick-up the date of my choice from the inline calender(this functionality is provided by the datapicker).In my case this date pick-up is not happening, rather this error is appearing: Uncaught Missing instance data for this datepicker This is the jsfiddle link to the code: https://jsfiddle.net/0akqg9b8/3/

<html>

  <head>
    <meta content="text/javascript; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script>
    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

  </head>

  <body>
    <div id="container">
      <p class="message box"></p>
    </div>
    <style>
      #myelement {
      width: 80%;
      margin: auto;
      border: 0.06em solid #999;
      border-spacing: 0.3em;
      box-shadow: 0.7em 0.7em 0.7em #999;
      background: #a1deee;
    }
    #myelement tr{
       color: blue;
    }
    #myelement td {
      width: 10%;
      padding: 0.5em;
      border: 0.1em solid #000;
      font-size: 15px;
      text-align: center;
      cursor: pointer;
      }
    button {
      width: 10%;
      padding: 0.5em;
      border: 0.1em solid #000;
      font-size: 15px;
      text-align: center;
      cursor: pointer;
      }
    button:hover {
      background-color: #0F5897;
      border: 1px solid #0F5897;
    }
    </style>

    <script>
 var keys;
    var myValue;
    var myVar;
    var myTableRows = [];
    var html;
    var table;
    var c;
    var myRow;
    var myCol;


json = [{
    ShipperID: 1,
    CompanyName: "Federal Package",
    Phone: "(503) 555-9931"
  },
  {
    ShipperID: 2,
    CompanyName: "United Package",
    Phone: "(503) 655-7865"
  },
  {
    ShipperID: 3,
    CompanyName: "My Package",
    Phone: "(508) 955-8997"
  }
];


getMyData();

function getMyData() {
  let myData = json[0];
  let myTablehead = [];
  myTablehead.push(myData);
  html = '';
  for (let i = 0; i < json.length; i++) {
    myTableRows.push(json[i])
  }
  myTablehead.forEach(function(val) {
    keys = Object.keys(val);
    //html table starts here
    html += "<table class='myTable' id=\"myelement\">"
    html += "<tr>";
    keys.forEach(function(key) {
      html += "<th>" + key + "</th>";
    });
    html += "";
    html += "</tr>";
  });
  myTableRows.forEach(function(val) {
    mykeys = Object.keys(val);
    //Set up the html row
    html += "<tbody id=\"myRows\">"
    html += "<tr class=\"thisRow\">"
    for (var mykeys in val) {
      myValue = val[mykeys];
      html += "<td class='normalBtn'>"
      html += myValue;
      html += "</td>";
    }

    html += "<td class=\"dateBtn\">"
    html += "Enter Date:";
    html += "<input type = \"text\" class='datepicker-1'>"
    html += "</td>";

    html += "</tr>";
  });

  html += "</tbody>"
  html += "</table>";
  document.getElementsByClassName('message')[0].innerHTML += html;
}

$(".dateBtn").on('click','input',function(){
    $("input").remove('.datepicker-1');
})

$.fn.timeline = function() {
  return this.click(function(){
    var myinput = "<input type = \"text\" class='datepicker-1' val=''></input>";
     $(this).append(myinput);
     var dataInstance = $( ".datepicker-1" ).datepicker();
     $("input:text").val(function(n){
          return dataInstance;
     });
  })
}

$(".dateBtn" ).timeline();

    </script>
  </body>
</html>
5
  • I think you have some browser cache/incompatibility issues. For me, there's no error, but into the field [object Object] will be written and when I selecting a date from the picker nothing happening... And if I click to one of the fields, all the other fields going to be missing (removed). Mar 7, 2020 at 16:09
  • In my case, same error appears in all the browsers: Chrome, Firefox and Microsoft Edge. Something strange, in case of chrome, the date is duly picked for third row datapicker only, for the top two, this particular error appears... And if I click to one of the fields, none ofl the other fields going to be missing /removed.
    – H Dhindsa
    Mar 7, 2020 at 16:32
  • Ahh this error happening when I try to select a date from the picker. Mar 7, 2020 at 16:35
  • golddragon007 Kindly suggest some solution to this problem...
    – H Dhindsa
    Mar 7, 2020 at 16:43
  • I made a working one where you can select for every row a date with the picker. Mar 7, 2020 at 17:10

1 Answer 1

2

I did some changes in the code, because there was a lot of not really needed part.

var keys;
    var myValue;
    var myVar;
    var myTableRows = [];
    var c;
    var myRow;
    var myCol;


json = [{
    ShipperID: 1,
    CompanyName: "Federal Package",
    Phone: "(503) 555-9931"
  },
  {
    ShipperID: 2,
    CompanyName: "United Package",
    Phone: "(503) 655-7865"
  },
  {
    ShipperID: 3,
    CompanyName: "My Package",
    Phone: "(508) 955-8997"
  }
];


getMyData();

function generateDateInput() {
  let input = $('<input>').attr({'type': 'text', 'class': 'datepicker-1'});
  input.datepicker();
  input.on('focus', function() {
    // The datepopup activates by the focus, not by the click.
    // So let's remove every input which is not in focus.
    $('.myTable input:not(:focus())').remove();
  }).on('click', function(event) {
    // This needed to stop bubbling effect down to the tr.
    event.stopPropagation();
  });
  
  return input;
}

function getMyData() {
  let myData = json[0];
  let myTablehead = [];
  myTablehead.push(myData);
  let table = '';
  for (let i = 0; i < json.length; i++) {
    myTableRows.push(json[i])
  }
  myTablehead.forEach(function(val) {
    keys = Object.keys(val);
    //html table starts here
    table = $('<table>', document).attr({'class': 'myTable', 'id': 'myelement'});
    let tr = $('<tr>');
    keys.forEach(function(key) {
      tr.append($("<th>").text(key));
    });
    table.append(tr);
  });
  let tbody = $('<tbody>').attr('id', 'myRows');
  myTableRows.forEach(function(val) {
    mykeys = Object.keys(val);
    //Set up the html row
    let tr = $('<tr>').attr('class', 'thisRow');
    for (var mykeys in val) {
      tr.append(
        $('<td>').attr('class', 'normalBtn').text(val[mykeys])
      );
    }
    
    tr.append(
      $('<td>').attr('class', 'dateBtn').text('Enter Date:').append(generateDateInput())
    ).on('click', function() {
      $('td:eq(3)', this).append(generateDateInput());
      // After append we set the focus to the input field from the current row. This
      // will only work in the current form until there's only one input field.
      $('input', this).focus();
    });
    
    tbody.append(tr);
  });
  table.append(tbody);
  $('#container').append(table);
}
#myelement {
      width: 80%;
      margin: auto;
      border: 0.06em solid #999;
      border-spacing: 0.3em;
      box-shadow: 0.7em 0.7em 0.7em #999;
      background: #a1deee;
    }
    #myelement td {
      width: 10%;
      padding: 0.5em;
      border: 0.1em solid #000;
      font-size: 15px;
      text-align: center;
      cursor: pointer;
      }
    button {
      width: 10%;
      padding: 0.5em;
      border: 0.1em solid #000;
      font-size: 15px;
      text-align: center;
      cursor: pointer;
      }
    button:hover {
      background-color: #0F5897;
      border: 1px solid #0F5897;
    }
<html>

  <head>
    <meta content="text/javascript; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script>
    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>

    
  </head>

  <body>
    <div id="container">
      <p class="message box"></p>
    </div>
  </body>
</html>

5
  • Ahaa ! It is elegant and smooth ! Now I'm trying to remove input element after the date vaue is picked...
    – H Dhindsa
    Mar 7, 2020 at 18:43
  • ahh, so that wasn't a bug, I thought it is :D let me edit my response :D Mar 8, 2020 at 14:06
  • @HDhindsa now I think I included everything which was existing previously, but the popup works. Mar 8, 2020 at 14:45
  • @golddragon007I'm still not able to save my previous cell date as I move on to another cell in next row
    – H Dhindsa
    Mar 15, 2020 at 11:45
  • I suppose my original construct was well placed to handle the problem in a non-complex way... Albeit with some little changes along with "event delegation". I can provide the solution if someone needs...
    – H Dhindsa
    Mar 16, 2020 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.