How to add AJAX to load my data from database using CodeIgniter

Question

How can to add some ajax to load my view part? I'm done already with the delete/add and update Ajax.

Now I don't know how to load the data without refreshing the browser. Every time I do the delete/add and update I need to refresh my browser first to see the result. I know it will solve the problem by having auto load data from database without refreshing the browser.

Model

public function getManufacturerRecord(){ //view data
    $this->db->select('*')
             ->from('manufacturer');
    $query = $this->db->get();
    return $result = $query->result();
}

Controller

public function manufacturer_list(){
    if($this->session->userdata('is_logged_in')){

        $result['data'] = $this->manufacturer_model->getManufacturerRecord();

        $this->load->view('../template/header');
        $this->load->view('manufacturer', $result);
        $this->load->view('../template/footer');
    } else {
        redirect('main/restricted');
    }
}

View

<div id="navscroll">
    <table class="table-condensed table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>Manufacturer</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php if(!empty($data)): 
            foreach($data as $row) { ?>
            <tr>
                <td><?=$row->id;?></td>
                <td><?=$row->brand;?></td>
            </tr>
            <?php } else : ?>
            <tr>No Records Found!</tr>
            <?php endif; ?>
        </tbody>
    </table>
</div>
</div>

Can you come to the chat. I wish to solve your problem but I need more information about your work. click the link chat.stackoverflow.com/rooms/137124/codeigniter — user5139148
– user5139148, Commented Mar 6, 2017 at 13:09

score 2 · Accepted Answer · 2017-03-09 05:54:09Z

2

Following code will help you to sort your problem

Few Changes in View Page

add table id as id="manu-table" and in anchor() function and replace it as follow

<?=anchor("manufacturer/delete/{$row->id}","Delete", array('class'=>'btnDelete', 'data-id' => $row->id))?>

For Add Function

Replace your existion form_open() function as bellow

<?=form_open('manufacturer/add',array('id' => 'manifu_add_form'));?>

and submit function as follow

<?=form_button(['content'=>'Save', 'type' => 'submit', 'class'=>'btn btn-primary', 'id'=>'btnSubmit'])?>

Add Ajax Script

var site_url = "http://localhost/ci_attl/manufacturer/";
$("#manifu_add_form").submit(function(e){ 
    e.preventDefault(); 
    var manufacturer = $("#manufacturer").val(); 
    $.ajax({ 
        url: $(this).attr('action'), 
        method: "POST", 
        data: { manufacturer : manufacturer }, 
        success: function(data){ 
        console.log(data); 
        var obj = $.parseJSON(data); 
        if(obj.status == 'success') 
        { 
            var append = "<tr id='row-"+obj.last_id+"'><td>"+obj.last_id+"</td><td>"+manufacturer+"</td><td><a data-toggle='modal' href='#update"+obj.last_id+"'>Update</a>| <a href='"+site_url+obj.last_id+"'>Delete</a></td></tr>";
            console.log(append);
            $("#manu-table tbody").append(append); 
            $('#manifu_add_form')[0].reset(); 
        } 
        $("div.result").html(obj.msg); 
        }, 
        error:function(a,b,c) 
        { 
            alert(c); 
        } 
    }); 
});

For Delete Function

change your anchor() as follow

<?=anchor("manufacturer/delete/{$row->id}","Delete", array('class'=>'btnDelete', 'data-id' => $row->id))?>

and delete Ajax as follow

$('.btnDelete').click(function(){ //delete data 
    var a_href = $(this).attr('href'); 
    var id = $(this).data('id'); 
    $.ajax({ 
        type: "GET", 
        url: a_href, 
        success: function(data){ 
            $("#row-"+id).slideUp(); 
            $("div.result").html(data); 
        }, 
        error:function(a,b,c){ 
            console.log(c); 
        } 
    }); 
    return false 
});

Hope this will solve your issue

edited Mar 9, 2017 at 5:54

answered Mar 6, 2017 at 15:50

user5139148

Sign up to request clarification or add additional context in comments.

3 Comments

halfer Over a year ago

This is very helpful, but why is the JavaScript not indented? I was going to +1, but this is not teaching good practice!

user5139148 Over a year ago

@halfer I solve this in chat.stackoverflow.webpage. So I paste the code directly from there it self. That's why i t not indent the code. Hope you know that, in chat code formatting will be removed and contents will rearrange to same alignments. I agree with what you have said. Now I correct the code.

halfer Over a year ago

I don't agree that is a reason for pasting it unindented here, but thank you for repairing it.

akshay khairmode · Accepted Answer · 2017-03-06 14:16:39Z

0

Why not use a redirect to that page after the delete,update,add.

with route:

$route['temp'] = 'controller/function';

redirect(base_url('temp'));

without route:

redirect(base_url('controller/function'));

answered Mar 6, 2017 at 14:16

akshay khairmode

718 bronze badges

Collectives™ on Stack Overflow

How to add AJAX to load my data from database using CodeIgniter

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related