AJAX function call on submit button not working in PHP CodeIgniter

Question

I'm working on CI project, in that I'm loading data from database in datatables and applying filters on that datatable. When I'm selecting a value from drop-down listbox and click on filter button, it filters data, but the value from dropdown list box get reset. For that I'm trying to load data using AJAX function, but my AJAX call not working on button click event.

Here is my Code:

Controller:

public function index()
{
    $user = $this->ion_auth->user()->row();
    $data['username'] = $user->username;

    $data['user_id'] = $user->id;
    $user_id = $user->id;
    $data['groupId'] = $this->l->groupId($user_id);
    $data['group'] = $data['groupId']['0']->group_id;
    //$propId = $this->input->post('property_id');
    $propertyType=$this->input->post('property_type');
    $area=$this->input->post('area_id');
    $stageId=$this->input->post('property_status');

    $clustersID['cluster']=$this->input->post('cluster_id');

    if(!empty($clustersID['cluster'])){
      // Array contains values, everything ok
      $clusterString = implode(',', $clustersID['cluster']);
    } else {
      // Array is empty
      $clusterString = 0;
    }

    if ($propertyType =='') {
        $propertyType=0;
    }
    if( $area ==''){
        $area =0;
    }
    if($clusterString == ''){
        $clusterString=0;
    }
    if ($stageId == '') {
        if($data['group']==1)
        {
            $stageId=0;
        } else {
            $stageId=4;
        }
    }
    $propDetail = $this->input->post('propDetail');

    $data['areas'] = $this->p->area();
    $data['clusters'] = $this->p->cluster();
    $data['property_stage'] = $this->p->selectPropertyStage();
    //$data['clusters'] = $this->p->clusterAll($area);
    $data['title'] = 'Property List';
    $data['property_type'] = $this->p->selectPropertyType();
    $data['properties'] = $this->p->getPropertyByAreaCluster($propertyType, $area, $clusterString, $stageId);

    $data['property'] = json_encode($data['properties']);

    $data['prop'] = json_decode($data['property']);

    //$data['props'] = $this->p->PropView($propId);
    $this->load->view('template/header', $data);
    $this->load->view('Property/property_view', $data);
    $this->load->view('template/footer');
}

Model:

public function getPropertyByAreaCluster($propertyType, $area, $clusterString, $stageId)
{
    $query = $this->db->query("call fetch_propertyType_Area_Cluster_Stage($propertyType,$area,'$clusterString',$stageId)");
    if ($query) {
        $data = $query->result();
        $query->next_result(); 
        $query->free_result();
        return $data;
    }else{
        return false;
    }
}

View:

    <div class="row" id="refresh">
    <div class="col-md-12">
        <div class="panel panel-default">
        <div class="panel-body">
            <div style="padding-left: 10px;">
  <form class="form-inline" action="" method="POST">
        <div class="form-group">
        <label>Area:</label>
            <select class="form-control select2 country" name="area_id" id="areaId">
            <option value="0">All</option>
            <?php foreach ($areas as $area) { ?>
            <option value="<?php echo $area->area_id; ?>"><?php echo $area->area_name; ?></option>
            <?php } ?>                     
            </select>
        </div>
        <div class="form-group">&nbsp;&nbsp;</div>
        <div class="form-group">
        <label>Cluster:</label>
            <select class="form-control select2" name="cluster_id[]" id="cluster_id" multiple="multiple">
            <option value="0">All</option>
            <?php foreach ($clusters as $cluster){ ?>
            <option value="<?php echo $cluster->cluster_id; ?>"><?php echo $cluster->cluster_name; ?></option>
            <?php } ?>
            </select>
        </div>
        <div class="form-group">&nbsp;&nbsp;</div>
        <div class="form-group">
            <label>Property Type:</label>
              <select class="form-control select2" name="property_type" id="property_type">
                <option value="0">All</option>
                <?php if ($property_type) { foreach ($property_type as $type) {?>
                <option value="<?= $type->property_type_id; ?>"><?= $type->property_type_name;?></option>
                <?php }} ?>
              </select> 
          </div> 
          <div class="form-group">&nbsp;&nbsp;</div>
          <div class="form-group">
            <label class="control-label">Stage:</label>
               <select class="form-control select2" name="property_status" id="property_status">
               <option value="0">All</option>   
               <?php foreach ($property_stage as $stage) { ?>  
               <option value="<?= $stage->stage_id; ?>"><?= $stage->stage_name; ?></option>
               <?php } ?>
              </select>
        </div> 
            <div class="form-group">&nbsp;&nbsp;</div>          
            <button type="submit" onclick="showmore()" class="btn btn-primary">Filter</button>
            <div class="form-group">&nbsp;&nbsp;</div>

  </form>
        <div>&nbsp;</div>
        <div class="content">

<table id="example1" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Code</th>
      <th>Date</th>
      <th>Type</th>
      <th>ASYS</th>
      <th>Address1</th>
      <th>City</th>
      <th>Status</th>
      <th>Landlord</th>
      <th>Rooms</th>
      <th>Edit</th>
      <th>Action</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Code</th>
      <th>Date</th>
      <th>Type</th>
      <th>ASYS No</th>
      <th>Address1</th>
      <th>City</th>
      <th>Status</th>
      <th>Landlord</th>
      <th>Rooms</th>
      <th>Edit</th>
      <th>Action</th>
    </tr>
  </tfoot>
  <tbody>
    <?php if( $prop ) { foreach ($prop as $property) { ?>
    <tr>
      <td>
        <i>
          <a href="<?= base_url('Property/propModel/'.$property->property_id);?>" data-toggle="modal" data-target="#myModal">
            <?= $property->property_code; ?>
          </a>
        </i>
      </td>
      <td><?= $property->property_added_date; ?></td>
      <td><?= $property->property_type_name; ?></td>
      <td><?= $property->property_ASYS_no; ?></td>
      <td>
        <a href="<?= base_url('Property/propertyDetails/'.$property->property_id);?>">
          <?= $property->property_address_1; ?>    
        </a>
      </td>
      <td><?= $property->cluster_name; ?></td>
      <td>
        <?php if($property->property_risk_status==0) { ?>
          <input type="text" name="Color" id="Color" style="height: 20px; width: 20px; border: 1px solid white; border-radius: 3px; background: white;" readonly="">
        <?= $property->risk_status_name; } ?>
        <?php if($property->property_risk_status==1) { ?>
          <input type="text" name="Color" id="Color" style="height: 20px; width: 20px; border: 1px solid white; border-radius: 3px; background: white;" readonly="">
        <?= $property->risk_status_name; } ?>
        <?php if($property->property_risk_status==2) { ?>
          <input type="text" name="Color" id="Color" style="height: 20px; width: 20px; border: 1px solid green; border-radius: 3px; background: green;" readonly="">
        <?= $property->risk_status_name; } ?>
        <?php if($property->property_risk_status==3) { ?>
          <input type="text" name="Color" id="Color" style="height: 20px; width: 20px; border: 1px solid orange; border-radius: 3px; background: orange;" readonly="">
        <?= $property->risk_status_name; } ?>
        <?php if($property->property_risk_status==4) { ?>
          <input type="text" name="Color" id="Color" style="height: 20px; width: 20px; border: 1px solid red; border-radius: 3px; background: red;" readonly="">
        <?= $property->risk_status_name; } ?>
      </td>
      <td><?= $property->fullName; ?></td>
      <td><?= $property->rooms; ?></td>
      <td>
        <?php if ($property->property_status == 1) { ?>
          <a href="<?= base_url('Property/propertyEdit/'.$property->property_id);?>" style="text-decoration: none;" class="btn btn-info btn-xs" onclick="return confirm('Do You want Edit this Property ?');">Edit</a>
        <?php } elseif ($property->property_status == 2) { ?>
          <a href="<?= base_url('Property/propertyEdit/'.$property->property_id);?>" style="text-decoration: none;" class="btn btn-info btn-xs" onclick="return confirm('Do You want Edit this Property ?');">Edit</a>
        <?php } elseif ($property->property_status == 3) { if ($this->ion_auth->is_admin()) { ?>
          <a href="<?= base_url('Property/propertyEdit/'.$property->property_id);?>" style="text-decoration: none;" class="btn btn-info btn-xs" onclick="return confirm('Do You want Edit this Property ?');">Edit</a>
          <?php } else {
            echo "<b style='color:orange'>Admin</b>";
          }
        } elseif ($property->property_status == 4) { if ($this->ion_auth->is_admin()) { ?>
          <a href="<?= base_url('Property/propertyEdit/'.$property->property_id);?>" style="text-decoration: none;" class="btn btn-info btn-xs" onclick="return confirm('Do You want Edit this Property ???');">Edit</a>
          <?php } else {
            echo "<b style='color:green'>Live</b>";
          }
        } else { if ($this->ion_auth->is_admin()) { ?>
          <a href="<?= base_url('Property/propertyEdit/'.$property->property_id);?>" style="text-decoration: none;" class="btn btn-info btn-xs" onclick="return confirm('Do You want Edit this Property ???');">Edit</a>
          <?php } else {
            echo "<b style='color:red'>Terminated</b>";
          }
        } ?>
      </td>
      <td>
        <a href="<?= base_url('Property/propertyDetails/'.$property->property_id);?>" style="text-decoration: none;" class="btn btn-warning btn-xs">View </a>
        <a href="<?= base_url('Property/viewRoom/'.$property->property_id);?>" style="text-decoration: none;" class="btn btn-success btn-xs">View Rooms</a>  
      </td>
    </tr>
    <?php } } ?>
  </tbody>
</table>
</div>
</div>
</div>
</div>
</div><!--/.row-->
<div class="modal fade" id="myModal">
  <?php include('property_model_view.php'); ?>
</div><!--/.row-->
</div><!--/.row-->

Script:

<script type="text/javascript">
  function showmore(){
    $.ajax({
        url: "<?= base_url('Property'); ?>",
        data:{
          areaId :$('#areaId').val(),
          cluster_id :$('#cluster_id').val(),
          property_type :$('#property_type').val(),
          property_status :$('#property_status').val()

        },
        type:"JSON", 
        success :function(data){
            $('#example1').prepand(data.view)
            $('#offset').val(data.offset)
        }
    });
  };
</script>

I had googled it, but not getting proper outcome, any kind of help is welcome. Thanks in advance.

Now it gives error at $('#example1').prepand(data.view): Uncaught TypeError: $(...).prepand is not a function. — Ganesh Aher
– Ganesh Aher, Commented Feb 28, 2018 at 7:23

Bhavya Sanchaniya · Accepted Answer · 2018-02-28 07:56:21Z

1

You can try in Ajax url:base_url('') to site_url('')

answered Feb 28, 2018 at 7:56

Bhavya Sanchaniya

5638 silver badges16 bronze badges

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

9 Comments

Ganesh Aher Over a year ago

No expected outcome.

Bhavya Sanchaniya Over a year ago

you can debug on browser console.

Ganesh Aher Over a year ago

Done, but it loads whole data, and not applying any filters

Bhavya Sanchaniya Over a year ago

maybe its loads whole controller! And Sorry to no idea of applying filters.

Ganesh Aher Over a year ago

In console when I'm doing var_dum, it gives me all data.

|

Collectives™ on Stack Overflow

AJAX function call on submit button not working in PHP CodeIgniter

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related