Monday 4 November 2019

Mesej Confirmation Menggunakan "Popovers"

LANGKAH-LANGKAH 

1. Wujudkan button untuk tujuan pengesahan.

   contoh : <button name="btnTrans" id="btnTrans" title="Hapus Data ?"  
data- toggle="hapus_rekod" class="btn btn-small btn-primary"  type="button" >
                <i class="fa fa-save"></i> Hapus Rekod</button>

2 . Wujudkan attribute nama bagi "data- toggle"  button seperti diatas.

3. Wujudkan function untuk memanggil attribute nama "data-toggle" button tersebut.

   contoh function :

$('[data-toggle=hapus_rekod]').popover({
    //$('#sub1').popover({
                    
    content : 'Adakah anda pasti? <br><br><button type="button" class="hantarTIDAK btn btn-default">Tidak</button> <button type="submit" class="hantarDATA btn btn-danger">Ya</button>',

    template : '<div class="popover" role="tooltip"><div class="arrow"></div><h4 class="popover-header" style="background-color:#d9534f; color:#fff"></h4><div class="popover-body"></div></div>',
    html: true,
    placement: "top",
    trigger : "focus"
})
.on("shown.bs.popover", function () {

    formID = $(this).closest('form').attr('id');

    $("button.hantarDATA").on("click", function(){
      console.log(formID);
        $('#'+formID).submit();
    });

    $("button.hapusTIDAK").on("click", function() {

        $(".popover").popover("hide");
    });



});

4.  Setelah selesai, reload page, dan cuba klik pada button tersebut. Anda akan melihat
     hasilnya.Sekian.

0 comments:

Post a Comment