html + Ajax + jquery + predefined Theme (Inspinia)

Question

I am having a couple of inconvenience, I am a new web programmer, and I'm venturing into this theme described in the title.

I'm working with a theme based on HTML + Jquery + Bootstrap and additional plugins that brings the default theme.

The situation is somewhat difficult, as I understand'm trying to implement Ajax to manage content. The problem is that not everything works well and I have some mistakes, especially when I add html content to DOM and think it might be the way or do I program my javascript.

I wish someone would see him and give me some councils.

Citing the main problems. 1. For example datepicker translate it to Spanish but I get an error (language). 2. Another problem is the re initialization of each plugins you see the content changes, this is necessary or is there a better way.

to add Content

$('[id^="p-"]').on("click", function (event, xhr, settings) {
    var id = event.target.id;
    $.ajax(
        {type:"GET",url:"index.php",data:{idform:id},
        error: function(xhr,status,error){alert(error);},
        success:    function(response) {$("#formarea").html(response);$("#formarea").attr('name', id);
            window.ChargeJS();
            CallProcces();// carga la llamada de procesos
        }
        });
    $.ajax(
        {type:"GET",url:"index.php",data:{idfield:id},
        error: function(xhr,status,error){alert(error);},
        success:    function(data) {$("#areatitle").html(data);}
    });
});

To re initilice bulk Plugins on content load

function LoadJSfile(){
/* La carga de Estos script debe ser testeada si se encuentra algun problema en los efectos del tema*/
    jQuery.getScript("sources/js/plugins/metisMenu/jquery.metisMenu.js"     , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/slimscroll/jquery.slimscroll.min.js"       , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/flot/jquery.flot.js"                                   , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/flot/jquery.flot.tooltip.min.js"                   , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/flot/jquery.flot.spline.js"                        , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/flot/jquery.flot.resize.js"                        , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/flot/jquery.flot.pie.js"                               , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/peity/jquery.peity.min.js"                     , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/inspinia.js"                                                       , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/pace/pace.min.js"                              , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/jquery-ui/jquery-ui.min.js"                    , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/gritter/jquery.gritter.min.js"                 , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/sparkline/jquery.sparkline.min.js"     , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/iCheck/icheck.min.js"                          , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/chartJs/Chart.min.js"                          , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/toastr/toastr.min.js"                              , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/datapicker/bootstrap-datepicker.js"        , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/dropzone/dropzone.js"                      , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/jeditable/jquery.jeditable.js"                     , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/dataTables/jquery.dataTables.js"                       , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/dataTables/dataTables.bootstrap.js"                        , function(data, textStatus, jqxhr){ });
    jQuery.getScript("sources/js/plugins/dataTables/dataTables.responsive.js"                       , function(data, textStatus, jqxhr){ });

}

Answer 1

other way is one by one plugin get a function to initialice it on every instance,

An call only ManagerGPlugin() when load new content, need implement unbid() or .one():

function ManagerGPlugin() {
    window.CheckBoxHandler();
    window.Select2();
    window.DataTable();
    window.ToolTipsHandler();
    window.DataTableTree();
    window.LoadDatepickers();
    window.LoadTimePickers();
    window.SumerTextArea();
    window.DropZone();
}

function ToolTipsHandler() {
    $('[data-toggle="tooltip"]').each(function() {
        $(this).tooltip({
            'placement': 'top'
        });
    });
    var showPopover = function() {
            $(this).popover('show');
        },
        hidePopover = function() {
            $(this).popover('hide');
        };
    $('.tooltip-handle').popover({
            trigger: 'manual',
            container: 'body'
        })
        .focus(showPopover)
        .blur(hidePopover)
        .hover(showPopover, hidePopover);
}

function CheckBoxHandler() {
    $('.i-checks').each(function() {
        /*Colores validos: minimal (black), red, green, blue, aero, grey, orange, yellow, pink, purple*/
        var color = $(this).attr('data-chk-color') || 'square';
        var square = (color == 'square') ? color : 'square-' + color;
        $(this).iCheck({
            checkboxClass: 'icheckbox_' + square,
            radioClass: 'iradio_' + square,
        });
    });
}

function Select2() {
    $('select').each(function() {
        $(this).off('change');
        var width = $(this).attr("data-width") || '100px';
        var x = this.required;
        $(this).select2({
            theme: 'bootstrap4',
            width: width,
            dropdownAutoWidth: true
        });
        if (x) {
            $(this).next().children().children().each(function() {
                $(this).css("border-color", "#f8ac59");
            });
        }
    });
}

function Select2Destroy() {
    $('select').each(function(i, obj) {
        if ($(obj).data('select2')) {
            $(obj).select2('destroy');
        }
    });
}

function DataTable() {
    $('table').each(function() {
        var left = $(this).attr("data-fixedColumnsLeft") || false;
        var right = $(this).attr("data-fixedColumnsRight") || false;
        var attoolset = $(this).attr("data-toolset") || false;
        var atpaging = $(this).attr("data-paging") || false;
        var atordering = $(this).attr("data-ordering") || false;
        var atinfo = $(this).attr("data-info") || false;
        var atsearching = $(this).attr("data-searching") || false;
        var atautoWidth = $(this).attr("data-autoWidth") || false;
        var atscrollCollapse = $(this).attr("data-scrollCollapse") || false;
        var atresponsive = $(this).attr("data-responsive") || false;
        var atscrollY = $(this).attr("data-scrollY") || false;
        var atscrollX = $(this).attr("data-scrollX") || false;
        var toolkit = '';
        if (attoolset == 'true') {
            toolkit = '<"html5buttons"B>';
        }
        $(this).DataTable({
            paging: atpaging,
            ordering: atordering,
            info: atinfo,
            searching: atsearching,
            autoWidth: atautoWidth,
            scrollCollapse: atscrollCollapse,
            responsive: atresponsive,
            scrollY: atscrollY,
            scrollX: atscrollX,
            fixedColumns: {
                leftColumns: left,
                rightColumns: right,
            },
            dom: toolkit + 'lTfgitp',
            "language": {
                "decimal": ".",
                "emptyTable": "No hay datos disponibles en la tabla",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Registros",
                "infoEmpty": "Mostrando 0 a 0 de 0 Registros",
                "infoFiltered": "(Filtrado a Partir de _MAX_ Registros)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "_MENU_",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "",
                "searchPlaceholder": "Inserte su Busqueda",
                "zeroRecords": "No Encontrado - lo siento",
                "paginate": {
                    "first": "Inicio",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
                "aria": {
                    "sortAscending": ": activar para ordenar la columna ascendente",
                    "sortDescending": ": activar para ordenar la columna descendente"
                }
            },
            "iDisplayLength": 10,
            "lengthMenu": [
                [5, 10, 25, 50, 100, 250, 500, 1000, -1],
                [5, 10, 25, 50, 100, 250, 500, 1000, "All"]
            ],
            buttons: [{
                extend: 'collection',
                text: 'Herramientas',
                buttons: [{
                    extend: 'copy',
                    text: 'Copiar',
                    title: function() {
                        return window.GenFileNameExport();
                    },
                    exportOptions: {
                        columns: ':visible',
                        //stripNewlines: false,
                        format: {
                            body: function(data) {
                                //Antes de mandarse al PDF cada valor pasa por aqui y es evaluado
                                var valor = '';
                                if (data.match("^<span")) {
                                    var datos = $(data);
                                    datos.find("span").each(function(index) {
                                        var text = $(this).text(); //get span content
                                        $(this).replaceWith(text); //replace all span with just content
                                    });
                                    data = datos.text();
                                }
                                if (~data.indexOf("<button")) {
                                    data = 'Correcto';
                                }
                                valor = data.toString(); //El campo debe ser STRING para que funcione
                                if (~data.indexOf(",<br> ")) {
                                    valor = valor.replace(/\,<br> /g, ",\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                } else if (~data.indexOf(", ")) {
                                    valor = valor.replace(/\, /g, ",\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                } else if (~data.indexOf(",")) {
                                    valor = valor.replace(/\,/g, ",\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                }
                                if (~data.indexOf("<br>")) {
                                    valor = valor.replace(/\<br>/g, '');
                                }
                                return valor;
                            }
                        }
                    },
                }, {
                    extend: 'excelHtml5',
                    title: function() {
                        return window.GenFileNameExport();
                    },
                    text: 'Excel',
                    filename: function() {
                        return window.GenFileNameExport();
                    },
                    exportOptions: {
                        columns: ':visible',
                        stripNewlines: false,
                        format: {
                            body: function(data) {
                                //Antes de mandarse al PDF cada valor pasa por aqui y es evaluado
                                var valor = '';
                                if (data.match("^<span")) {
                                    var datos = $(data);
                                    datos.find("span").each(function(index) {
                                        var text = $(this).text(); //get span content
                                        $(this).replaceWith(text); //replace all span with just content
                                    });
                                    data = datos.text();
                                }
                                if (~data.indexOf("<button")) {
                                    data = 'Correcto';
                                }
                                valor = data.toString(); //El campo debe ser STRING para que funcione
                                if (~data.indexOf(",<br> ")) {
                                    valor = valor.replace(/\,<br> /g, ",\r\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                } else if (~data.indexOf(", ")) {
                                    valor = valor.replace(/\, /g, ",\r\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                } else if (~data.indexOf(",")) {
                                    valor = valor.replace(/\,/g, ",\r\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                }
                                if (~data.indexOf("<br>")) {
                                    valor = valor.replace(/\<br>/g, '');
                                }
                                return valor;
                            }
                        }
                    },
                    customize: function(xlsx) {
                        var styles = $('cellXfs', xlsx.xl['styles.xml']);
                        styles.append('<xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyFont="1" applyFill="1" applyBorder="1" applyAlignment="1">' + '<alignment vertical="top" wrapText="1" />' + '</xf>');
                        var sheet = xlsx.xl.worksheets['sheet1.xml'];
                        var oxf = $('xf', xlsx.xl['styles.xml']);
                        var styleIndex = oxf.length;
                        $('row c', sheet).each(function() {
                            var value = $('is t', this).text();
                            var count = (value.match(/\n/g) || []).length;
                            if (count == 0) {
                                $(this).attr('s', styleIndex - 2);
                            } else {
                                $(this).attr('s', '55');
                            }
                        });
                        $('row:first c', sheet).attr('s', '32');
                    }
                }, {
                    extend: 'pdfHtml5',
                    title: function() {
                        return window.GenFileNameExport();
                    },
                    filename: function() {
                        return window.GenFileNameExport();
                    },
                    text: 'PDF',
                    orientation: 'landscape',
                    pageSize: 'LEGAL',
                    exportOptions: {
                        columns: ':visible',
                        stripNewlines: false,
                        format: {
                            body: function(data) {
                                //Antes de mandarse al PDF cada valor pasa por aqui y es evaluado
                                var valor = '';
                                if (data.match("^<span")) {
                                    var datos = $(data);
                                    datos.find("span").each(function(index) {
                                        var text = $(this).text(); //get span content
                                        $(this).replaceWith(text); //replace all span with just content
                                    });
                                    data = datos.text();
                                }
                                if (~data.indexOf("<button")) {
                                    data = 'Correcto';
                                }
                                valor = data.toString(); //El campo debe ser STRING para que funcione
                                if (~data.indexOf(",<br> ")) {
                                    valor = valor.replace(/\,<br> /g, ",\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                } else if (~data.indexOf(", ")) {
                                    valor = valor.replace(/\, /g, ",\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                } else if (~data.indexOf(",")) {
                                    valor = valor.replace(/\,/g, ",\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                }
                                if (~data.indexOf("<br>")) {
                                    valor = valor.replace(/\<br>/g, '');
                                }
                                return valor;
                            }
                        }
                    },
                }, {
                    extend: 'print',
                    text: 'Imprimir',
                    title: function() {
                        return window.GenFileNameExport();
                    },
                    customize: function(win) {
                        $(win.document.body).addClass('white-bg');
                        $(win.document.body).css('font-size', '10px');
                        $(win.document.body).find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit');
                    },
                    exportOptions: {
                        columns: ':visible',
                        //stripNewlines: false,
                        format: {
                            body: function(data) {
                                //Antes de mandarse al PDF cada valor pasa por aqui y es evaluado
                                var valor = '';
                                if (data.match("^<span")) {
                                    var datos = $(data);
                                    datos.find("span").each(function(index) {
                                        var text = $(this).text(); //get span content
                                        $(this).replaceWith(text); //replace all span with just content
                                    });
                                    data = datos.text();
                                }
                                if (~data.indexOf("<button")) {
                                    data = 'Correcto';
                                }
                                valor = data.toString(); //El campo debe ser STRING para que funcione
                                if (~data.indexOf(",<br> ")) {
                                    valor = valor.replace(/\,<br> /g, ",\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                } else if (~data.indexOf(", ")) {
                                    valor = valor.replace(/\, /g, ",\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                } else if (~data.indexOf(",")) {
                                    valor = valor.replace(/\,/g, ",\n"); //aca te llegan , y no <br> asi que reemplazo eso.
                                }
                                if (~data.indexOf("<br>")) {
                                    valor = valor.replace(/\<br>/g, '');
                                }
                                return valor;
                            }
                        }
                    },
                }, ]
            }, {
                extend: 'colvis',
                text: 'Adm',
            }, {
                text: 'Ayuda',
                action: function(e, dt, node, config) {
                    $.jAlert({
                        'title': 'Ayuda de Herramientas',
                        'content': msgtext,
                        'theme': 'blue',
                        'size': 'lg',
                        'showAnimation': 'fadeInUp',
                        'hideAnimation': 'fadeOutDown'
                    });
                }
            }, ],
            "initComplete": function(oSettings) {
                var oTable = this;
                oTable.fnPageChange('last');
            },
        })
    });
}

function DataTableDestroy() {

}

function DataTableTree() {
    $('table.TableWork.tree').each(function() {
        $(this).treegrid({
            expanderExpandedClass: 'glyphicon glyphicon-minus',
            expanderCollapsedClass: 'glyphicon glyphicon-plus',
            initialState: 'collapsed'
        });
    });
}

function LoadDatepickers() {
    $.fn.datepicker.defaults.language = 'es';
    $.fn.datepicker.dates['es'] = {
        days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"],
        daysShort: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab", "Dom"],
        daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"],
        months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
        monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
        today: "Hoy",
        clear: "Borrar",
        weekStart: 1,
    };
    $('div.input-group.date').each(function() {
        var target = $(this);
        target.find("input:text").each(function() {
            if (!$(this).is('[readonly]')) {
                target.datepicker({
                    todayBtn: "linked",
                    keyboardNavigation: false,
                    forceParse: false,
                    calendarWeeks: false,
                    autoclose: true,
                    format: "yyyy-M-dd",
                    dateFormat: "yyyy-M-dd",
                    language: 'es'
                });
            }
        });
    });
}

function LoadTimePickers() {
    $('div.input-group.time').each(function() {
        var target = $(this);
        target.find("input:text").each(function() {
            if (!$(this).is('[readonly]')) {
                $(this).timepicker();
                $(this).on('click', function() {
                    $(this).timepicker('showWidget');
                });
            }
        });
    });
}

function SumerTextArea() {
    $.extend($.summernote.lang, {
        'es-ES': {
            font: {
                bold: 'Negrita',
                italic: 'Cursiva',
                underline: 'Subrayado',
                clear: 'Quitar estilo de fuente',
                height: 'Altura de línea',
                name: 'Fuente',
                strikethrough: 'Tachado',
                superscript: 'Superíndice',
                subscript: 'Subíndice',
                size: 'Tamaño de la fuente'
            },
            image: {
                image: 'Imagen',
                insert: 'Insertar imagen',
                resizeFull: 'Redimensionar a tamaño completo',
                resizeHalf: 'Redimensionar a la mitad',
                resizeQuarter: 'Redimensionar a un cuarto',
                floatLeft: 'Flotar a la izquierda',
                floatRight: 'Flotar a la derecha',
                floatNone: 'No flotar',
                shapeRounded: 'Forma: Redondeado',
                shapeCircle: 'Forma: Círculo',
                shapeThumbnail: 'Forma: Marco',
                shapeNone: 'Forma: Ninguna',
                dragImageHere: 'Arrastrar una imagen o texto aquí',
                dropImage: 'Suelta la imagen o texto',
                selectFromFiles: 'Seleccionar desde los archivos',
                maximumFileSize: 'Tamaño máximo del archivo',
                maximumFileSizeError: 'Has superado el tamaño máximo del archivo.',
                url: 'URL de la imagen',
                remove: 'Eliminar imagen',
                original: 'Original'
            },
            video: {
                video: 'Vídeo',
                videoLink: 'Link del vídeo',
                insert: 'Insertar vídeo',
                url: '¿URL del vídeo?',
                providers: '(YouTube, Vimeo, Vine, Instagram, DailyMotion o Youku)'
            },
            link: {
                link: 'Link',
                insert: 'Insertar link',
                unlink: 'Quitar link',
                edit: 'Editar',
                textToDisplay: 'Texto para mostrar',
                url: '¿Hacia que URL lleva el link?',
                openInNewWindow: 'Abrir en una nueva ventana'
            },
            table: {
                table: 'Tabla',
                addRowAbove: 'Añadir fila encima',
                addRowBelow: 'Añadir fila debajo',
                addColLeft: 'Añadir columna izquierda',
                addColRight: 'Añadir columna derecha',
                delRow: 'Borrar fila',
                delCol: 'Eliminar columna',
                delTable: 'Eliminar tabla'
            },
            hr: {
                insert: 'Insertar línea horizontal'
            },
            style: {
                style: 'Estilo',
                p: 'p',
                blockquote: 'Cita',
                pre: 'Código',
                h1: 'Título 1',
                h2: 'Título 2',
                h3: 'Título 3',
                h4: 'Título 4',
                h5: 'Título 5',
                h6: 'Título 6'
            },
            lists: {
                unordered: 'Lista desordenada',
                ordered: 'Lista ordenada'
            },
            options: {
                help: 'Ayuda',
                fullscreen: 'Pantalla completa',
                codeview: 'Ver código fuente'
            },
            paragraph: {
                paragraph: 'Párrafo',
                outdent: 'Menos tabulación',
                indent: 'Más tabulación',
                left: 'Alinear a la izquierda',
                center: 'Alinear al centro',
                right: 'Alinear a la derecha',
                justify: 'Justificar'
            },
            color: {
                recent: 'Último color',
                more: 'Más colores',
                background: 'Color de fondo',
                foreground: 'Color de fuente',
                transparent: 'Transparente',
                setTransparent: 'Establecer transparente',
                reset: 'Restaurar',
                resetToDefault: 'Restaurar por defecto'
            },
            shortcut: {
                shortcuts: 'Atajos de teclado',
                close: 'Cerrar',
                textFormatting: 'Formato de texto',
                action: 'Acción',
                paragraphFormatting: 'Formato de párrafo',
                documentStyle: 'Estilo de documento',
                extraKeys: 'Teclas adicionales'
            },
            help: {
                'insertParagraph': 'Insertar párrafo',
                'undo': 'Deshacer última acción',
                'redo': 'Rehacer última acción',
                'tab': 'Tabular',
                'untab': 'Eliminar tabulación',
                'bold': 'Establecer estilo negrita',
                'italic': 'Establecer estilo cursiva',
                'underline': 'Establecer estilo subrayado',
                'strikethrough': 'Establecer estilo tachado',
                'removeFormat': 'Limpiar estilo',
                'justifyLeft': 'Alinear a la izquierda',
                'justifyCenter': 'Alinear al centro',
                'justifyRight': 'Alinear a la derecha',
                'justifyFull': 'Justificar',
                'insertUnorderedList': 'Insertar lista desordenada',
                'insertOrderedList': 'Insertar lista ordenada',
                'outdent': 'Reducir tabulación del párrafo',
                'indent': 'Aumentar tabulación del párrafo',
                'formatPara': 'Cambiar estilo del bloque a párrafo (etiqueta P)',
                'formatH1': 'Cambiar estilo del bloque a H1',
                'formatH2': 'Cambiar estilo del bloque a H2',
                'formatH3': 'Cambiar estilo del bloque a H3',
                'formatH4': 'Cambiar estilo del bloque a H4',
                'formatH5': 'Cambiar estilo del bloque a H5',
                'formatH6': 'Cambiar estilo del bloque a H6',
                'insertHorizontalRule': 'Insertar línea horizontal',
                'linkDialog.show': 'Mostrar panel enlaces'
            },
            history: {
                undo: 'Deshacer',
                redo: 'Rehacer'
            },
            specialChar: {
                specialChar: 'CARACTERES ESPECIALES',
                select: 'Selecciona Caracteres especiales'
            }
        }
    });
    $('div.sumertextarea').each(function() {
        $(this).summernote({
            toolbar: [
                ['style', ['bold', 'italic', 'clear']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']]
            ],
            focus: true,

            onInit: function() {
                $('.note-editor [data-name="ul"]').tooltip('disable');
            },
            lang: 'es-ES'
        });
    });
}

function DropZone() {
    $('div.dropzone').each(function() {
        var dropzone = $(this);
        dropzone.dropzone({
            autoProcessQueue: false,
            uploadMultiple: true,
            url: "/",
            maxFilesize: window.SIS.uploadFiles.size,
            maxFiles: window.SIS.uploadFiles.max,
            acceptedFiles: 'application/pdf, image/jpeg, image/jpg, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            dictDefaultMessage: "<strong>Coloque los archivos Aqui. </strong></br> (Peso Maximo 2Mb, Se Aceptan los Siguientes Formatos: jpg, pdf, xls, xlsx.)",
            addRemoveLinks: false,
            clickable: true,
            dictFallbackMessage: "Su navegador no soporta cargas de archivos de arrastrar y soltar.",
            dictFallbackText: "Utilice el formulario de respaldo a continuación para cargar sus archivos como en los días anteriores.",
            dictFileTooBig: "El archivo es demasiado grande ({{filesize}} Mb). Tamaño máximo de archivo: {{maxFilesize}} Mb.",
            dictInvalidFileType: "No puedes subir archivos de este tipo.",
            dictResponseError: "El servidor respondió con el código {{statusCode}}.",
            dictMaxFilesExceeded: "No puedes subir más archivos.",
            init: function() {
                this.on("addedfile", function(file) {
                    var _this = this;
                    //remove Button
                    var removeButton = document.createElement('div');
                    removeButton.setAttribute("class", "text-warning t-center t-hover");
                    $(removeButton).text('Quitar Archivo');
                    removeButton.addEventListener("click", function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        $('#RemoveFileModal').modal('toggle').on('click', '#outAceptar', function(e) {
                            _this.removeFile(file);
                        });
                    });
                    file.previewTemplate.appendChild(removeButton);
                    //Boton Vista Previa
                    var id = window.BuildRandID();
                    var cusButton = document.createElement('div');
                    cusButton.setAttribute("class", "text-info t-center t-hover");
                    cusButton.setAttribute("data-toggle", "modal");
                    cusButton.setAttribute("data-target", "#modal-info-" + id);
                    $(cusButton).text('Vista Previa');
                    //Modal
                    var render = '';
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        fileD = {
                            'dropzone': file,
                            'file': event.target.result,
                            'id': id,
                        };
                        render = RenderFile(fileD);
                        var modal = htmlmodal(id, render);
                        var disp = $('#Modal-js');
                        file.previewTemplate.appendChild(cusButton);
                        disp.append(modal);
                    };
                    //Ajuste del Diseño
                    reader.readAsDataURL(file);
                    $(file.previewElement).attr("class", "dz-preview dz-file-preview dz-processing dz-success dz-complete").find('.dz-preview');
                });
                this.on("error", function(file, response) {
                    var e = window.InitAlert();
                    var res = $(file.previewElement).addClass("dz-error").find('.dz-error-message').text(response.Message);
                    var plugsms = res[0].innerText;
                    var filename = file.name;
                    var cerror = '<b>Se a Tratado de subir un Archivo (' + filename + ') y ha ocurrido un error:</b><br>' + plugsms + '<br>';
                    e['target'] = 'SiSAlertModal';
                    e['title'] = 'Error en la Manipulacion de Archivos.';
                    e['smg'] = cerror;
                    e['hidder'] = false;
                    window.AlertShow(e);
                    if (!file.accepted) this.removeFile(file);
                });
            },
        });
    });
}