Wednesday, November 30, 2016

Sweet Alert JS library - beautiful replacement of JavaScript Alert



You may think JS alert is boring and less flexible. You can use Sweet Alert. You can download and see the demo of sweet alert from:
http://t4t5.github.io/sweetalert/
Then initialize the plugin by referencing the necessary files (js and css):
<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">
Example 1: error message:
sweetAlert("Not Allowed", "Average of Chair's Recommended Step  exceeds 1.25!", "error"); 

result:
Example 2: error message:
                    sweetAlert({
                            title:" Are you sure?",
                            text:"You will not be able to edit.",
                            type:"warning",
                            showCancelButton:true,
                            confirmButtonClass: "btn-danger",
                            confirmButtonText: "Yes, Submit & Lock",
                            confirmButtonColor: "#DD6B55",
                            cancelButtonText: "Cancel",
                            closeOnConfirm: true,
                            closeOnCancel:true
                    },
                    function(response){
                            if(response == true){
                           
                            }else{
                                   
                            }
                    });


result:

Sunday, November 13, 2016

Bootstrap Datepicker on change firing 3 times



I used Bootstrap Datepicker in js and it fires three times in post
       $('.date-picker').datepicker({
               format: "yyyy-mm-dd",
                autoclose: true
                                });

       $('.date-picker').change(function() {
                         var row = $(this).parent().parent();
                         var stakeholder_id =row.find(".sid").val();
                         var salutation =  $(this).val();
                         var postdata = {stakeholder_id:stakeholder_id,salutation:salutation};
                         var url = '/tracs/ajax/salaryReview_chair_ajax/update_salaryreviewchair';
                         $.post(url, postdata, function(data) {
                                 $("div#notice").html('Salutation is updated.');
                                 $("div#notice").css('display', 'block');
                                 $("div#notice").fadeOut(5000);
                        });
       });

bootstrap-datepicker.js needs to be fixed, the new version can be found:
 https://github.com/uxsolutions/bootstrap-datepicker/tree/master/js
or used
wget https://raw.githubusercontent.com/uxsolutions/bootstrap-datepicker/master/js/bootstrap-datepicker.js

If you still used old bootstrap-datepicker.js, you can use
var datePicker = $('.date-picker').datePicker().on('changeDate', function(ev) {
    //Functionality to be called whenever the date is changed
});
 
or 
var c=0;var send=false;
    $(document).ready(function() {
        jQuery( ".ed" ).datepicker({ 
            format: "yyyy-mm-dd",
            autoclose:!0
        }).on('change',function() {
            if(c==2){
                c=0;
                send=true;
            }else{
                c++;
                send=false;
            }                
        });

    });
 
Reference:
http://stackoverflow.com/questions/22614041/bootstrap-datepicker-on-change-firing-3-times