Skip to content Skip to sidebar Skip to footer
Home / Ajax / Codeigniter / Html / Jquery / Php

Without Refresh The Page How To Display The Values From Database Using Ajax/jQuery

Post a Comment
After inserting data into the database through jQuery/ajax, while fetching values from database without refresh the page how to display the database values using codeigniter? Thi

Solution 1:

@Maruthi Prasad here is the code.. [IN CODE IGNITER]

HTML view code with jquery script views\profile_view.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div id="load_data">

      </div>

      <form method="post" id="personal-info">
            <input id="message" name="message" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
            <button type="submit" class="btn btn-primary btn-sm" id="submit-p" name="submit-p">Send</button>
      </form>
    </div>
  </div>
</div>


<script>
$(document).ready(function(){
    loaddata();

    data_submit();
});

function loaddata(){
    $.getJSON('<?php echo base_url();?>'+'index.php/Profile_cntrl/get_data',function(data){
        for(var i in data){
            var show = '<div>';
            show += '<h5 style="background:#ccc;padding:10px;border-radius:10px;">'+data[i].message+'</h5>';
            show += '</div>';

            $("#load_data").append(show);
        }
    });
}

function data_submit(){
    $("#personal-info").submit(function(e){
        e.preventDefault();

        var formdata = $(this).serialize();

        $.ajax({
            type:'POST',
            url:'<?php echo base_url();?>'+'index.php/Profile_cntrl/insert_data',
            data:formdata,
            success:function(data){
                var res = JSON.parse(data);

                if(res.Status == 'true'){
                    //console.log(res.report);
                    $("#load_data").empty();
                    loaddata()
                }else{
                    alert(res.report);
                }
            }
        }); 
    });
}
</script>
</body>
</html>

CONTROLLER CODE: controllers\Profile_cntrl.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
header('Access-Control-Allow-Origin: *');
class Profile_cntrl extends CI_Controller {
    function __construct(){
        parent::__construct();

        $this->load->model('profile_model');
        $this->load->helper(array('url','html','form'));
    }


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

    public function get_data(){
        $query = $this->profile_model->buyer_communication();

        echo json_encode($query);
    }

    public function insert_data(){
        $arr = array(
            'message'=>$this->input->post('message')
        );

        $sql = $this->profile_model->buyer_insert($arr);

        $op = "data insert id :".$this->db->insert_id();

        if($sql == true){
            $reponse = array(
                'Status'=>'true',
                'report'=>$op
            );
            echo json_encode($reponse);
        }
        else
        {
            $op = "Failed to insert data";

            $reponse = array(
                'Status'=>'false',
                'report'=>$op
            );
            echo json_encode($reponse);
        }
    }
}
?>

Model code: models\Profile_model.php

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

class Profile_model extends CI_model {

    public function buyer_communication(){
        $sql = $this->db->get('communication');
        $sql = $sql->result_array();
        return $sql;
    }

    public function buyer_insert($arr){
        return $query = $this->db->insert('communication',$arr);
    }
}
?>

Feel free to ask questions


Post a Comment for "Without Refresh The Page How To Display The Values From Database Using Ajax/jQuery"