Ajax trong CodeIgniter 3x

Bài này mình hướng dẫn các bạn sử dụng Ajax trong CodeIgniter 3x với mục đích update số thứ tự, hiển thị mà không cần tải lại trang
  • 11:12 09/10/2016
  • Kỳ Nhân
  • 1 Bình luận
  • 1054

- Trong bài này mình hướng dẫn các bạn sử dụng Ajax trong CodeIgniter 3x để thực hiện 2 hành động là update số thứ tự và hiển thị ẩn hiện trong source code. Từ đây các bạn có thể phát triển những phần cao hơn.

Đầu tiên là phần update số thứ tự đã. ( vẫn là phần xây dựng groups nha các bạn )

Tại assets/admin/js/admin.js ta sửa thành

$(document).ready(function() {
    $('.stt').blur(function(){
        var id = $(this).attr('data-id');
        var stt = $(this).val();
        var url = $(this).attr('data-url');
        if($.isNumeric(stt)==true) { 
            $.ajax({
                url: url,
                type: "POST",
                data: {'id': id, 'stt': stt},    
                dataType: "json",
            })
        }
        else { 
            alert('Nhập số');
            $(this).focus();
        }
    });
});

Tại application/views/admin/groups/list.php tại input hiển thị số thứ tự ta sửa thành

<input type="text" value="<?=$item->stt?>" class="stt w50" data-url="<?=base_url('admin/groups/stt')?>" data-id="<?=$item->id?>">

Ở đây mình thêm 2 thuộc tính là data-url và data-id, để lấy url đẩy ajax và id để đẩy biến qua. Như code file admin.js trên mình lấy url, id, stt rồi đẩy bằng Ajax qua thôi.

Kế tiếp là phần xử lý. Phần này hoàn toàn giống khi bạn tạo function thêm, xóa, sửa, cái khác là bạn đẫy link bằng ajax chứ không phải link trên url thôi.

Vào application/controllers/admin/Groups.php tạo function tên stt với nội dung

public function stt() {
        $id = $this->input->post('id');
        $model = array(
            'stt' => $this->input->post('stt'),
        );
        if($id !== null) {    
            $this->db->update('groups', $model, array('id' => $id));
        } 
    }

Vậy phần xử lý Ajax cho số thự tự đã xong. Đơn giản phải không các bạn? Giờ ta làm tới phần hiển thị bằng Ajax. Các bước làm cũng như trên.

Tại assets/admin/js/admin.js ta thêm dòng

$('.a-hide span').click(function(){
        var id = $(this).attr('data-id');
        var hide = $(this).attr('data-hide');
        var url = $(this).attr('data-url');
        $.ajax({
            url: url,
            type: "POST",
            data: {'id': id, 'hide': hide},    
            dataType: "json",
            success:function(data){
                if(data.hide==1) {
                    $('.a-hide .hide0'+id).addClass('hide');
                    $('.a-hide .hide1'+id).removeClass('hide');
                }
                else {
                    $('.a-hide .hide1'+id).addClass('hide');
                    $('.a-hide .hide0'+id).removeClass('hide');
                }
            }
        })
    });

Tại application/views/admin/groups/list.php ta sửa chỗ td class a-hide thành

<span class="glyphicon glyphicon-ok-circle iconfa-show hide1<?=$item->id?> <?php if($item->hide==0) echo 'hide'; ?>" data-id="<?=$item->id?>" data-hide="0" data-url="<?=base_url('admin/groups/hide')?>"></span>
<span class="glyphicon glyphicon-remove-circle iconfa-hide hide0<?=$item->id?> <?php if($item->hide==1) echo 'hide'; ?>" data-id="<?=$item->id?>" data-hide="1" data-url="<?=base_url('admin/groups/hide')?>"></span>

Như code trên ta truyền vào 3 biến là data-url, data-hide, data-id để xử lý trong file admin.js ở trên.

Kế tiếp vào application/controllers/admin/Groups.php tạo function tên hide với nội dung

public function hide() {
        $id = $this->input->post('id');
        $model = array(
            'hide' => $this->input->post('hide'),
        );
        if($id !== null) {    
            $this->db->update('groups', $model, array('id' => $id));
            $output = array(
                'hide' => $model['hide'],
            );
            $this->output->set_content_type('application/json')->set_output(json_encode($output));
        } 
    }

Phần Ajax gọi dữ liệu theo json nên khi trả về phải kiểu json. Như vậy sau vài bước, update hiển thị bằng Ajax cũng đã hoàn thành. Đây là những ứng dụng Ajax căn bản đễ các bạn có thể hiểu biết và xây dựng các tính năng cần Ajax sau này, nói chung là hoàn toàn giống nhau thôi, quan trọng bạn cần gửi dữ liệu gì? xử lý sao, trả về như thế nào thôi.