skip to Main Content

I’m doing search data without refreshing the page but I don’t get any request responses. I tried editing my ajax code but nothing happens. I just started learning ajax yesterday so its new to me. Is it on my ajax code or is it on my controller? I even have my ajax link included.

Here is my view code:

<html>
<head>
    <meta charset="utf-8">
    <title>CRUD Practice</title>
    <style type="text/css">
        *{
            font-family: helvetica;
        }
        a{
            text-decoration: none;
            margin-top: 50px;
        }
    </style>
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>
<body>
    <h2>Search: <input type="text" name="search_text" placeholder="Enter your query" id="search_text"></h2>

    <h1>Admin Dashboard</h1>
    <a href="get_all">Get all data</a><br>
    <a href="get_id/(:num)">Get data by ID</a><br>
    <a href="add_view">Add data</a>
    <div id="result"></div>

<a href="<? echo base_url() ?>">Go Back</a>

<script>
        $(document).ready(function(){
            
            load_data();
            function load_data(query){
                $.ajax({
                    url:"<?php echo  base_url()?>crud_controller/fetch",
                    method:"POST",
                    data : {query: query},
                    success: function(data){
                            $('#result').html(data);
                    }
                })
            }

            $('#search_text').keyup(function(){
                var search = $(this).val();
                if(search != " "){
                        load_data(search);
                }else{
                        load_data();
                }
            })
        })
</script>
</body>
</html>

Here is my controller:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Crud_controller extends CI_Controller {
    public function __construct(){
        parent::__construct();
        $this->load->model('Crud_model', 'crud');
        $this->load->helper('url');
    }

    public function index(){
        $this->load->view('crud_view');
    }

     function fetch(){
        $this->load->model('Crud_model');
            $output='';
            $query='';
        if($this->input->post('query')){
                $query = $this->input->post('query');
        }

        $data = $this->Crud_model->fetch_data($query);

        $output .= '
        <table>
                <th>Name</th>
                <th>Description</th>
                <th>Created_at</th>
        ';

        if($data->num_rows() > 0){
                foreach ($data->result() as $row)
                {
                    $output .= '<tr>
                                                <td>'.$row->name.'</td>
                                                <td>'.$row->description.'</td>
                                                <td>'.$row->created_at.'</td>
                                                <td>'.$row->updated_at.'</td>
                                            </tr>';
                }
        }else{
            $output .= '<tr><td> No Data Found </td></tr>';
        }
    }

2

Answers


  1. I found some missing content in your code that I mention below.

    1. You haven’t created a proper HTML table.
    2. You haven’t parsed your data from the controller so you’re not be getting any response.

    So you first need to add the json_encode like this echo json_encode($output); at the end of the controller function.

    Change your function be like this:

    function fetch(){
        $this->load->model('Crud_model');
            $output='';
            $query='';
        if($this->input->post('query')){
            $query = $this->input->post('query');
        }
    
        $data = $this->Crud_model->fetch_data($query);
    
        $output .= '
        <table>
        <thead>
        <th>Name</th>
        <th>Description</th>
        <th>Created_at</th>
        <th>Updated_at</th>
        </thead>
        <tbody>
        ';
    
        if($data->num_rows() > 0){
            foreach ($data->result() as $row)
            {
                $output .= '<tr>
                    <td>'.$row->name.'</td>
                    <td>'.$row->description.'</td>
                    <td>'.$row->created_at.'</td>
                    <td>'.$row->updated_at.'</td>
                </tr>';
            }
        }else{
            $output .= '<tr><td> No Data Found </td></tr>';
        }
    
        $output .= '</tbody>';
        
        echo json_encode($output);
    }
    
    Login or Signup to reply.
  2. Your code is fine but you have to display your $output variable.
    without printing the variable ajax cant read the data from php.
    For our reference:

      $output .= '
        <table>
                <th>Name</th>
                <th>Description</th>
                <th>Created_at</th>
        ';
    
        if($data->num_rows() > 0){
                foreach ($data->result() as $row)
                {
                    $output .= '<tr>
                                                <td>'.$row->name.'</td>
                                                <td>'.$row->description.'</td>
                                                <td>'.$row->created_at.'</td>
                                                <td>'.$row->updated_at.'</td>
                                            </tr>';
                }
        }else{
            $output .= '<tr><td> No Data Found </td></tr>';
        }
    

    echo output;

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search