0

So I was developing some crud application with CodeIgniter Framework. But I am facing issues while retrieving data from the database. I am getting a 404 Not Found error for the AJAX function. The function is where it should be but I can't seem to find why it's giving me an error.

Please find the following code for the files and let me know if I am doing anything wrong here.

package_view.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Package List</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.css">
</head>
<body>
<div class="container">
    <!-- Page Heading -->
    <div class="row">
        <div class="col-12">
            <div class="col-md-12">
                <h1>Package
                    <small>List</small>
                    <div class="float-right"><a href="javascript:void(0);" class="btn btn-primary" data-toggle="modal" data-target="#Modal_Add"><span class="fa fa-plus"></span> Add New</a></div>
                </h1>
            </div>

            <table class="table table-striped" id="mydata">
                <thead>
                    <tr>
                        <th>Package ID</th>
                        <th>Test Quantity</th>
                        <th>Price</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody id="show_data">

                </tbody>
            </table>
        </div>
    </div>

</div>

        <!-- MODAL ADD -->
            <form>
            <div class="modal fade" id="Modal_Add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add New Package</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">Test Quantity</label>
                            <div class="col-md-10">
                              <input type="text" name="test_quantity" id="test_quantity" class="form-control" placeholder="Test Quantity">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">Price</label>
                            <div class="col-md-10">
                              <input type="text" name="price" id="price" class="form-control" placeholder="Price">
                            </div>
                        </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" type="submit" id="btn_save" class="btn btn-primary">Save</button>
                  </div>
                </div>
              </div>
            </div>
            </form>
        <!--END MODAL ADD-->

        <!-- MODAL EDIT -->
        <form>
            <div class="modal fade" id="Modal_Edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Package</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">Package ID</label>
                            <div class="col-md-10">
                              <input type="text" name="pkg_id_edit" id="pkg_id_edit" class="form-control" placeholder="Package ID" readonly>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">Test Quantity</label>
                            <div class="col-md-10">
                              <input type="text" name="test_quantity_edit" id="test_quantity_edit" class="form-control" placeholder="Test Quantity">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-2 col-form-label">Price</label>
                            <div class="col-md-10">
                              <input type="text" name="price_edit" id="price_edit" class="form-control" placeholder="Price">
                            </div>
                        </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" type="submit" id="btn_update" class="btn btn-primary">Update</button>
                  </div>
                </div>
              </div>
            </div>
            </form>
        <!--END MODAL EDIT-->

        <!--MODAL DELETE-->
         <form>
            <div class="modal fade" id="Modal_Delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete Package</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                       <strong>Are you sure to delete this record?</strong>
                  </div>
                  <div class="modal-footer">
                    <input type="hidden" name="pkg_id_delete" id="pkg_id_delete" class="form-control">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    <button type="button" type="submit" id="btn_delete" class="btn btn-primary">Yes</button>
                  </div>
                </div>
              </div>
            </div>
            </form>
        <!--END MODAL DELETE-->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/dataTables.bootstrap4.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        show_package(); //call function show all package

        $('#mydata').dataTable();

        //function show all package
        function show_package(){
            $.ajax({
                type  : 'ajax',
                url   : '<?php echo site_url('Package/package_data')?>',
                async : true,
                dataType : 'json',
                success : function(data){
                    var html = '';
                    var i;
                    for(i=0; i<data.length; i++){
                        html += '<tr>'+
                                '<td>'+data[i].pkg_id+'</td>'+
                                '<td>'+data[i].test_quantity+'</td>'+
                                '<td>'+data[i].price+'</td>'+
                                '<td style="text-align:right;">'+
                                    '<a href="javascript:void(0);" class="btn btn-info btn-sm item_edit" data-pkg_id="'+data[i].pkg_id+'" data-test_quantity="'+data[i].test_quantity+'" data-price="'+data[i].price+'">Edit</a>'+' '+
                                    '<a href="javascript:void(0);" class="btn btn-danger btn-sm item_delete" data-pkg_id="'+data[i].pkg_id+'">Delete</a>'+
                                '</td>'+
                                '</tr>';
                    }
                    $('#show_data').html(html);
                }

            });
        }

        //Save package
        $('#btn_save').on('click',function(){
            var pkg_id = $('#pkg_id').val();
            var test_quantity = $('#test_quantity').val();
            var price = $('#price').val();
            $.ajax({
                type : "POST",
                url  : "<?php echo site_url('Package/save')?>",
                dataType : "JSON",
                data : {pkg_id:pkg_id , test_quantity:test_quantity, price:price},
                success: function(data){
                    $('[name="pkg_id"]').val("");
                    $('[name="test_quantity"]').val("");
                    $('[name="price"]').val("");
                    $('#Modal_Add').modal('hide');
                    show_package();
                }
            });
            return false;
        });

        //get data for update record
        $('#show_data').on('click','.item_edit',function(){
            var pkg_id = $(this).data('pkg_id');
            var test_quantity = $(this).data('test_quantity');
            var price = $(this).data('price');

            $('#Modal_Edit').modal('show');
            $('[name="pkg_id_edit"]').val(pkg_id);
            $('[name="test_quantity_edit"]').val(test_quantity);
            $('[name="price_edit"]').val(price);
        });

        //update record to database
         $('#btn_update').on('click',function(){
            var pkg_id = $('#pkg_id_edit').val();
            var test_quantity = $('#test_quantity_edit').val();
            var price        = $('#price_edit').val();
            $.ajax({
                type : "POST",
                url  : "<?php echo site_url('Package/update')?>",
                dataType : "JSON",
                data : {pkg_id:pkg_id , test_quantity:test_quantity, price:price},
                success: function(data){
                    $('[name="pkg_id_edit"]').val("");
                    $('[name="test_quantity_edit"]').val("");
                    $('[name="price_edit"]').val("");
                    $('#Modal_Edit').modal('hide');
                    show_package();
                }
            });
            return false;
        });

        //get data for delete record
        $('#show_data').on('click','.item_delete',function(){
            var pkg_id = $(this).data('pkg_id');

            $('#Modal_Delete').modal('show');
            $('[name="pkg_id_delete"]').val(pkg_id);
        });

        //delete record to database
         $('#btn_delete').on('click',function(){
            var pkg_id = $('#pkg_id_delete').val();
            $.ajax({
                type : "POST",
                url  : "<?php echo site_url('Package/delete')?>",
                dataType : "JSON",
                data : {pkg_id:pkg_id},
                success: function(data){
                    $('[name="pkg_id_delete"]').val("");
                    $('#Modal_Delete').modal('hide');
                    show_package();
                }
            });
            return false;
        });

    });

</script>
</body>
</html>

Packages.php

<?php
class Packages extends CI_Controller{
function __construct(){
    parent::__construct();
    $this->load->model('package_model');
}
function index(){
    $this->load->view('package_view');
}

function package_data(){
    $data=$this->package_model->package_list();
    echo json_encode($data);
}

function save(){
    $data=$this->package_model->save_package();
    echo json_encode($data);
}

function update(){
    $data=$this->package_model->update_package();
    echo json_encode($data);
}

function delete(){
    $data=$this->package_model->delete_package();
    echo json_encode($data);
}
}

and

package_model.php

<?php
class package_model extends CI_Model{

function package_list(){
    $hasil=$this->db->get('tblexampackages');
    return $hasil->result();
}

function save_package(){
    $data = array(
            'pkg_id'  => $this->input->post('pkg_id'), 
            'test_quantity'  => $this->input->post('test_quantity'), 
            'price' => $this->input->post('price'), 
        );
    $result=$this->db->insert('tblexampackages',$data);
    return $result;
}

function update_package(){
    $pkg_id=$this->input->post('pkg_id');
    $test_quantity=$this->input->post('test_quantity');
    $price=$this->input->post('price');

    $this->db->set('price', $price);
    $this->db->set('test_quantity', $test_quantity);
    $this->db->where('pkg_id', $pkg_id);
    $result=$this->db->update('tblexampackages');
    return $result;
}

function delete_package(){
    $pkg_id=$this->input->post('pkg_id');
    $this->db->where('pkg_id', $pkg_id);
    $result=$this->db->delete('tblexampackages');
    return $result;
}

}

Other files are autoload.php, config.php and database.php which are configured properly. Please tell me where I am going wrong here.

As for database, MySQL connectivity is good and the table named tblexampackages only has 3 Columns named pkg_id, test_quantity and price.

Thanks.

Improve this question

2 Answers 2

Reset to default
1

Your controller is Packages, you're trying to access Package... Edit this line from 

url   : '<?php echo site_url('Package/package_data')?>', //old

url   : "<?php echo site_url('Packages/package_data')?>" //new

After which, edit your package_list to something like this

$query = $this->db->get('tbl_name');
return $query->result_array();
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

That's a very very very dumb mistake. And thanks for notifying. It solved the problem however search Isn't working. Did you find any other mistake?
And pagination not working properly too. I know you solved the question you asked and I am grateful for that but can you please help me a bit more
I don't understand what u mean y search isn't working. In your ajax requests, always add a code to e executed if the call fails. after success, always add error(response){ console.log(response)} That is going to help us see the exact error
Thanks. I'll see what I can do. Appreciated.
0

in your Ajax function show_package() you have:

url   : '<?php echo site_url('Package/package_data')?>',

it should be

url   : '<?php echo site_url('Packages/package_data')?>',
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.