title: PHP AJAX CRUD Issue While Fetching Data
body: <p>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 <code>404 Not Found</code> 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.</p>
  
  <p>Please find the following code for the files and let me know if I am doing anything wrong here.</p>
  
  <blockquote>
    <p>package_view.php</p>
  </blockquote>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;title&gt;Package List&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;!-- Page Heading --&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-12"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;h1&gt;Package
                      &lt;small&gt;List&lt;/small&gt;
                      &lt;div class="float-right"&gt;&lt;a href="javascript:void(0);" class="btn btn-primary" data-toggle="modal" data-target="#Modal_Add"&gt;&lt;span class="fa fa-plus"&gt;&lt;/span&gt; Add New&lt;/a&gt;&lt;/div&gt;
                  &lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;table class="table table-striped" id="mydata"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Package ID&lt;/th&gt;
                          &lt;th&gt;Test Quantity&lt;/th&gt;
                          &lt;th&gt;Price&lt;/th&gt;
                          &lt;th style="text-align: right;"&gt;Actions&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody id="show_data"&gt;
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
          &lt;!-- MODAL ADD --&gt;
              &lt;form&gt;
              &lt;div class="modal fade" id="Modal_Add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
                &lt;div class="modal-dialog modal-lg" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                    &lt;div class="modal-header"&gt;
                      &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Add New Package&lt;/h5&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;
                          &lt;div class="form-group row"&gt;
                              &lt;label class="col-md-2 col-form-label"&gt;Test Quantity&lt;/label&gt;
                              &lt;div class="col-md-10"&gt;
                                &lt;input type="text" name="test_quantity" id="test_quantity" class="form-control" placeholder="Test Quantity"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group row"&gt;
                              &lt;label class="col-md-2 col-form-label"&gt;Price&lt;/label&gt;
                              &lt;div class="col-md-10"&gt;
                                &lt;input type="text" name="price" id="price" class="form-control" placeholder="Price"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;button type="button" type="submit" id="btn_save" class="btn btn-primary"&gt;Save&lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;/form&gt;
          &lt;!--END MODAL ADD--&gt;
  
          &lt;!-- MODAL EDIT --&gt;
          &lt;form&gt;
              &lt;div class="modal fade" id="Modal_Edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
                &lt;div class="modal-dialog modal-lg" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                    &lt;div class="modal-header"&gt;
                      &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Edit Package&lt;/h5&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;
                          &lt;div class="form-group row"&gt;
                              &lt;label class="col-md-2 col-form-label"&gt;Package ID&lt;/label&gt;
                              &lt;div class="col-md-10"&gt;
                                &lt;input type="text" name="pkg_id_edit" id="pkg_id_edit" class="form-control" placeholder="Package ID" readonly&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group row"&gt;
                              &lt;label class="col-md-2 col-form-label"&gt;Test Quantity&lt;/label&gt;
                              &lt;div class="col-md-10"&gt;
                                &lt;input type="text" name="test_quantity_edit" id="test_quantity_edit" class="form-control" placeholder="Test Quantity"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group row"&gt;
                              &lt;label class="col-md-2 col-form-label"&gt;Price&lt;/label&gt;
                              &lt;div class="col-md-10"&gt;
                                &lt;input type="text" name="price_edit" id="price_edit" class="form-control" placeholder="Price"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;button type="button" type="submit" id="btn_update" class="btn btn-primary"&gt;Update&lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;/form&gt;
          &lt;!--END MODAL EDIT--&gt;
  
          &lt;!--MODAL DELETE--&gt;
           &lt;form&gt;
              &lt;div class="modal fade" id="Modal_Delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
                &lt;div class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                    &lt;div class="modal-header"&gt;
                      &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Delete Package&lt;/h5&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;
                         &lt;strong&gt;Are you sure to delete this record?&lt;/strong&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                      &lt;input type="hidden" name="pkg_id_delete" id="pkg_id_delete" class="form-control"&gt;
                      &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;No&lt;/button&gt;
                      &lt;button type="button" type="submit" id="btn_delete" class="btn btn-primary"&gt;Yes&lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;/form&gt;
          &lt;!--END MODAL DELETE--&gt;
  
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/dataTables.bootstrap4.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          show_package(); //call function show all package
  
          $('#mydata').dataTable();
  
          //function show all package
          function show_package(){
              $.ajax({
                  type  : 'ajax',
                  url   : '&lt;?php echo site_url('Package/package_data')?&gt;',
                  async : true,
                  dataType : 'json',
                  success : function(data){
                      var html = '';
                      var i;
                      for(i=0; i&lt;data.length; i++){
                          html += '&lt;tr&gt;'+
                                  '&lt;td&gt;'+data[i].pkg_id+'&lt;/td&gt;'+
                                  '&lt;td&gt;'+data[i].test_quantity+'&lt;/td&gt;'+
                                  '&lt;td&gt;'+data[i].price+'&lt;/td&gt;'+
                                  '&lt;td style="text-align:right;"&gt;'+
                                      '&lt;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+'"&gt;Edit&lt;/a&gt;'+' '+
                                      '&lt;a href="javascript:void(0);" class="btn btn-danger btn-sm item_delete" data-pkg_id="'+data[i].pkg_id+'"&gt;Delete&lt;/a&gt;'+
                                  '&lt;/td&gt;'+
                                  '&lt;/tr&gt;';
                      }
                      $('#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  : "&lt;?php echo site_url('Package/save')?&gt;",
                  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  : "&lt;?php echo site_url('Package/update')?&gt;",
                  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  : "&lt;?php echo site_url('Package/delete')?&gt;",
                  dataType : "JSON",
                  data : {pkg_id:pkg_id},
                  success: function(data){
                      $('[name="pkg_id_delete"]').val("");
                      $('#Modal_Delete').modal('hide');
                      show_package();
                  }
              });
              return false;
          });
  
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>Packages.php</p>
  </blockquote>
  
  <pre><code>&lt;?php
  class Packages extends CI_Controller{
  function __construct(){
      parent::__construct();
      $this-&gt;load-&gt;model('package_model');
  }
  function index(){
      $this-&gt;load-&gt;view('package_view');
  }
  
  function package_data(){
      $data=$this-&gt;package_model-&gt;package_list();
      echo json_encode($data);
  }
  
  function save(){
      $data=$this-&gt;package_model-&gt;save_package();
      echo json_encode($data);
  }
  
  function update(){
      $data=$this-&gt;package_model-&gt;update_package();
      echo json_encode($data);
  }
  
  function delete(){
      $data=$this-&gt;package_model-&gt;delete_package();
      echo json_encode($data);
  }
  }
  </code></pre>
  
  <p>and </p>
  
  <blockquote>
    <p>package_model.php</p>
  </blockquote>
  
  <pre><code>&lt;?php
  class package_model extends CI_Model{
  
  function package_list(){
      $hasil=$this-&gt;db-&gt;get('tblexampackages');
      return $hasil-&gt;result();
  }
  
  function save_package(){
      $data = array(
              'pkg_id'  =&gt; $this-&gt;input-&gt;post('pkg_id'), 
              'test_quantity'  =&gt; $this-&gt;input-&gt;post('test_quantity'), 
              'price' =&gt; $this-&gt;input-&gt;post('price'), 
          );
      $result=$this-&gt;db-&gt;insert('tblexampackages',$data);
      return $result;
  }
  
  function update_package(){
      $pkg_id=$this-&gt;input-&gt;post('pkg_id');
      $test_quantity=$this-&gt;input-&gt;post('test_quantity');
      $price=$this-&gt;input-&gt;post('price');
  
      $this-&gt;db-&gt;set('price', $price);
      $this-&gt;db-&gt;set('test_quantity', $test_quantity);
      $this-&gt;db-&gt;where('pkg_id', $pkg_id);
      $result=$this-&gt;db-&gt;update('tblexampackages');
      return $result;
  }
  
  function delete_package(){
      $pkg_id=$this-&gt;input-&gt;post('pkg_id');
      $this-&gt;db-&gt;where('pkg_id', $pkg_id);
      $result=$this-&gt;db-&gt;delete('tblexampackages');
      return $result;
  }
  
  }
  </code></pre>
  
  <p>Other files are <code>autoload.php</code>, <code>config.php</code> and <code>database.php</code> which are configured properly. Please tell me where I am going wrong here.</p>
  
  <p>As for database, MySQL connectivity is good and the table named <code>tblexampackages</code> only has 3 Columns named <code>pkg_id</code>, <code>test_quantity</code> and <code>price</code>.</p>
  
  <p>Thanks.</p>