Ajax Tutorial: Menampilkan popover content dengan Ajax

Oleh: Admin - Mon, 01 October, 2018

Stylesheet frameworks, Bootstrap

fiuhhh.... target mau nulis blog sehari = 1 gatot sob, ahahaha alhamdulillah beberapa hari ini dipenuhi kesibukan yang bermanfaat :D. Kalo diperhatiin emang banyak berkahnya juga nih sob, emang kalo jalanin hidup ini sederhana ajalah ya. Syukuri baik ataupun buruknya hal yang kita hadapi.

Mumpung sempet nulis, langsung aja nih kita ke topiknya. Kali ini gw mau share pengalaman gw bikin popover bootstrap, nah kalo ada yang belom tau apa itu, kalian berati mainnya kurang jauh sob :p. Hahahaha jangan baper lah ya, walaupun belom expert di bidang frontend (styling) tapi emang standar style saat ini ya responsive-design. Kalo udah ngomongin design yang responsive pasti yang pertama kali muncul dikepala ya si -Bootstrap- ini.

Bootstrap dan fitur-fiturnya

WaH sob kalo udah ngomongin fitur, bakalan panjang nih pembahasannya. Seabreg abreg sob fiturnya si Bootstrap ini. Selain responsive -nya, fitur dari bootstrap yang paling gw suka ada beberapa lainnya. Misal, dari sebelumnya design template gw pake table, sekarang ini jadi lebih cepet klo pake bootstrap. Ada juga modal, fitur dari bootstrap yang menampilkan prompt dialog.

Kayak yang udah gw singgung tadi diatas sob, pembahasan kali ini gw mau share penggunaan popover bootstrap. Yup, bukan yang biasa tentunya (hahahaaa gaya-an). Nah maksudnya bukan yang biasa ini yaitu kita akan menampilkan kontennya yang diambil dengan ajax, beuhh keren kan hahaha. Daripada kelamaan dan keburu males nulisnya, yuk capcus kita ke kodingannya.

Bootstrap popover load content from ajax

1. Pertama-tama kita tambahkan element yang akan mentrigger event ajax ini, copy baris kode berikut dan simpan dengan nama index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Belajar Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    
</head>
<body>
    
    <br>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <a href="javascript:;">Click, me!!</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
    <script type="text/javascript">

    $(document).on('click', '.popover .close-help', function(){
        $(this).parents("div.popover").popover('hide');
        $('.btn-help').off('click');
    });

    $('a[href]').off('click').on('click', popdetail);

    function popdetail() {
        var obj = $(this);

        obj.off('click');
        obj.popover({content: '<p><i class="fa fa-spin fa-spinner"></i> please wait...</p>', html: true}).popover('show');

        $.get('ajax.php', function(res, textStatus, jqXHR) {
            
            obj.popover('destroy');
            setTimeout(() => {
                obj.popover({
                    container: 'body',
                    html: true,
                    placement: 'right',
                    content: res.content,
                    title: '<span class="text-info"><i class="fa fa-info-circle"></i> Detail</span> <a href="javascript:void(0);" class="close close-help">×</a>'
                }).popover('show');
            }, 200);

        }, 'json');
        
    }
    </script>
</body>
</html>

2. Selanjutnya kita buat server side yang akan memproses request tadi. Kopi baris kode berikut dan simpan dengan nama ajax.php

';
    $htmlTable .= '';
    $htmlTable .= '';
    $htmlTable .= 'First Column';
    $htmlTable .= 'Second Column';
    $htmlTable .= '';
    $htmlTable .= '';
    $htmlTable .= '';
    $htmlTable .= '';
    $htmlTable .= 'First Column Content';
    $htmlTable .= 'Second Column Content';
    $htmlTable .= '';
    $htmlTable .= '';
    $htmlTable .= '';

    $response = [];
    $response['content'] = $htmlTable;

    echo json_encode($response, 128);
    exit(0);

}

echo 'undefined request method!!';

Okehh sampe dsini kita udah sukses menampilkan popover content dengan jquery ajax -nya. Gimana menurut kalian? gampang kan ya hahaha. Terima kasih udah mau baca artikel sederhana ini, sampai jumpa lain waktu, salam tempel :D .