Problem with datepicker: Missing instance data

Question

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/

golddragon007 · Accepted Answer

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 = $('').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 = $('', document).attr({'class': 'myTable', 'id': 'myelement'});
    let tr = $('');
    keys.forEach(function(key) {
      tr.append($("').attr('id', 'myRows');
  myTableRows.forEach(function(val) {
    mykeys = Object.keys(val);
    //Set up the html row
    let tr = $('').attr('class', 'thisRow');
    for (var mykeys in val) {
      tr.append(
        $('").text(key));
    });
    table.append(tr);
  });
  let tbody = $('
').attr('class', 'normalBtn').text(val[mykeys])
      );
    }
    
    tr.append(
      $(' ').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;
    }

Problem with datepicker: Missing instance data

Answers (1)

Related Questions