var FormValidation = function () {
return {
//main function to initiate the module
init: function () {
// for more info visit the official plugin documentation:
// http://docs.$.com/Plugins/Validation
var form1 = $('#form');
var error1 = $('.alert-danger', form1);
var success1 = $('.alert-success', form1);
$.validator.setDefaults({
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message classfocusInvalid: false, // do not focus the last invalid input
ignore: "",
invalidHandler: function (event, validator) { //display error alert on form submit
success1.hide();
error1.show();
App.scrollTo(error1, -200);
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-error'); // set error class to the control group
},
success: function (label) {
label
.closest('.form-group').removeClass('has-error'); // set success class to the control group
},
submitHandler: function (form) {
success1.show();
error1.hide();
form.submit();
}
});
}
};
}();
var FormValidationUsers = function () {
return {
//main function to initiate the module
init: function () {
// for more info visit the official plugin documentation:
// http://docs.$.com/Plugins/Validation
var form1 = $('.form-users');
var error1 = $('.alert-error', form1);
var success1 = $('.alert-success', form1);
$.validator.setDefaults({
errorElement: 'span', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
invalidHandler: function (event, validator) { //display error alert on form submit
success1.hide();
error1.show();
App.scrollTo(error1, -200);
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.help-inline').removeClass('ok'); // display OK icon
$(element)
.closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
},
unhighlight: function (element) { // revert the change dony by hightlight
$(element)
.closest('.control-group').removeClass('error'); // set error class to the control group
},
success: function (label) {
label
.addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
.closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group
},
submitHandler: function (form) {
success1.show();
error1.hide();
form.submit();
}
});
}
};
}();
var TableAdvanced = function () {
var initTable1 = function () {
var table = $('.tableadvanced');
var filter = $('#filter').val();
var buscar_ = { };
var page_ = 0;
/* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */
$.fn.dataTableExt.oStdClasses.sFilterInput = "form-control input-medium input-inline";
/* Set tabletools buttons and button container */
if(filter != ""){ buscar_ = { search: filter }; }
if( $('#current_page').length > 0 ){ page_ = ($('#current_page').val() - 1) * 20;}
var oTable = table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No hay informacion en la tabla",
"info": "Mostrando del _START_ al _END_ de _TOTAL_ registros",
"infoEmpty": "No se encontraron coincidencias",
"infoFiltered": "(filtrado un total de _MAX_ registros)",
"lengthMenu": "Mostrar _MENU_ registros",
"search": "Buscar:",
"zeroRecords": "No se encontraron coincidencias",
"paginate": {
"sPrevious": "Ant",
"sNext": "Sig"
}
},
"order": [
// [0, 'asc']
],
"lengthMenu": [
[20, 50, 75, 100, -1],
[20, 50, 75, 100, "Todos"] // change per page values here
],
"search": buscar_,
// set the initial value
"pageLength": 20,
"iDisplayStart": page_,
"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
"fnDrawCallback": function( oSettings ) {
$('a.filtros').on( 'click', function (e) {
e.preventDefault();
var url_ = $(this).attr('href');
url_ += '?filter=' + $('#filter').val();
url_ += '¤t_page=' + $('#current_page').val();
console.log(url_);
window.location.href = url_;
});
$('a.filtros2').on( 'click', function (e) {
e.preventDefault();
var url_ = $(this).attr('href');
url_ += '&filter=' + $('#filter').val();
url_ += '¤t_page=' + $('#current_page').val();
console.log(url_);
window.location.href = url_;
});
}
});
var tableWrapper = $('.tableadvanced_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
if( $('#current_page').length > 0 ){
$('.tableadvanced').on( 'page.dt', function () {
var oSettings = oTable.fnSettings();
var page = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
$('#current_page').val(page);
});
}
}
return {
//main function to initiate the module
init: function () {
if (!$().dataTable) {
return;
}
initTable1();
}
};
}();
var TableAdvancedSingleSelection = function () {
var initTable1 = function () {
var table = $('.tableadvancedSingleSelection');
$.fn.dataTableExt.oStdClasses.sFilterInput = "form-control input-medium input-inline";
var oTable = table.DataTable({
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No hay informacion en la tabla",
"info": "Mostrando del _START_ al _END_ de _TOTAL_ registros",
"infoEmpty": "No se encontraron coincidencias",
"infoFiltered": "(filtrado un total de _MAX_ registros)",
"lengthMenu": "Mostrar _MENU_ registros",
"search": "Buscar:",
"zeroRecords": "No se encontraron coincidencias",
"paginate": {
"sPrevious": "Ant",
"sNext": "Sig"
}
},
"order": [],
"lengthMenu": [
[20, 50, 75, 100, -1],
[20, 50, 75, 100, "Todos"]
],
"pageLength": 20,
"tableTools": {
"sRowSelect": "single"
},
"dom": "<'row'<'col-md-6 col-sm-12 hidden'T><'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
});
var tableWrapper = $('.tableadvanced_wrapper');
tableWrapper.find('.dataTables_length select').select2();
}
return {
init: function () {
if (!$().dataTable) {
return;
}
initTable1();
}
};
}();
var TableWithCheckbox = function () {
//var rows_selected = [];
var initTableCheckbox = function () {
var table = $('.tableWithCheckbox');
/* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */
$.fn.dataTableExt.oStdClasses.sFilterInput = "form-control input-xlarge input-inline";
/* Set tabletools buttons and button container */
var oTable = table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
'columnDefs': [{
'targets': 0,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (data, type, full, meta) {
return '';
}
}],
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No hay informacion en la tabla",
"info": "Mostrando del _START_ al _END_ de _TOTAL_ registros",
"infoEmpty": "No se encontraron coincidencias",
"infoFiltered": "(filtrado un total de _MAX_ registros)",
"lengthMenu": "Mostrar _MENU_ registros",
"search": "Buscar:",
"zeroRecords": "No se encontraron coincidencias",
"paginate": {
"sPrevious": "Ant",
"sNext": "Sig"
}
},
'order': [3, 'asc'],
"rowCallback": function(row, data, dataIndex){
// Get row ID
var rowId = data[0];
// If row ID is in the list of selected row IDs
if($.inArray(rowId, rows_selected) !== -1){
$(row).find('input[type="checkbox"]').prop('checked', true);
$(row).addClass('selected');
}
},
"lengthMenu": [
[20, 50, 75, 100, -1],
[20, 50, 75, 100, "Todos"] // change per page values here
],
// set the initial value
"pageLength": -1,
"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>" // horizobtal scrollable datatable
});
var tableWrapper = $('.tableadvanced_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
var table = $('.tableWithCheckbox').DataTable();
// Handle click on checkbox
$('.tableWithCheckbox tbody').on('click', 'input[type="checkbox"]', function(e){
var $row = $(this).closest('tr');
// Get row data
var data = table.row($row).data();
// Get row ID
// var rowId = data[0];
var rowId = $row.attr('id').substring($row.attr('id').indexOf('_') + 1, $row.attr('id').length);
// Determine whether row ID is in the list of selected row IDs
var index = $.inArray(rowId, rows_selected);
// If checkbox is checked and row ID is not in list of selected row IDs
if(this.checked && index === -1){
rows_selected.push(rowId);
// Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
} else if (!this.checked && index !== -1){
rows_selected.splice(index, 1);
}
if(this.checked){
$row.addClass('selected');
//$row.css('background-color', '#34495E');
} else {
//$row.css('background-color', '#F9F9F9');
$row.removeClass('selected');
}
// Update state of "Select all" control
updateDataTableSelectAllCtrl(table);
// Prevent click event from propagating to parent
e.stopPropagation();
});
// Handle click on table cells with checkboxes
$('.tableWithCheckbox').on('click', 'tbody td, thead th:first-child', function(e){
$(this).parent().find('input[type="checkbox"]').trigger('click');
});
// Handle click on "Select all" control
$('thead input[name="select_all"]', table.table().container()).on('click', function(e){
if(this.checked){
$('.tableWithCheckbox tbody input[type="checkbox"]:not(:checked)').trigger('click');
} else {
$('.tableWithCheckbox tbody input[type="checkbox"]:checked').trigger('click');
}
// Prevent click event from propagating to parent
e.stopPropagation();
});
// Handle table draw event
table.on('draw', function(){
// Update state of "Select all" control
updateDataTableSelectAllCtrl(table);
});
function updateDataTableSelectAllCtrl(table){
var $table = table.table().node();
var $chkbox_all = $('tbody input[type="checkbox"]', $table);
var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);
// If none of the checkboxes are checked
if($chkbox_checked.length === 0){
chkbox_select_all.checked = false;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = false;
}
// If all of the checkboxes are checked
} else if ($chkbox_checked.length === $chkbox_all.length){
chkbox_select_all.checked = true;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = false;
}
// If some of the checkboxes are checked
} else {
chkbox_select_all.checked = true;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = true;
}
}
}
}
return {
//main function to initiate the module
init: function () {
if (!$().dataTable) {
return;
}
initTableCheckbox();
}
};
}();
var tableWithCheckboxAjax = function () {
//var arrayForRows = [];
var initTableCheckboxAjax = function (tableClass, columns, order, extraParams, arrayForRows) {
var table = $(tableClass);
/* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */
$.fn.dataTableExt.oStdClasses.sFilterInput = "form-control input-xlarge input-inline";
/* Set tabletools buttons and button container */
var oTable = table.dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": $(tableClass).data('source'),
"data": function ( d ) {
d.busqueda = $(tableClass).closest('.dataTables_wrapper').find('input[type="search"]').val();
d.pointsale = $('#pointsale').val();
// son los parametros custom de cada tabla, se envia el obj.
for(var param in extraParams){
d[param] = extraParams[param];
}
}
},
"drawCallback": function( settings ) {
arrayForRows.length = 0;
},
'columns': columns,
'columnDefs': [{
'targets': 0,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (data, type, full, meta) {
return '';
}
}],
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"sProcessing": "Cargando...",
"emptyTable": "No hay informacion en la tabla",
"info": "Mostrando del _START_ al _END_ de _TOTAL_ registros",
"infoEmpty": "No se encontraron coincidencias",
"infoFiltered": "(filtrado un total de _MAX_ registros)",
"lengthMenu": "Mostrar _MENU_ registros",
"search": "Buscar:",
"zeroRecords": "No se encontraron coincidencias",
"paginate": {
"sPrevious": "Ant",
"sNext": "Sig"
}
},
'order': [order, 'asc'],
"rowCallback": function(row, data, dataIndex) {
// Get row ID
var rowId = data[0];
// If row ID is in the list of selected row IDs
if($.inArray(rowId, arrayForRows) !== -1){
$(row).find('input[type="checkbox"]').prop('checked', true);
$(row).addClass('selected');
}
},
"lengthMenu": [
[20, 50, 75, 100, -1],
[20, 50, 75, 100, "Todos"] // change per page values here
],
// set the initial value
"pageLength": 20,
"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>" // horizobtal scrollable datatable
});
var tableWrapper = $('.tableadvanced_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
var table = $(tableClass).DataTable();
// Handle click on checkbox
$(tableClass + ' tbody').on('click', 'input[type="checkbox"]', function(e){
var $row = $(this).closest('tr');
// Get row data
var data = table.row($row).data();
// Get row ID
// var rowId = data[0];
var rowId = $row.attr('id').substring($row.attr('id').indexOf('_') + 1, $row.attr('id').length);
// Determine whether row ID is in the list of selected row IDs
var index = $.inArray(rowId, arrayForRows);
// If checkbox is checked and row ID is not in list of selected row IDs
if(this.checked && index === -1) {
arrayForRows.push(rowId);
// Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
} else if (!this.checked && index !== -1) {
arrayForRows.splice(index, 1);
}
if(this.checked){
$row.addClass('selected');
//$row.css('background-color', '#34495E');
} else {
//$row.css('background-color', '#F9F9F9');
$row.removeClass('selected');
}
// Update state of "Select all" control
updateDataTableSelectAllCtrl(table);
// Prevent click event from propagating to parent
e.stopPropagation();
});
// Handle click on table cells with checkboxes
$(tableClass).on('click', 'tbody td, thead th:first-child', function(e){
$(this).parent().find('input[type="checkbox"]').trigger('click');
});
// Handle click on "Select all" control
$('thead input[name="select_all"]', table.table().container()).on('click', function(e){
if(this.checked){
$(tableClass + ' tbody input[type="checkbox"]:not(:checked)').trigger('click');
} else {
$(tableClass + ' tbody input[type="checkbox"]:checked').trigger('click');
}
// Prevent click event from propagating to parent
e.stopPropagation();
});
// Handle table draw event
table.on('draw', function(){
// Update state of "Select all" control
updateDataTableSelectAllCtrl(table);
});
function updateDataTableSelectAllCtrl(table){
var $table = table.table().node();
var $chkbox_all = $('tbody input[type="checkbox"]', $table);
var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);
// If none of the checkboxes are checked
if($chkbox_checked.length === 0){
chkbox_select_all.checked = false;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = false;
}
// If all of the checkboxes are checked
} else if ($chkbox_checked.length === $chkbox_all.length){
chkbox_select_all.checked = true;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = false;
}
// If some of the checkboxes are checked
} else {
chkbox_select_all.checked = true;
if('indeterminate' in chkbox_select_all){
chkbox_select_all.indeterminate = true;
}
}
}
}
return {
//main function to initiate the module
init: function (tableClass, columns, order, data, arrayForRows) {
if (!$().dataTable) {
return;
}
initTableCheckboxAjax(tableClass, columns, order, data, arrayForRows);
}
};
}();
var TablePagination = function () {
var initTable3 = function () {
var table = $('.tablePag');
// begin: third table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No hay informacion en la tabla",
"info": "Mostrando del _START_ al _END_ de _TOTAL_ registros",
"infoEmpty": "No se encontraron coincidencias",
"infoFiltered": "(filtrado un total de _MAX_ registros)",
"lengthMenu": "Mostrar _MENU_ registros",
"search": "Buscar:",
"zeroRecords": "No se encontraron coincidencias"
},
"lengthMenu": [
[20, 50, 75, 100, -1],
[20, 50, 75, 100, "Todos"] // change per page values here
],
// set the initial value
"pageLength": 20,
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"order": [
[0, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = $('.tablePag_wrapper');
// table.find('.group-checkable').change(function () {
// var set = $(this).attr("data-set");
// var checked = $(this).is(":checked");
// $(set).each(function () {
// if (checked) {
// $(this).attr("checked", true);
// } else {
// $(this).attr("checked", false);
// }
// });
// $.uniform.update(set);
// });
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
}
return {
//main function to initiate the module
init: function () {
if (!$().dataTable) {
return;
}
initTable3();
}
};
}();
var TableChecks = function () {
var initTable1 = function () {
var table = $('.tablechecks');
// begin first table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No hay informacion en la tabla",
"info": "Mostrando del _START_ al _END_ de _TOTAL_ registros",
"infoEmpty": "No se encontraron coincidencias",
"infoFiltered": "(filtrado un total de _MAX_ registros)",
"lengthMenu": "Mostrar _MENU_ registros",
"search": "Buscar:",
"zeroRecords": "No se encontraron coincidencias",
"paginate": {
"sPrevious": "Ant",
"sNext": "Sig"
}
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"columnDefs": [ {
"targets": 0,
"orderable": false,
"searchable": false
}],
"lengthMenu": [
[20, 50, 75, 100, -1],
[20, 50, 75, 100, "Todos"] // change per page values here
],
// set the initial value
"pageLength": 20,
"columnDefs": [{ // set default column settings
'orderable': false,
'targets': [0]
}, {
"searchable": false,
"targets": [0]
}],
"order": [
[1, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = $('.tablechecks_wrapper');
table.find('.group-checkable').on('change', function () {
var set = $(this).attr("data-set");
var checked = $(this).is(":checked");
$(set).each(function () {
if (checked) {
$(this).prop("checked", true);
} else {
$(this).prop("checked", false);
}
});
$.uniform.update(set);
});
table.on('change', 'tbody tr .checkboxes', function () {
$(this).parents('tr').toggleClass("active");
});
}
return {
//main function to initiate the module
init: function () {
if (!$().dataTable) {
return;
}
initTable1();
}
};
}();
var handleDateFormat = function () {
var shortDateFormat = 'dd/MM/yyyy';
var longDateFormat = 'dd/MM/yyyy HH:mm:ss';
$(".shortDateFormat").each(function (idx, elem) {
if ($(elem).is(":input")) {
$(elem).val($.format.date($(elem).val(), shortDateFormat));
} else {
$(elem).text($.format.date($(elem).text(), shortDateFormat));
}
});
$(".longDateFormat").each(function (idx, elem) {
if ($(elem).is(":input")) {
$(elem).val($.format.date($(elem).val(), longDateFormat));
} else {
$(elem).text($.format.date($(elem).text(), longDateFormat));
}
});
}
var handleDatePickers = function () {
if ($().datepicker) {
$('.date-picker').datepicker({
rtl: App.isRTL(),
orientation: "left",
autoclose: true
});
//$('body').removeClass("modal-open"); // fix bug when inline picker is used in modal
}
/* Workaround to restrict daterange past date select: http://stackoverflow.com/questions/11933173/how-to-restrict-the-selectable-date-ranges-in-bootstrap-datepicker */
}
var handleMultiSelect = function () {
$('.searchable').multiSelect({
selectableHeader: "",
selectionHeader: "",
afterInit: function(ms) {
var that = this,
$selectableSearch = that.$selectableUl.prev(),
$selectionSearch = that.$selectionUl.prev(),
selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
.on('keydown', function(e){
if (e.which === 40){
that.$selectableUl.focus();
return false;
}
});
that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
.on('keydown', function(e){
if (e.which == 40){
that.$selectionUl.focus();
return false;
}
});
},
afterSelect: function(){
this.qs1.cache();
this.qs2.cache();
},
afterDeselect: function(){
this.qs1.cache();
this.qs2.cache();
}
});
$('.multi-select').multiSelect({
keepOrder: true,
selectableOptgroup: true
});
$('#select-all').click(function(){
$('.multi-select').multiSelect('select_all');
return false;
});
$('#deselect-all').click(function(){
$('.multi-select').multiSelect('deselect_all');
return false;
});
}
var handleNestedSelects = function (){
$('select[data-option-dependent=true]').each(function (i) {
var observer_dom_id = $(this).data('opt-id');
var observed_dom_id = $(this).data('option-observed');
var url_mask = $(this).data('option-url');
var key_method = $(this).data('option-key-method');
var value_method = $(this).data('option-value-method');
var prompt = $('