demo-xeditable.js 3.41 KB
Newer Older
Felipe Escala Torres committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
// Xeditable Demo
// ----------------------------------- 

(function(window, document, $, undefined){
    
    $(function(){

        // Font Awesome support
        $.fn.editableform.buttons =
          '<button type="submit" class="btn btn-primary btn-sm editable-submit">'+
            '<i class="fa fa-fw fa-check"></i>'+
          '</button>'+
          '<button type="button" class="btn btn-default btn-sm editable-cancel">'+
            '<i class="fa fa-fw fa-times"></i>'+
          '</button>';

       //defaults
       $.fn.editable.defaults.url = '../server/xeditable.res';

        //enable / disable
       $('#enable').click(function() {
           $('#user .editable').editable('toggleDisabled');
       });
        
        //editables 
        $('#username').editable({
               url: '../server/xeditable.res',
               type: 'text',
               pk: 1,
               name: 'username',
               title: 'Enter username'
        });
        
        $('#firstname').editable({
            validate: function(value) {
               if($.trim(value) === '') return 'This field is required';
            }
        });
        
        $('#sex').editable({
            prepend: "not selected",
            source: [
                {value: 1, text: 'Male'},
                {value: 2, text: 'Female'}
            ],
            display: function(value, sourceData) {
                 var colors = {"": "gray", 1: "green", 2: "blue"},
                     elem = $.grep(sourceData, function(o){return o.value == value;});
                     
                 if(elem.length) {
                     $(this).text(elem[0].text).css("color", colors[value]);
                 } else {
                     $(this).empty();
                 }
            }
        });
        
        $('#status').editable();
        
        $('#group').editable({
           showbuttons: false
        });
            
        $('#dob').editable();
              
        $('#event').editable({
            placement: 'right',
            combodate: {
                firstItem: 'name'
            }
        });
               
        $('#comments').editable({
            showbuttons: 'bottom'
        });
        
        $('#note').editable();
        $('#pencil').click(function(e) {
            e.stopPropagation();
            e.preventDefault();
            $('#note').editable('toggle');
       });
        
       $('#fruits').editable({
           pk: 1,
           limit: 3,
           source: [
            {value: 1, text: 'banana'},
            {value: 2, text: 'peach'},
            {value: 3, text: 'apple'},
            {value: 4, text: 'watermelon'},
            {value: 5, text: 'orange'}
           ]
        });
             
       $('#user .editable').on('hidden', function(e, reason){
            if(reason === 'save' || reason === 'nochange') {
                var $next = $(this).closest('tr').next().find('.editable');
                if($('#autoopen').is(':checked')) {
                    setTimeout(function() {
                        $next.editable('show');
                    }, 300);
                } else {
                    $next.focus();
                }
            }
       });
       
       // TABLE
       // ----------------------------------- 

        $('#users a').editable({
            type: 'text',
            name: 'username',
            title: 'Enter username'
        });

    });

})(window, document, window.jQuery);