X-editable custom parameters demo dynamic table

click on a day number to make it editable, click again to edit value https://github.com/vitalets/x-editable/issues/768

by Jason Chiang

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<h3>X-editable custom parameters demo dynamic table</h3>
<h5>click on a day number to make it editable, click again to edit value</h5>
<div style="margin: 10px 0px 0px 150px">
  templatesddl id: <input type="text" id="templatesddl" value="templatesddl_12345"><br>
    <table border=1px id="tm">
        <tr><td colspan="7">Editable Calendar Demo</td></tr>
    </table>
</div>
<div>
  <textarea id="console" class="form-control" autocomplete="off">
  </textarea>
</div>

CSS

.form-control {
  margin: 5px;
  display: block;
  width: 100%;
  height: 500px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  border: 1px solid #cccccc;
  width: 70%;
}

JavaScript

//create empty table
for (i = 0; i < 6; i++) {
  $('#tm').find('tbody').append($('<tr>'));
  for (x = 0; x < 7; x++) {
    $('#tm tr:last').append($('<td>')
      .append($('<a>'+(i*7+x)+'</a>') //add for day number
      .attr('class','editable') //add for testing
      .attr('data-name',"week"+i+"_day"+x) //add for day number in attrib:data-name
      .attr('data-title', 'Enter Ritnumber')
      .attr('data-type', 'text')
      .attr('data-pk', 0)
      .attr('data-url', '/UrenModule/OnlineRitplanning/template/AjaxUpdateTemplate')));
  }
}
abc="";
$(document).delegate('#tm td a', 'click', function() {
  var tempID = $('#templatesddl').val();
  var day = $(this).parent().index();

  if ($(this).hasClass('editable')) {
    $(this).editable({
      params: function(params) { //params already contain `name`, `value` and `pk`
        var data = {};
        data['id'] = params.pk;
        data[params.name] = params.value;
       abc=params; 
        data['day'] = day;
        data['tempid'] = tempID;
        return data;
      }
    });
  } else {

  }

});


//ajax emulation. Simulate 400ms delay.
$.mockjax({
    url: '/post',
    responseTime: 400,
    response: function(settings) {
           this.responseText = '';  
           log(settings, this);
    }
}); 

//ajax emulation. Simulate 400ms delay.
$.mockjax({
    url: '/UrenModule/OnlineRitplanning/template/AjaxUpdateTemplate',
    responseTime: 400,
    response: function(settings) {
           this.responseText = '';  
           log(settings, this);
    }
}); 
// mock-ajax console log
function log(settings, response) {
  var s = [], str;
  s.push(settings.type.toUpperCase() + ' url = "' + settings.url + '"');
  for(var a in settings.data) {
    if(settings.data[a] && typeof settings.data[a] === 'object') {
      str = [];
      for(var j in settings.data[a]) {str.push(j+': "'+settings.data[a][j]+'"');}
        str = '{ '+str.join(', ')+' }';
      } else {
        str = '"'+settings.data[a]+'"';
      }
    ...