How to edit and delete in cakephp3 using ajax?

Question

I am new in php don't know how to use ajax in cakephp3 please someone help me i struggling this problem from morning doing google again and again but not able to implement this till now please tell me about ajax code or give me perfect resourse where i can get information about this and be able to achieve this

//PLEASE IGNORE THIS FROM I'm learning PHP and SQL and as intern I'm working on a demo page that is actually something like landing page for insurance domain. I'm using XAMP and phpmyadmin where I have created a simple database with single table healthvisitors. I am able to add edit delete using cakephp but not able to do this same thing with ajax Because //////////////IGNORE HERE

This is controller helathvisitors.php and it's action edit and delete

public function Edit($id)
 {
  if($this->request->is('post'))
  {           
   $healthAdult =  $this->request->getdata('insured');
   $idChildren  =  $this->request->getdata('children');
   $txtName     =  $this->request->getdata('name');
   $txtMobile   =  $this->request->getdata('mobile');
   $dropdownAge =  $this->request->getdata('age');
   $radioGender =  $this->request->getdata('gender');
   $txtPincode  =  $this->request->getdata('pincode');         


   $visitor_table = TableRegistry::get('healthvisitors');
   $visit = $visitor_table->get($id);
   $visitor['insured'] = $healthAdult;
   $visitor['children'] = $idChildren;
   $visitor['name'] = $txtName;
   $visitor['age'] = $dropdownAge;
   $visitor['gender'] = $radioGender;
   $visitor['pincode'] = $txtPincode;
   $visitor['mobile'] = $txtMobile;

   $visitor = $visitor_table->patchEntity($visit,$visitor);
   if ($visitor_table->save($visitor)) {
    $this->Flash->success(__('Details Updated of user ID:'.$id.'.'));
    return $this->redirect(['action' => 'Index']);

 } else {
 $this->Flash->error(__('Somthing wrong. Please, try again!!!!'));

 }
} 


  else {

        $visitor_table = TableRegistry::get('healthvisitors')->find();
        $visitor = $visitor_table->where(['id'=>$id])->first();
        $this->set('healthAdult',$visitor->insured);
        $this->set('txtName',$visitor->name);
        $this->set('idChildren',$visitor->children);
        $this->set('txtMobile',$visitor->mobile);
        $this->set('dropdownAge',$visitor->age);
        $this->set('radioGender',$visitor->gender);
        $this->set('txtPincode',$visitor->pincode);
        $this->set('id',$id);

       }

}   


public function Delete($id)
{
  $visitor_table = TableRegistry::get('healthvisitors');
  $visitor = $visitor_table->get($id);
  $visitor_table->delete($visitor);
  echo "Details deleted successfully.";
  $this->setAction('Index');
}

This is my view file index.ctp

<table>
   <tr>
      <td>ID</td>
      <td>Name</td>
      <td>Age</td>
      <td>Mobile</td>
      <td>Gender</td>
      <td>Insured</td>
      <td>InsuredChild</td>
      <td>Pincode</td>
      <td>Action</td>
      <!-- <td>Delete</td> -->
   </tr>

   <?php
      foreach ($results as $row):
         echo "<tr><td>".$row->id."</td>";
         echo "<td>".$row->name."</td>";
         echo "<td>".$row->age."</td>";
         echo "<td>".$row->mobile."</td>";
         echo "<td>".$row->gender."</td>";
         echo "<td>".$row->insured."</td>";
         echo "<td>".$row->children."</td>";
         echo "<td>".$row->pincode."</td>";
         //echo "<td>".$row->status."</td>";
         echo "<td><button id='edit' type='submit' value ='submit'>Edit</button></td>";
         echo "<td><button id='delete' value='submit' type='submit'>Delete</button></td></tr>";
      endforeach;
   ?>
</table>

Answer 1

First of all, you can reduce the line of code.

Example:

     $visitor = [
                   'insured' => $this->request->getData('insured'),
                   'children'  =>  $this->request->getdata('children'),
                   'name'     =>  $this->request->getdata('name'),
                   'mobile'   =>  $this->request->getdata('mobile'),
                   'age' =>  $this->request->getdata('age'),
                   'gender' =>  $this->request->getdata('gender'),
                   'pincode'  =>  $this->request->getdata('pincode'),
];

While you are creating ajax call in edit, then cakephp flash is not required, delete them

  $this->Flash->success(__('Details Updated of user ID:'.$id.'.')); // delete

   $this->Flash->success(__('Details Updated of user ID:'.$id.'.')); //delete

and follow the code.

        if ($this->request->is('post')) {
            $visitor = [
                'insured' => $this->request->getData('insured'),
                'children'  =>  $this->request->getdata('children'),
                'name'     =>  $this->request->getdata('name'),
                'mobile'   =>  $this->request->getdata('mobile'),
                'age' =>  $this->request->getdata('age'),
                'gender' =>  $this->request->getdata('gender'),
                'pincode'  =>  $this->request->getdata('pincode')
            ];
            $visitor_table = TableRegistry::get('healthvisitors');
            $visit = $visitor_table->get($id);
            $status = []; // status array created
            $visitor = $visitor_table->patchEntity($visit, $visitor);
            if ($visitor_table->save($visitor)) {
                $status = ["code" => 200, "message" => "Edit success"];
                //$this->Flash->success(__('Details Updated of user ID:'.$id.'.'));
                // return $this->redirect(['action' => 'Index']); // redirect not needed on ajax call
            } else {
                // $this->Flash->error(__('Somthing wrong. Please, try again!!!!'));
                $status = ["code" => 201, "message" => "Something went wring"];
            }
          die(json_encode($status)); //exit with echo
        }

and your ajax call:

$.ajax({
    type: "POST",
    url: `<?= $this->Url->Build(["action"=>"Edit",$id]) ?>`, //generate cakephp url
    data: $("#your_edit_form_id").serializeArray(),
    success: function (data) {
        data = JSON.parse(data);
        if (data.code == 200) {
            //success work
            alert(data.message);
        } else if (data.code == 201) {
            //   error work
            alert(data.message);
        } else {
            // something went wrong 
        }
    }
});

And for your delete function: Controller

    public function delete($id = null)
    {
        $this->request->allowMethod(['post', 'delete']);
        $visitor_table = TableRegistry::get('healthvisitors');
        $visit = $visitor_table->get($id);
        if ($this->Settings->delete($visit)) {
           $status = ["code" => 200, "message" => "Delete success"];
        } else {
            $status = ["code" => 201, "message" => "Error"];
        }
       die(json_encode($status));
    }

edit .ctp

echo "<td><button class='delete' value='$id' type='button'>Delete</button></td></tr>";

In your ajax

$(document).on('click','.delete',function(){
var id= $(this).val();
$.ajax({
    type: "DELETE",
    url: `<?= $this->Url->Build(["action"=>"delete"]) ?>/${id}`, //generate cakephp url
    success: function (data) {
        data = JSON.parse(data);
        if (data.code == 200) {
            //success work
            alert(data.message);
        } else if (data.code == 201) {
            //   error work
            alert(data.message);
        } else {
            // something went wrong 
        }
    }
});
});