Passing variable from JavaScript to PHP using AJAX doesn't show anything

Question

I'm trying to send a PHP variable to JavaScript using AJAX and implementing to HTML, but the result doesn't show anything.

My HTML code:

<div class="contain" id="konten_data"
     style="margin-top: 20px;"></div>

My JavaScript code:

function tampilDepan(id){
            $.ajax({
                type: 'POST',
                url: 'userAction.php',
                data: 'action_type=tdepan&id='+id,
                success:function(html){
                    $('#konten_data').html(html);
                }
            });
        } 

My PHP code (userAction.php):

($_POST['action_type'] == 'tdepan'){
$link = mysqli_connect("localhost", "root", "", "universitas");

$datas = mysqli_query($link, "SELECT * FROM mahasiswa where user='john' ");
        if(!empty($datas)){
            while ($datak = mysqli_fetch_assoc($datas)){
                echo  '<div class="row" style="margin-left: -90px;">
                <div class="col-xs-6 col-sm-6 col-md-4">
                <img class="img-thumbnail img-responsive"
                     src="images/test/'.$datak['gmb_batik'].'" alt=""></div>
                <div class="col-xs-12 col-md-8">
                <div class="content-box-large">
                <p>'.$datak['desc_batik'].'</p>
                </div>
                </div>                
            </div>
            <div class="row" style="margin-left: -90px; margin-top: 10px;">
                <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-3">
                    <div class="content-box-large">
                        <h1 >asal <strong>'.$datak['asal_batik'].'</strong></h1>
                    </div>
                </div>
                <div class="col-xs-16 col-sm-6 col-md-2 col-md-offset-1">
                    <img class="img-thumbnail img-responsive"
                      src="login/admin/files/qrcode/'.$datak['qr_batik'].'"
                      alt="">
                </div>
            </div>
            <div class="row" style="margin-left: -90px; margin-top: 10px;">
                <div class="col-xs-12 col-sm-6 col-md-9 col-md-offset-4">
                    <div class="content-box-large">
                    <p>'.$datak['pola_batik'].' </p>
                    </div>
                </div>
        </div>';
            }
        }else {``
            echo '<tr><td colspan="5">No user(s) found......</td></tr>';
        }`
}

I don't know what is wrong, I hope somebody can help me.

Answer 1

Try to change the javascript code to

function tampilDepan(id){
            $.ajax({
                type: 'POST',
                url: 'userAction.php',
                data: {action_type: "tdepan", id: id},
                success:function(html){
                    $('#konten_data').html(html);
                }
            });
    } 

As you can see, data is passed as an object instead of a string.

Also, be aware that if no user was found, you are putting a <tr> inside a <div> .

Answer 2

try to change in your ajax call. function tampilDepan(id){ var postData ={"action_type":tdepan,"id":id}; $.ajax({ type: 'POST', url: 'userAction.php', data: postData , success:function(html){ $('#konten_data').html(html); } }); }

Answer 3

try to use the format below in calling ajax:

 $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8", 
    data:  '{ "action_type":"' + tdepan + '", "id":"' + id + '"}',
    url: 'userAction.php',
    success: function (data) {
        conosle.log(data);
    },
    error: function (error) {
        console.log(error);
    }
});

Answer 4

You are trying to get your data using konten_data probably by using jQuery selector $('#konten_data').val(); , but I don't see it in the PHP code as where you are pushing the data to render onto the DOM. Try setting the value of konten_data by adding an element before the success callback or on DOM render and you should be good from there.