Reputation: 25

How to send post input data ajax to controller?

I want to make an input search using ajax, I have tried it but it still fails I think the problem is when the value in ajax is not sent to the controller which results in the query like being left out, how do I fix this problem?

I using jquery-2.2.3, codeigniter 3

This is Js :

<script>
    $('#boxProfile').hide();
    $("#btnSearch").click(function(){
        var name = $("#inputNameNik").val();
        console.log(name);
        $.ajax({
            url     : '<?php echo base_url('index.php/Search/profile') ?>',
            type    : 'POST',
            data    : { post: name },
            dataType: 'JSON',
            beforeSend: function(e) {
                if(e && e.overrideMimeType) {
                    e.overrideMimeType("application/json;charset=UTF-8");
                }
            },
            success: function(response){
                var html = '';
                var i;
                var no = 1;
                var success = 'Success';
                console.log(success);
                $.each(response, function(index, obj){
                    html += '<div class="box-body box-profile">'+
                                    '<img class="profile-user-img img-circle center" style="width: 160px; height:150px; display: block; margin-left: auto; margin-right: auto;" src="'+obj.foto+'" alt="User profile picture">'+
                                    '<hr>'+
                                    '<h2 class="profile-username text-center">'+obj.name+'</h2>'+
                                    '<p class="text-muted text-center">'+obj.nik+'</p> '+
                                    '<div class="small-box bg-red">'+
                                        '<div class="inner">'+
                                            '<h4 style="text-align:center;">Annual Leave in Year : </h4>'+
                                            '<h4 style="text-align:center;">Annual Leave in Year : </h4>'+
                                            '<h4 style="text-align:center;">Leave in Year : </h4>'+
                                            '<p style="text-align:center;">Balance Leave Now : </p>'+
                                        '</div>'+
                                    '<button type="button" class="small-box btn btn-danger" style="margin:auto;" data-toggle="modal" data-target="#Import" >Click Detail <i class="fa fa-arrow-circle-right"></i></button>'+
                                    '</div>'+
                                '</div>';
                });
                $('#boxProfile').html(html);
                $('#boxProfile').show();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr.responseText);
                var fail = 'Fail';
                console.log(fail);
            }
        });
    });
</script>

This is views :

<input type="text" class="form-control" id="inputNameNik" name="nameNik" placeholder="Search Nik / Name">
<span class="input-group-btn">
   <button class="btn btn-default" type="button" id="btnSearch"><i class="fa fa-search"></i></button>
</span>

This is controller :

public function profile() {
    $post = $this->input->post('inputNameNik');
    $query = $this->m_data->searchProfile($post);
    echo json_encode($query);
}

This is model :

public function searchProfile($where){
    $this->db->select('cuti.id_karyawan as cutiIdKaryawan, karyawan.foto, karyawan.nik, karyawan.name, cuti_before.id_karyawan as beforeIdKaryawan, cuti_before.tahun as beforeTahun, cuti_before.sisa_cuti as beforeCuti, cuti.tahun as tahunCuti, cuti.sisa_cuti as cutiSisa, cuti.saldo_cuti as cutiSaldo, tanggal, detail_cuti.keterangan, jmlh_hari, tgl_cuti_dari, tgl_cuti_sampai, cuti.tahun, DATEDIFF(karyawan.tmt_startwork, now()) as start');
    $this->db->from('karyawan');
    $this->db->join('cuti', 'cuti.id = karyawan.id', 'left');
    $this->db->join('cuti_before', 'cuti_before.id_karyawan = karyawan.id', 'left');
    $this->db->join('detail_cuti', 'detail_cuti.id_karyawan = karyawan.id', 'left');
    $this->db->like('karyawan.name', $where, 'both');
    $this->db->or_like('karyawan.nik', $where, 'both');
    $this->db->limit(1);
    $query = $this->db->get();

    return $query->result_array();
}

Upvotes: 1

Answers (4)

Danish Ali

Reputation: 2352

Correct two things in the ajax call

If you are using single quotes ' at the start of the URL then use double quotes inside.

url     : '<?php echo base_url("index.php/Search/profile") ?>',

Also, use single/double quotes to declare variable

data    : { 'post': name },

Upvotes: 1

Shahnawaz Alam

Reputation: 86

Please remove these lines from your ajax code

dataType: 'JSON',
            beforeSend: function(e) {
                if(e && e.overrideMimeType) {
                    e.overrideMimeType("application/json;charset=UTF-8");
                }
            },

so in view file your updated code will look like below:

<script>
    $('#boxProfile').hide();
    $("#btnSearch").click(function(){
        var name = $("#inputNameNik").val();
        console.log(name);
        $.ajax({
            url     : '<?php echo base_url('index.php/Search/profile') ?>',
            type    : 'POST',
            data    : { name: name }, //change
            success: function(response){
                var html = '';
                var i;
                var no = 1;
                var success = 'Success';
                console.log(success);
                $.each(response, function(index, obj){
                    html += '<div class="box-body box-profile">'+
                                    '<img class="profile-user-img img-circle center" style="width: 160px; height:150px; display: block; margin-left: auto; margin-right: auto;" src="'+obj.foto+'" alt="User profile picture">'+
                                    '<hr>'+
                                    '<h2 class="profile-username text-center">'+obj.name+'</h2>'+
                                    '<p class="text-muted text-center">'+obj.nik+'</p> '+
                                    '<div class="small-box bg-red">'+
                                        '<div class="inner">'+
                                            '<h4 style="text-align:center;">Annual Leave in Year : </h4>'+
                                            '<h4 style="text-align:center;">Annual Leave in Year : </h4>'+
                                            '<h4 style="text-align:center;">Leave in Year : </h4>'+
                                            '<p style="text-align:center;">Balance Leave Now : </p>'+
                                        '</div>'+
                                    '<button type="button" class="small-box btn btn-danger" style="margin:auto;" data-toggle="modal" data-target="#Import" >Click Detail <i class="fa fa-arrow-circle-right"></i></button>'+
                                    '</div>'+
                                '</div>';
                });
                $('#boxProfile').html(html);
                $('#boxProfile').show();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr.responseText);
                var fail = 'Fail';
                console.log(fail);
            }
        });
    });
</script>

And in Controller where you are getting form value use this code given below:

public function profile() {
    $post = $this->input->post('name');//it should be same as what you are sending from ajax field
    $query = $this->m_data->searchProfile($post);
    echo json_encode($query);
}

Please let me know if it'll work. Thanks

Upvotes: 1

M.Hemant

Reputation: 2355

you are passing post as key in data: instead of actual key which is name/id attribute nameNik/inputNameNik

 var inputNameNik = $("#inputNameNik").val();//changes
        console.log(name);
        $.ajax({
            url     : '<?php echo base_url('index.php/Search/profile') ?>',
            type    : 'POST',
            data    : ({ inputNameNik: inputNameNik }),//changes

in Ajaxdata : you need to pass values as key : value format so in controller you can use key to get post value

i.e if i pass data: ({ nameNik: inputNameNik }), then i will use this in controller like $nameNik = $this->input->post('nameNik'); so whenever you pass post data from ajax becarefull with key which you need to use in your controller to get value from post

Upvotes: 0

Jonathan Souza

Reputation: 23

When you make the Ajax request you are sending post as the key for the input name but in your controller you are looking for inputNameNik as the key. This may be the cause you are not getting the input in the controller.

Although inputNameNik is the id of your html input, the PHP is unaware of this name, all it has is the variable that name you send through the post request.

Upvotes: 0

How to send post input data ajax to controller?

Answers (4)

Related Questions