bootboxjs dialog disable-enable button when before loading modal dialog

-------------------------------------------------

ตัวอย่างโปรแกรมที่ใช้ Bootbox.js ที่ช่วยให้ง่ายต่อการแสดงผลแบบ alert,dialog ต่างๆ ได้ง่ายมากกกและสวยงาม

ตัวอย่างด้านล่างนี้เป็นตัวอย่างแบบแนะแนวทางการพัฒนาต่ออีกระบบหนึ่ง

----------------------------------------------

การทำงานของโค้ดนี้คือ 
   - กดปุ่มแล้วจะแสดง Dialog
   - ก่อนที่จะแสดง Dialog จะทำการ Disabled ปุ่มไว้
   - ระบบจะทำการดึงค่าจากไฟล์ getData ทุก 1 วินาที
   - ตรวจสอบว่าค่านั้นช้ำกันติดต่อกันถึง 5 ครั้งมัย ถ้าไม่ติดต่อกันให้ทำการเริ่มดึงข้อมูลใหม่
   - ถ้าระบบได้ข้อมูลที่ช้ำกัน 5 ครั้งแล้วจะทำการ Enable ปุ่มใช้งานต่อไป
------------------------------------------------------

<link href="css/bootstrap.min.css" rel="stylesheet">

----------------------------------------------

CSS for icon loading

--------------------

<style>
.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}
</style>

----------------------------------------------

<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript --><script src="js/bootstrap.min.js"></script>
<script src="js/bootbox.min.js"></script>
<script>

----------------------------------------------

<button class="btn btn-default btn-getW" > ทดสอบดึงค่าน้ำหนัก </button>

<script>
    $('.btn-getW').click(function(data){
      var xbox =  bootbox.dialog({
                title: "รับค่าน้ำหนัก",
                message: '<div class="row" xmlns="http://www.w3.org/1999/html">  ' +
                '<div class="col-md-12"> ' +
                '<form class="form-horizontal"> ' +
                    '<div class="form-group"> ' +
                        '<label class="col-md-4 control-label" for="name">น้ำหนัก</label> ' +
                        '<div class="col-md-4"> ' +
                            '<div id="gettingW"></div>' +
                            '<span id="refresh"></span>' +
                           //'<input id="name" name="name" type="text" placeholder="ค่าน้ำหนัก Load Cell " class="form-control input-md"> ' +                        '<span class="help-block">ถ้ารับค่าได้ระบบจะแสดงปุ่ม รับค่า น้ำหนักที่ได้ (กิโลกรัม)</span> </div> ' +
                    '</div> ' +
                '</form> </div></div>' ,
                buttons: {
                    success: {
                        label: "อ่านค่าน้ำหนัก (กก.)",
                        className: "btn-success",
                        callback: function () {
                            <!-- To Do Something-->                        }
                    }
                }
            }
        );
        // preloading modal dialog        xbox.bind('shown.bs.modal', function(){
            xbox.find("#refresh").attr("class","glyphicon glyphicon-refresh glyphicon-refresh-animate").show();
            $('.btn-success').prop("disabled", true);
            var iChk = 0;
            var b = 0;
            var a = 0;
            setInterval(function(){
                if(iChk==4){
                    xbox.find("#refresh").attr("class","").hide();
                    $('.btn-success').prop("disabled", false);
                }else{
                    $.post("getDate.php",function (data) { 

                        // getData.php will return integer
                        if(iChk==0){
                            b = data.trim();
                            a = b;
                        }
                        if(b != a) {
                            iChk = 0;
                            b = data.trim();
                            a = b;
                        }
                        a = data.trim();
                        $('#gettingW').html(iChk + " : "+ b + " ");

                    });
                    iChk++;
                }
                return false;
            },1000);
        });
    });
</script>

---------------------------------------

ตัวอย่างผลลัพธ์

----------------------------------------

หวังว่าจะเป็นประโยชน์ไม่มากก้น้อยนะครับ.

มีข้อสงสามารถโพลดถามได้นะครับ.มะเดี่ยวศรี