Selecting dropdown inside of editor modal broke in Firefox
Selecting dropdown inside of editor modal broke in Firefox
I am trying to figure out why my dropdowns work in Chrome but not in Firefox. I have my editor setup and my select dropdowns are not responding. I have looked in the console and I do not see any javascript error. Here is my code for including the plugins.
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="css/editor.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/itemCreation.css">
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="js/dataTables.editor.js"></script>
<script type="text/javascript" src="js/dataTables.colResize.js"></script>
<!-- CK Editor -->
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<!-- Scripts for functionality -->
<script src="js/jquery.validate.min.js"></script>
<script src="js/additional-methods.js"></script>
Here is my code for the editor fields
editor = new $.fn.dataTable.Editor( {
ajax: '/manager/creation/getRecords.php',
table: '#scratchTable',
display: 'lightbox',
fields: [{
label: "Item ID:",
name: "item_id"
}, {
label: "Short Description:",
name: "item_desc",
}, {
label: "Full Description:",
type: "textarea",
name: "item_name"
}, {
label: "Full Detail:",
type: "textarea",
name: "item_detail"
}, {
label: "Start Date:",
name: "auc_start",
type: 'datetime'
}, {
type: "select",
label: "Time Zone:",
name: "tzoffset",
options: [
{ label : "Please select", value: '' },
{ label : "Eastern", value: '0' },
{ label : "Central", value: '1' },
{ label : "Mountain", value: '2' },
{ label : "Pacific", value: '3' },
{ label : "Alaska", value: '4' },
{ label : "Hawaii", value: '5' }
]
}, {
label: "Start Time:",
name: "start_time",
type: "select",
options: [
{ label : "Please select", value: '' },
"00:00 A.M.",
"00:15 A.M.",
"00:30 A.M.",
"00:45 A.M.",
"01:00 A.M.",
"01:15 A.M.",
"01:30 A.M.",
"01:45 A.M.",
"02:00 A.M.",
"02:15 A.M.",
"02:30 A.M.",
"02:45 A.M.",
"03:00 A.M.",
"03:15 A.M.",
"03:30 A.M.",
"03:45 A.M.",
"04:00 A.M.",
"04:15 A.M.",
"04:30 A.M.",
"04:45 A.M.",
"05:00 A.M.",
"05:15 A.M.",
"05:30 A.M.",
"05:45 A.M.",
"06:00 A.M.",
"06:15 A.M.",
"06:30 A.M.",
"06:45 A.M.",
"07:00 A.M.",
"07:15 A.M.",
"07:30 A.M.",
"07:45 A.M.",
"08:00 A.M.",
"08:15 A.M.",
"08:30 A.M.",
"08:45 A.M.",
"09:00 A.M.",
"09:15 A.M.",
"09:30 A.M.",
"09:45 A.M.",
"10:00 A.M.",
"10:15 A.M.",
"10:30 A.M.",
"10:45 A.M.",
"11:00 A.M.",
"11:15 A.M.",
"11:30 A.M.",
"11:45 A.M.",
"12:00 P.M.",
"12:15 P.M.",
"12:30 P.M.",
"12:45 P.M.",
"01:00 P.M.",
"01:15 P.M.",
"01:30 P.M.",
"01:45 P.M.",
"02:00 P.M.",
"02:15 P.M.",
"02:30 P.M.",
"02:45 P.M.",
"03:00 P.M.",
"03:15 P.M.",
"03:30 P.M.",
"03:45 P.M.",
"04:00 P.M.",
"04:15 P.M.",
"04:30 P.M.",
"04:45 P.M.",
"05:00 P.M.",
"05:15 P.M.",
"05:30 P.M.",
"05:45 P.M.",
"06:00 P.M.",
"06:15 P.M.",
"06:30 P.M.",
"06:45 P.M.",
"07:00 P.M.",
"07:15 P.M.",
"07:30 P.M.",
"07:45 P.M.",
"08:00 P.M.",
"08:15 P.M.",
"08:30 P.M.",
"08:45 P.M.",
"09:00 P.M.",
"09:15 P.M.",
"09:30 P.M.",
"09:45 P.M.",
"10:00 P.M.",
"10:15 P.M.",
"10:30 P.M.",
"10:45 P.M.",
"11:00 P.M.",
"11:15 P.M.",
"11:30 P.M.",
"11:45 P.M."
]
}, {
type: "select",
label: "Display:",
name: "display_item",
options: [
{ label : "Please select", value: '' },
{ label : "ON", value: '1' },
{ label : "OFF", value: '0' }
]
}, {
type: "select",
label: "Taxable:",
name: "taxable",
options: [
{ label : "Please select", value: '' },
{ label : "ON", value: '1' },
{ label : "OFF", value: '0' }
]
}, {
label: "Item Count",
name: "item_count"
}, {
label: "Primary Image:",
name: "primary",
type: "upload",
dragDrop: true,
display: function (file_id) {
// Let's refresh the cached image! What a pain this was to figure out.
var d = new Date();
return '<img class="imageCollect" src="https://photo.xyz.net/images/' + org_id + '/temp/' + file_id + '_scratch_primary.jpg?timestamp=' + d.getTime() + '" />';
},
clearText: "Remove Image",
noFileText: 'No image',
ajaxData: function (data) {
data.append('id', editor.val('DT_RowId'));
}
}, {
label: "Secondary Images:",
name: "secondary",
type: "uploadMany",
dragDrop: true,
display: function (file_id) {
// Let's refresh the cached image! What a pain this was to figure out.
var d = new Date();
return '<div class="secondaryContainer"><img class="imageCollect" src="https://photo.xyz.net/images/' +org_id + '/temp/' + file_id + '_scratch_secondary.jpg?timestamp=' + d.getTime() + '" /></div>';
},
clearText: "Remove Image",
noFileText: 'No image',
ajaxData: function (data) {
data.append('id', editor.val('DT_RowId'));
}
}, {
name: "DT_RowId",
type: "hidden"
},{
name: "file_upload",
type: "hidden"
}]
} );
Any help is appreciated!
This discussion has been closed.
Answers
This one:
name: "start_time",?I don't immediately see anything wrong with it! Can you give me a link to a page showing the issue please?
The dropdown in this example appears to work okay in Firefox for me.
Allan