Get data with ajax from php and mysql

Question

I have this code,when i input invoice code it will get data from MySQL and fill the others text with Ajax. but my ajax don't get return from my controller, any body help me? where I'm wrong?

My controller in PHP to get data.

<?php 
  public function getDetail_transaction($invoice_id){
    $result = $this->db->get_where('tblTransaction',  array('payment_trx_id' => $invoice_id))->first_row();
    $data = json_encode($result);
    return $data;
  }
?>

My view:

<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-body">
                <h3>Confirm Your Payment</h3>
                <div class="col-md-4">
                <form name='ConfirmPayment' action="<?php echo base_url('Payment/ConfirmPayment');?>" method="POST" enctype="multipart/form-data">
                    <div class="form-group">
                        <label>Invoice ID</label>   
                        <div>
                            <input type="text" class="form-control" name='invoice_id' id='invoice_id' placeholder="Invoice ID" style='width:80%;'/>
                            <a type="submit" id='cek_invoice' class="btn cek_invoice">Cek</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Nama Rekening Pembayar</label>
                        <input type="text" class="form-control" name='user_account_name' id='user_account_name' placeholder="Nama Pembayar">
                    </div>
                    <div class="form-group">
                        <label>Bank Asal</label>
                        <input type="text" class="form-control" name='provider_bank' id='provider_bank' placeholder="Nama Pembayar">
                    </div>
                    <div class="form-group">
                        <label>Bank Tujuan</label>
                        <input type="text" class="form-control" name='payment_bank_user_name' id='payment_bank_user_name' placeholder="Bank Tujuan">
                    </div>
                    <div class="form-group">
                        <label>No Transafer</label>
                        <input type="text" class="form-control" name='no_transaction' id='no_transaction' placeholder="Jumlah di Transfer">
                    </div>
                    <div class="form-group">
                        <label>Transfer Date</label>
                        <input type="text" class="form-control" name='transfer_date' id='transfer_date' placeholder="Jumlah di Transfer">
                    </div>
                    <div class="form-group">
                        <label>Deskripsi</label>
                        <textarea class="form-control" name='description' id='description' placeholder="Jumlah di Transfer"></textarea>
                    </div>

                    <div class="form-group">
                        <label>Total Transfer</label>
                        <input type="text" class="form-control" name='total_transfer' placeholder="No total_transfer">
                    </div>
                    <div class="form-group">
                        <label>Bukti Transaksi (optional)</label>
                        <input type="file" name="scan">
                      </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
                </div>
            </div>
        </div>
    </div>

Ajax Script

$(document).ready(function(){
    $("#cek_invoice").click(function(){
        data_invoice = $('#invoice_id').val();
        var url = "<?php echo base_url('Payment/getDetail_transaction/');?>"+'/'+data_invoice;
        $.ajax({
            url : url,
            type: "POST",
            success: function(data) {
                alert(data);
                 $('#payment_bank_user_name').val(data.payment_bank_user_name);
            },
            failure: function() {
                alert('fail');
            }
        });
    }); 
});

Answer 1

public function getDetail_transaction($invoice_id){
    $result = $this->db->get_where('tblTransaction', array('payment_trx_id' => $invoice_id))->first_row();    
    $data = json_encode($result);    
    echo $data;
}

and your javascript edit the below line

success: function(data) {    
  alert(data);    
  var obj = $.parseJSON(data);    
  $('#payment_bank_user_name').val(obj.payment_bank_user_name);    
},   

Answer 2

you should 'echo' result after encode it! see this:

<?php 
            public function getDetail_transaction($invoice_id){
                    $result = $this->db->get_where('tblTransaction',  array('payment_trx_id' => $invoice_id))->first_row();
                    $data = json_encode($result);
                    echo $data;   //echo data
            }
?>

in ajax you should parseJSON your data :

$(document).ready(function(){
$("#cek_invoice").click(function(){
    data_invoice = $('#invoice_id').val();
    var url = "<?php echo base_url('Payment/getDetail_transaction/');?>"+'/'+data_invoice;
    $.ajax({
        url : url,
        type: "POST",
        success: function(data) {
            var dun = $.parseJSON(data);
            $('#payment_bank_user_name').val(dun.payment_bank_user_name);
        },
        failure: function() {
            alert('fail');
        }
    });
}); });

Answer 3

Use

echo $data;exit;

Instead of

return $data;

To display the data (after getting the response) -

var data = $.parseJSON(data);
$('#your_input_field').val(data.payment_bank_user_name);