How to use x-editable with CodeIgniter?

You can follow this simple steps Assume that $userId = 5 ; $username = "admin";Consider you html look like this

<a type="text" name="username" onclick="setEditable(this);" data-pk="<?php echo $userId ;?>" data-placeholder="Enter Username" data-name="username" data-type="text" data-url="<?php echo site_url();?>user/updateUserName" data-value="<?php echo $username ;?>" data-prev="admin"  data-title="Enter Username"><?php $username; ?></a>

In Javascript code write following

$.fn.editable.defaults.mode = 'inline';

function setEditable(obj) {    $(obj).editable({        emptytext: $(obj).attr('data-value'),        toggle: 'dblclick',        mode: 'inline',        anim: 200,        onblur: 'cancel',        validate: function(value) {            /*Add Ur validation logic and message here*/            if ($.trim(value) == '') {                return 'Username is required!';            }        },        params: function(params) {            /*originally params contain pk, name and value you can pass extra parameters from here if required */            //eg . params.active="false";            return params;        },        success: function(response, newValue) {            var result = $.parseJSON(response);            $(obj).parent().parent().find('.edit-box').show();            $(obj).attr('data-value', result.username);            $(obj).attr('data-prev', result.username);        },        error: function(response, newValue) {            $(obj).parent().parent().find('.edit-box').hide();            if (!response.success) {                return 'Service unavailable. Please try later.';            } else {                return response.msg;            }        },        display: function(value) {            /*If you want to truncate*/            var strName = strname !== '' ? strname : $(obj).attr('data-value');            var shortText = '';            if (strName.length > 16)            {                shortText = jQuery.trim(strName).substring(0, 14).split("").slice(0, -1).join("") + "...";            }            else {                shortText = strName;            }            $(this).text(shortText);        }    });    $(obj).editable('option', 'value', $(obj).attr('data-value'));    }

In Controller site

<?phpclass User extends CI_Controller{    function __construct()    {        parent::__construct();    }    function updateUserName()    {        $this->load->model('user_model');        if ($this->input->is_ajax_request()) {            $valueStr = $this->input->get_post('value') ? $this->input->get_post('value') : '';            $new_nameStr = trim($valueStr);            $result_arr['username'] = $new_nameStr;            $userId = $this->input->get_post('pk') ? $this->input->get_post('pk') : '';            $data['username'] = $new_nameStr;            $result_arr['username'] = $new_nameStr;            $this->user_model->userUpdateFunction($data, $userId);        }        echo json_encode($result_arr);        exit;    }}

You can change editable mode , i have set inline only

First of all, this question is about AJAX and JavaScript/jQuery, not Codeigniter.

Basically, the code that you wrote is about posting data with AJAX. First, you need to create a controller and model, then you can post data with AJAX. I'm adding a sample code:

Controller file:

<?phpdefined('BASEPATH') OR exit('No direct script access allowed');class Sample extends CI_Controller {   function __construct() {        parent::__construct();        $this ->load ->model('modelfolder/sample_model');      }   public function index() {      $this->sample_model->sampleFunction();   }}

Model File:

<?phpdefined('BASEPATH') OR exit('No direct script access allowed');class Sample_model extends CI_Model {   function sampleFunction() {      $data = array('fieldName' => $this->input->post('userName', TRUE));      $this->db->where('id', $this->input->post('userId', TRUE));      $this->db->update('tableName', $data);      return true;   }}

routes.php File:

$route['demoPost'] = 'controller_folder/sample';

View File's HTML part:

<form id="sampleForm"> <input type="text" name="userId" /> <input type="text" name="userName" /></form>

View File's AJAX part:

$(document).ready(function(){      $("#sampleForm").submit(            function(){          $.ajax({          type: "POST",          url: "<?php echo site_url('demoPost'); ?>",          data: $("#sampleForm").serialize(),         });      });   });