如何在 CodeIgniter 中使用 x-editable？

Question

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

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

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

如何在控制器或模型中获取提交的数据以处理数据库更新查询

我想将从 x-editable 提交的数据传递给模型以在数据库中更新它。

Answer 1

你可以按照这个简单的步骤 假设 $userId = 5 ; $用户名=“管理员”； 考虑你的 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 = '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'));    
}

在控制器站点中

<?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 发布数据。我正在添加一个示例代码：

控制器文件：

<?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(),
         });
      });
   });