Without refresh the page how to display the values from database using ajax/jQuery

Question

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?

This is my code:

Script:

 <script>
        $(document).ready(function(){
            $("#personal-info").submit(function(e){
               e.preventDefault();
               var suppid = $("#suppid").val();
               var proid = $("#proid").val();
               var custid = $("#custid").val();
                var message = $("#message").val();

                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url(); ?>index.php/Profile_cntrl/buyer_communication",
                    data: {suppid:suppid,proid:proid,custid:custid,message:message},
                    success:function(data)
                    {
                        alert('SUCCESS!!');
                    },
                    error:function()
                    {
                        alert('fail');
                    }
                });
            });
        });
    </script>

Controller:

public function buyer_communication() {

        $result1 = $this->Profile_model->fetch_Data($product_id);


        $Userid = $this->session->userdata('id');
        $result3 = $this->session->userdata('tt');
        $data4 = array(
            'message' => $this->input->post('message'),
            'supplier_id' => $this->input->post('suppid'),
            'product_id' => $this->input->post('proid'),
            'Customer_id' => $this->input->post('custid'),
            'From' => $result3,
        );

        $this->Profile_model->buyer_insert($data4);

        redirect('welcome/buyermessageview?id=' . $product_id);
    }

Model:

function buyer_insert($data4) {
        $this->db->insert('communication', $data4);
        return ($this->db->affected_rows() != 1) ? false : true;
    }

Form:

<form class="form-horizontal" method="POST" id="personal-info"  role="form" action="#"> 
                            <div class="panel-footer">
                                <div class="input-group">

                                    <input type ="hidden" name="suppid" id="suppid" value="<?php echo $row->supplier_id; ?>" class="form-control" />
                                    <input type ="hidden" name="proid" id="proid" value="<?php echo $row->product_id; ?>" class="form-control" />
                                    <input type ="hidden" name="custid" id="custid" value="<?php echo $row->Customer_id; ?>" class="form-control" />



                                    <input id="message" name="message" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." />
                                    <span class="input-group-btn">
                                        <button class="btn btn-primary btn-sm" id="submit-p" name="submit-p">Send</button>
                                        <!--<input type="submit" name="submit-p" id="submit-p" value="send" class="btn btn-primary btn-sm" >-->
                                    </span>
                                </div>
                            </div>
                        </form>

stackoverflow.com/questions/44305553/… are you two working on the same thing, by any chance? Keep it to one question on the same issue, preferably. And also please ask your friend to accept the other answer, since it solved the original problem. Anyway, you haven't described this properly. What's going wrong with your code? At which point does it fail? What errors have you got, if any? What behaviour is wrong? — ADyson
– ADyson, Commented Jun 1, 2017 at 15:07
P.S. Why, in the ajax, are you manually extracting the values from the form fields, when you could just serialise the whole form? data: $(this).serialize() should work instead of all those repetitive variable declarations. api.jquery.com/serialize — ADyson
– ADyson, Commented Jun 1, 2017 at 15:08
after insert values to database while fetching values from database without refresh the page values should be display in form. — Maruthi Prasad
– Maruthi Prasad, Commented Jun 2, 2017 at 5:05

Pavan Baddi · Accepted Answer · 2017-06-02 07:50:49Z

@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);
    }
}
?>

Collectives™ on Stack Overflow

Without refresh the page how to display the values from database using ajax/jQuery

1 Answer 1

Feel free to ask questions

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Feel free to ask questions

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related