Monday, March 6, 2017

Powerful js library datable to export table in pdf, excel, sorting, freezing column and table header fixed (sticky)



Datable js library can be downloaded from
https://datatables.net/download/release

DataTables

DataTables is the core software of the DataTables project, and involves two primary files, the DataTables Javascript and CSS.

js:
https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
css:
https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css

FixedHeader

The FixedHeader plug-in will freeze in place the header, footer and left and/or right most columns in a DataTable, ensuring that title information will remain always visible.
js:
https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js
css
https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css 

Example:

$('#myTable').DataTable( {
    fixedHeader: true
} );

FixedColumns

FixedColumns "freezes" in place the left most columns in a scrolling DataTable, to provide a guide to the end user (for example an index column).
js:
https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js 
css
https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css

Export pdf and excel

Example

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
 Reference:
https://datatables.net/extensions/buttons/examples/initialisation/export.html 

Sorting

https://datatables.net/examples/basic_init/table_sorting.html

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  

Wednesday, October 19, 2016

SEC_ERROR_UNKNOWN_ISSUER when https in Firefox



When you connect to https website in Firrefox, you may get an error: you connection is not secure and SEC_ERROR_UNKNOWN_ISSUER error.

This is due to that Firefox background ssl certificate process is not updated. We can remove temporary Firefox storage to fix the problem. The process is as following:
 
1) Click Any folder in Windows
2) Click Tool->View at top menu of the folder.
 3)  Check "Show hidden files, folder and drive" checkbox
4) Go to C:\Users, click your user name
 5) Backup Firefox bookmark
6) Go to AppData\Local\Mozilla, remove Firefox folder
7) Go to AppData\Roaming\Mozilla, remove Firefox folder
 8) If  folder AppData\LocalLow\Mozilla exsits, go to AppData\LocalLow\Mozilla and remove Firefox folder.

Wednesday, September 28, 2016

Make bootstrap Modal dialog draggable, move up and change header/footer style


I have Modal code:

<!-- Universal Modal -->
<div class="modal fade" id="universalModal"  style="margin-top:-150px;" tabindex="-1" role="dialog" aria-labelledby="universalModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width:1000px;">                                    
    <div class="modal-content">
      <form role="form" id="universalModalForm">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"> Close</span></button>
          <h4 class="modal-title" id="universalModalLabel"><span class="glyphicon glyphicon-pencil"></span> Edit<span class="modal-title">.model-title</span></h4>
        </div>
        <div class="alert alert-danger fade in" id="universalModal-alert" style="display: none;">
          <span class="alert-body"></span>
        </div>
        <div class="modal-body">.modal-body</div>
        <div class="modal-footer">
          <input type="hidden" id='stakeholder_id' name='stakeholder_id'>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary" id="submitBtn"></button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- End Universal Modal -->
 1) To move  bootstrap Modal dialog up, I used style="margin-top:-150px;" for my id in top div including modal class.
2) To make   bootstrap Modal dialog draggable via modal header, body and footer
                 $('#universalModal').modal('show');
                $('#universalModal .modal-dialog').draggable({
                  handle: ".modal-header, .modal-body, .modal-footer"
                 });

3) To change header and footer style
<style>
  .modal-header  {
      background-color: #5cb85c;
      color:white !important;
      text-align: center;
      font-size: 20px;
  }
  .modal-footer {
      background-color: #5cb85c;;
  }

</style>