Inline-Editing

by Florian Gropp

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<p>X-editable Bootstrap 3 popup</p>
<div style="margin: 150px">
  <a href="#" id="status" data-value="2"></a>
</div>

JavaScript

// `/list` emulation
$.mockjax({
  url: '/list',
  responseTime: 400,
  responseText: [{
      value: 1,
      text: 'status 1'
    },
    {
      value: 2,
      text: 'status 2'
    },
    {
      value: 3,
      text: 'status 3'
    }
  ]
});

// editable
$('#status').editable({
  type: 'select',
  url: '/post',
  pk: 1,
  placement: 'top',
  title: 'select status',
  source: '/list'
});


// `/post` emulation
$.mockjax({
  url: '/post',
  responseTime: 400,
  response: function(settings) {
    if (settings.data.value === '3') {
      this.status = 500;
      this.responseText = 'Validation error!';
    } else {
      this.responseText = '';
    }
  }
});