如何在CodeIgniter中使用x-editable？

Question

我想了解在我的CodeIgniter第一个项目中使用x-editable。我试图阅读x可编辑的文档，但我也是JavaScript的初学者，所以我不明白

我做了简单的控制器从JavaScript收集数据，但我没有完成它或数据库中没有更新数据库。

$('#username').editable({ 
    type: 'text', 
    pk: 1, 
    url: '/post', 
    title: 'Enter username' 
}); 

如何在控制器或模型得到的数据提交给

我要处理的数据库更新查询通过从X编辑模型在数据库中更新提交的数据。

Answer 1

你可以按照这个简单的步骤 假设$用户id = 5; $ username =“admin”; 考虑你的HTML看起来像这样

<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> 

JavaScript代码写以下

$ .fn.editable.defaults.mode = '内联';

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'));  
} 

在控制器现场

<?php 
class 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; 
    } 
} 

你可以改变编辑模式，我已经设置内嵌只有

Answer 2

首先，这个问题是关于AJAX和JavaScript/jQuery，而不是Codeigniter。

基本上，您编写的代码是关于使用AJAX发布数据。首先，您需要创建一个控制器和模型，然后您可以使用AJAX发布数据。我加入一个示例代码：

Controller文件：

<?php 

defined('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(); 
    } 
} 

模型文件：

<?php 

defined('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文件文件：

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

查看文件的HTML部分：

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

查看文件的AJAX部分：

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