We Keep Coding

How to preload css called in JS

How do I preload the css in the following code? I have updated my code with Denis suggestions, but it did not work. Now the pages are not finding css at all. I might be missing something since I do not have much about js. Am i missing something? Thanks again Denis, for your suggestion.
This is a free template that i downloaded somewhere. Its quite lite and solves my pbn needs while keeping the site blazing fast. But I have never seen a html template calling css from a js before. I know how to preload files in html, but no clue what would be the proper attribute for it to be used in a js. This can get me the 100 page score i have been trying for long. Any of JS masters help will be much appreciated.
(function($) {
const item = {
reset: 'full',
breakpoints: {
global: { range: '*', rel: 'preload', href: 'css/style.css', containers: 1400, grid: { gutters: 50 } },
wide: { range: '-1680', rel: 'preload', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
normal: { range: '-1280', rel: 'preload', href: 'css/style-normal.css', containers: 960, lockViewport: true },
narrow: { range: '-980', rel: 'preload', href: 'css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
narrower: { range: '-840', rel: 'preload', href: 'css/style-narrower.css', grid: { gutters: 20, collapse: 1 } },
mobile: { range: '-640', rel: 'preload', href: 'css/style-mobile.css', grid: { gutters: 15, collapse: 2 } }
}
}
Object.keys(item.breakpoints).forEach(key=>{
var res = document.createElement("link");
res.rel = item.breakpoints[key].rel;
res.as = "style";
res.href = item.breakpoints[key].href;
document.head.appendChild(res)
})
}
}, {
layers: {
layers: {
navPanel: {
animation: 'pushX',
breakpoints: 'narrower',
clickToClose: true,
height: '100%',
hidden: true,
html: '<div data-action="navList" data-args="nav"></div>',
orientation: 'vertical',
position: 'top-left',
side: 'left',
width: 275
},
titleBar: {
breakpoints: 'narrower',
height: 44,
html: '<span class="toggle" data-action="toggleLayer" data-args="navPanel"></span><span class="title" data-action="copyHTML" data-args="logo"></span>',
position: 'top-left',
side: 'top',
width: '100%'
}
}
}
});
$(function() {
var $window = $(window);
// Forms (IE<10).
var $form = $('form');
if ($form.length > 0) {
$form.find('.form-button-submit')
.on('click', function() {
$(this).parents('form').submit();
return false;
});
if (skel.vars.IEVersion < 10) {
$.fn.n33_formerize=function(){var _fakes=new Array(),_form = $(this);_form.find('input[type=text],textarea').each(function() { var e = $(this); if (e.val() == '' || e.val() == e.attr('placeholder')) { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).blur(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).focus(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); _form.find('input[type=password]').each(function() { var e = $(this); var x = $($('<div>').append(e.clone()).remove().html().replace(/type="password"/i, 'type="text"').replace(/type=password/i, 'type=text')); if (e.attr('id') != '') x.attr('id', e.attr('id') + '_fakeformerizefield'); if (e.attr('name') != '') x.attr('name', e.attr('name') + '_fakeformerizefield'); x.addClass('formerize-placeholder').val(x.attr('placeholder')).insertAfter(e); if (e.val() == '') e.hide(); else x.hide(); e.blur(function(event) { event.preventDefault(); var e = $(this); var x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } }); x.focus(function(event) { event.preventDefault(); var x = $(this); var e = x.parent().find('input[name=' + x.attr('name').replace('_fakeformerizefield', '') + ']'); x.hide(); e.show().focus(); }); x.keypress(function(event) { event.preventDefault(); x.val(''); }); }); _form.submit(function() { $(this).find('input[type=text],input[type=password],textarea').each(function(event) { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) e.attr('name', ''); if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); }).bind("reset", function(event) { event.preventDefault(); $(this).find('select').val($('option:first').val()); $(this).find('input,textarea').each(function() { var e = $(this); var x; e.removeClass('formerize-placeholder'); switch (this.type) { case 'submit': case 'reset': break; case 'password': e.val(e.attr('defaultValue')); x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } else { e.show(); x.hide(); } break; case 'checkbox': case 'radio': e.attr('checked', e.attr('defaultValue')); break; case 'text': case 'textarea': e.val(e.attr('defaultValue')); if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } break; default: e.val(e.attr('defaultValue')); break; } }); window.setTimeout(function() { for (x in _fakes) _fakes[x].trigger('formerize_sync'); }, 10); }); return _form; };
$form.n33_formerize();
}
}
// Dropdowns.
$('#nav > ul').dropotron({
offsetY: -15,
hoverDelay: 0
});
});
})(jQuery);

You can use Object.keys for get array of breakpoints item, then you can appendChild to document.head
So, write code like this:
const item = {
reset: 'full',
breakpoints: {
global: { range: '*', rel: 'preload', href: 'css/style.css', containers: 1400, grid: { gutters: 50 } },
wide: { range: '-1680', rel: 'preload', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
normal: { range: '-1280', rel: 'preload', href: 'css/style-normal.css', containers: 960, lockViewport: true },
narrow: { range: '-980', rel: 'preload', href: 'css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
narrower: { range: '-840', rel: 'preload', href: 'css/style-narrower.css', grid: { gutters: 20, collapse: 1 } },
mobile: { range: '-640', rel: 'preload', href: 'css/style-mobile.css', grid: { gutters: 15, collapse: 2 } }
}
}
Object.keys(item.breakpoints).forEach(key=>{
var res = document.createElement("link");
res.rel = item.breakpoints[key].rel;
res.as = "style";
res.href = item.breakpoints[key].href;
document.head.appendChild(res)
})
See in playground: https://jsfiddle.net/denisstukalov/3euofv17/#&togetherjs=RqKywyBFh0

jqgrid load save state data doesn't load dynamicly

I have jqgrid page with a lot of columns. Idea is to allow user choose columns and their order in table and save this order and column count in cookies. For this purposes I use $.jgrid.saveState() for saving and $.jgrid.loadState() for restoring jqgrid options from cookies. This methods works fine. But I don't want to save data to storage: only column order and filter. I tried option restoreData: false and storeData: false, but it didn't work.
Here the code of my jqgrid:
jQuery(function ($) {
var table = $("#table");
var pager = "#pager";
var search_panel = "#search";
var localization = globalLocale;
var colNames = [ "Mobile direction total time (sec)", "Mobile direction q-ty ", "Mobile time Percent",
"City direction total time (sec)", "City direction q-ty", 'City time Percent' ];
var exportToCsvBut = "Export to excell";
resizeToFitPageSize(table);
resizeOnSidebar(table);
$(function () {
var d = new Date();
var month = d.getMonth();
var day = d.getDate();
var year = d.getFullYear();
var defCurDate = moment().startOf('day').format('DD.MM.YYYY HH:mm:ss');
var defNextDate = moment().endOf('day').format('DD.MM.YYYY HH:mm:ss');
var from = $('#datetimepickerFrom');
var to = $('#datetimepickerTo');
if (from.val() === "" || to.val() === "") {
from.val(defCurDate);
to.val(defNextDate);
}
$("#datetimepickerFrom").datetimepicker({
dateFormat: 'dd.mm.yy',
timeFormat: 'HH:mm:ss',
defaultDate: new Date(year, month, day + 1, 00, 00),
onClose: function () {
beforeRefresh();
}
});
$("#datetimepickerTo").datetimepicker({
dateFormat: 'dd.mm.yy',
timeFormat: 'HH:mm:ss',
defaultDate: new Date(year, month, day + 1, 00, 00),
onClose: function () {
beforeRefresh();
}
});
defCurDate = $('#datetimepickerFrom').val();
defNextDate = $('#datetimepickerTo').val();
});
var initDate = function (elem) {
$(elem).datetimepicker({
dateFormat: 'd.m.Y H:i:s',
showButtonPanel: true
});
};
var template = {width: 160, fixed: true, align: 'center', editable: false, stype: 'text'};
var colModel = [
{
name: 'mobileDirectionTotalTime',
index: 'mobileDirectionTotalTime',
sortname: 'mobileDirectionTotalTime',
template: template,
formatter: nullFormatter,
sorttype: 'number'
},
{
name: 'mobileDirectionQty',
index: 'mobileDirectionQty',
sortname: 'mobileDirectionQty',
template: template,
formatter: nullFormatter,
sorttype: 'number'
},
{
name: 'mobileDirectionPercent',
index: 'mobileDirectionPercent',
sortname: 'mobileDirectionPercent',
width: 120,
fixed: true, align: 'center', editable: false,
template: "number",
sorttype: 'number'
},
{
name: 'cityDirectionTotalTime',
edittype: "custom",
sortname: 'cityDirectionTotalTime',
formatter: null,
sorttype: 'number'
},
{
name: 'cityDirectionQty',
index: 'cityDirectionQty',
sortname: 'cityDirectionQty',
template: template,
sorttype: 'number'
},
{
name: 'cityDirectionTimePercent',
index: 'cityDirectionTimePercent',
sortname: 'cityDirectionTimePercent',
template: template,
sorttype: 'number'
},
];
table.jqGrid({
url: URL_DATA,
datatype: "json",
jsonReader: {
repeatitems: true
},
height: 'auto',
colNames: colNames,
colModel: colModel,
shrinkToFit: false,
forceFit: true,
pager: pager,
toppager: true,
rowNum: 10,
rowList: [5, 10, 15, 20, 25, 30],
loadonce: true,
viewrecords: true,
storeNavOptions : true,
// navOptions: {reloadGridOptions: {fromServer: true}},
loadComplete: function () {
var table = this;
setTimeout(function () {
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
gridComplete: function () {
/*var idarray = table.jqGrid('getDataIDs');
if (idarray.length > 0) {
var firstid = table.jqGrid('getDataIDs')[0];
table.setSelection(firstid);
}*/
}
});
$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
function beforeRefresh() {
var from = $('#datetimepickerFrom');
var to = $('#datetimepickerTo');
if (from.val() != null && from.val() != '' && to.val() != null && to.val() != '') {
resetFilter('table', 'globalSearchText');
table.jqGrid().setGridParam({datatype: 'json'}).setGridParam({url: URL_DATA + "?from=" + from.val() + "&to=" + to.val()}).trigger("reloadGrid")
if (from.val() === "" || to.val() === "") {
from.val(defCurDate);
to.val(defNextDate);
}
}
}
//navButtons
table.jqGrid('navGrid', pager,
{ //navbar options
cloneToTop: true,
edit: false,
add: false,
del: false,
search: true,
searchicon: 'ace-icon fa fa-search orange',
refresh: true,
beforeRefresh: function () {
var from = $('#datetimepickerFrom');
var to = $('#datetimepickerTo');
if (from.val() != null && from.val() != '' && to.val() != null && to.val() != '') {
resetFilter('table', 'globalSearchText');
table.jqGrid().setGridParam({datatype: 'json'}).setGridParam({url: URL_DATA + "?from=" + from.val() + "&to=" + to.val()}).trigger("reloadGrid")
if (from.val() === "" || to.val() === "") {
from.val(defCurDate);
to.val(defNextDate);
}
}
},
refreshicon: 'ace-icon fa fa fa-refresh green',
view: true,
viewicon: 'ace-icon fa fa-search-plus grey'
}, {}, {}, {},
{
multipleSearch: true,
searchOnEnter: true,
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
},
{
//view record form
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
form.closest('div.ui-jqdialog').center();
}
}
);
addToolButton({
caption: "",
buttonicon: "ace-icon fa fa-calculator blue",
title: "Выбрать столбцы",
onClickButton: function () {
$(this).jqGrid('columnChooser',
{
width: 550,
msel_opts: {dividerLocation: 0.5}, modal: true
});
$("#colchooser_" + $.jgrid.jqID(this.id) + ' div.available>div.actions')
.prepend('<label style="float:left;position:relative;margin-left:0.6em;top:0.6em">Поиск:</label>');
}
}, table, pager);
addSearchField('table', 'globalSearchText');
$(window).triggerHandler('resize.jqGrid');
table.triggerHandler("jqGridAfterGridComplete");
destroyGrid(table);
$('#table')
.append($("<div style='margin-top: 10px'>" +
"<button id='savestate'>save state</button>" +"<button id='loadstate'>load state</button>" +
"</div>"));
$("#savestate").click(function(){
$.jgrid.saveState("table");
});
$("#loadstate").click(function(){
$.jgrid.loadState("table", {}, {});
})
});
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
Here the view of table page:
After user press load state and save state it displays data which was before but not actual:
It just show data which was saved in localstorage.
If I add storeData: false it just diplayed table with no data and doens't load new data from server.
Can anyone help?
P.S In case someone will have the same problem:
$("#table").jqGrid().setGridParam({datatype:'json'}).setGridParam({url : URL_DATA}).trigger("reloadGrid"); after $.jgrid.loadState("table", '', { restoreData: false}); will load new data in loaded grid.

I recommend you to use restoreData: false in loadState and after this command to reload the grid with trigger by example
$("#loadstate").click(function(){
$.jgrid.loadState("table", '', { restoreData: false});
$("#table").trigger("reloadGrid");
});
This will reload fresh grid data from server with the current setting

On selection of row in ext js grid checkbox gets selected

I am using Ext.grid.CheckboxSelectionModel with Ext.grid.GridPanel to display grid with checkbox column.
But when I am clicking on row checkbox also get seleted.
I want checkbox should not get selected while selecting row of grid.
Is there any way to achieve this.
Below is my code snippet.
var cboxSelModel =new Ext.grid.CheckboxSelectionModel({
checkOnly : true,
width:100,
header: defaultVal,
id: 'test',
locked: true,
singleSelect: true,
listeners: {
rowselect: function (sm, rIndex, keepExisting, record) {
uncheckIndex = -1;
cIndex =rIndex;
updateDefaultValue();
},
rowdeselect: function (sm, rIndex, keepExisting, record) {
cIndex = -1;
uncheckIndex =rIndex;
updateDefaultValue();
}
}
});
grid = new Ext.grid.GridPanel({
id:'grid',
width:'99%',
border:true,
store: store,
tbar: toolBar,
autoscroll: false,
height :'100px',
autoHeight :false,
sm: cboxSelModel,
cm :cm,
height:150,
layout: 'fit',
stateful: true,
stateId: 'grid',
autoScroll:true,
enableColumnResize : false,
enableColumnMove : false,
viewConfig:{
forceFit:true,
scrollOffset:0
},
autoFitColumns: true,
listeners: {
afterrender: function() {
setSelectedRows();
var store=grid.getStore();
if(store.data.length > 0 ){
Ext.getCmp('btnSort').setDisabled(false);
Ext.getCmp('btnSort').setIconClass('bmcSort');
}
},delay: 1000,
cellClick :function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent){
storeindex = iCellEl;
var record = grid.store.getAt(iCellEl);
var dValue=record.get('displayValue');
var sValue=record.get('storedValue');
var dataArray = getListData();
sValue=dataArray[iCellEl][1];
sValue = Ext.util.Format.htmlDecode(sValue);
dValue = Ext.util.Format.htmlDecode(dValue);
document.getElementById(InputPageComp.ComponentVars.storedValue).value=sValue;
document.getElementById(InputPageComp.ComponentVars.displayValue).value=dValue;
document.getElementById('addbtn_id').style['display']= 'none';
document.getElementById('updatebtn_id').style['display']= 'block';
Ext.getCmp('btnRemove').setDisabled(false);
Ext.getCmp('btnRemove').setIconClass('bmcDeleteSLT');
grid.getSelectionModel().selectRow(iCellEl);
}
}
});

var sm = Ext.create('Ext.selection.CheckboxModel',{
checkOnly: true
});
I have tested. It should work

Try like this (in grid configs):
selModel: {
selType: 'checkboxmodel',
checkOnly: true
}
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1ncs

How to change grid column value on DataBound event

I have the following Grid,
<div class="kotgrid">
</div>
And I bound the data as following. Here I want to change timedelay column value on DataBound event,
$(".kotgrid").kendoGrid({
dataSource: dataSource,
dataBound: function (e) {
var grid = this;
grid.tbody.find('>tr').each(function () {
var dataItem = grid.dataItem(this);
var d = new Date();
var currentTime = parseTime(dataItem.servertime);
var currenTime = d.getHours() + ":" + d.getMinutes();
var meanTime = diff(orderTime2, currenTime2)
//I want to set this meanTime in timedelay coloumn. How can I achieve this?
})
},
filterable: true,
scrollable: true,
columns: [
{ hidden: true, field: "orderitemid" },
{ field: "tableid", title: "Table No" },
{ field: "itemname", title: "Items" },
{ field: "quantity", title: "Quantity" },
{ field: "modifier", title: "Modifier" },
{ hidden: true, field: "orderedtime", title: "Time Delay" },
{ field: "timedelay", title: "Time Delay" },
{ hidden: true, field: "alert" },
{ hidden: true, field: "category", groupHeaderTemplate: "#= value #" },
{ command: { text: "Pickup", click: showDetails} }
],
mobile: "phone",
editable: false,
selectable: "row",
height: "600px"
});
I don't know how to achieve it. Any help will be highly appreciable.
Thanks in advance.

You don't need to iterate over the <tr> elements, unless you only want to do it for the current page. You can just iterate over grid.dataSource.data().
So you could do something like:
var data = this.dataSource.data();
$(data).each(function() {
var d = new Date();
var currentTime = parseTime(this.servertime);
var currenTime = d.getHours() + ":" + d.getMinutes();
var meanTime = diff(orderTime2, currenTime2)
// set on dataItem
this.set("timedelay", meanTime);
});
Regardless of how you get access to the dataItem, you can set any property using the set method (the data source contains Model items which inherit from ObservableObject).

easy ui with null data bug

I am using easyui for my application. I need to show empty grids for some reasons and I send null data to easyui. However it doesn't show empty grid but a sort number and a button at the first column.
Here is my code:
$('#GRID_PT_TARIFF_CONTRACT').datagrid({
singleSelect: true,
remoteSort: false,
fitcolumns: true,
columns: [[
{ field: 'action', title: 'İşlem', width: (_width * 0.08).toString(), sortable: false, formatter: function (value, row, index) {
var button = "";
button = '<input type="button" value="Tarifeyi aç" class="BttnWindow" onclick="DESIGN.OPEN_SEGMENT_FRAME_BY_BUTTON(\'' + row.TariffId+ '\',\'' + row.TariffName + '\',\'' + row.ContractName + '\',\'' + row.Supplier + '\') "/>';
return button;
}
},
{ field: 'TariffName', title: 'Taslak Tarife Tanımı', width: '100%', sortable: true },
{ field: 'TariffStat', title: 'Taslak Tarife Durumu', width: '100%', sortable: true },
{ field: 'Supplier', title: 'Tedarikçi', width: '100%', sortable: true },
{ field: 'ContractName', title: 'Sözleşme Tanımı', width: '100%', sortable: true },
{ field: 'ContractStat', title: 'Sözleşme Durumu', width: '100%', sortable: true },
{ field: 'StartDate', title: 'Başlangıç Tarihi', width: '100%', sortable: true },
{ field: 'EndDate', title: 'Bitiş Tarihi', width: '100%', sortable: true },
{ field: 'NoticePeriod', title: 'İhbar Süresi', width: '100%', sortable: true, formatter: function (value, row, index) {
var val;
if (row.TariffId != null) {
val = value + ' Gün';
}
return val;
}
},
{ field: 'ValidityPeriod', title: 'Geçerilik Süresi', width: '100%', sortable: true, formatter: function (value, row, index) {
var val;
if (row.TariffId != null) {
val = value + ' Ay';
}
return val;
}
}
]],
onClickRow: function () {
var row = $('#GRID_PT_TARIFF_CONTRACT').datagrid('getSelected');
if (row.TariffId != null) {
GLOBALS.SelectedTariffId = row.TariffId.toString();
//DEGIGN.ROWCLICKEVENT
}
},
onDblClickRow: function () {
var row = $('#GRID_PT_TARIFF_CONTRACT').datagrid('getSelected');
if (row.TariffId != null) {
GLOBALS.SelectedTariffId = row.TariffId.toString();
GLOBALS.SelectedTariffName = row.TariffName.toString();
GLOBALS.SelectedContractName = row.ContractName.toString();
GLOBALS.SelectedSupplier = row.Supplier.toString();
DESIGN.CREATE_TARIFF_WIN(row.TariffId);
}
},
onLoadSuccess: function (data) {
var panel = $(this).closest(".datagrid");
var dg = $(this);
panel.find("div.datagrid-view2 > div.datagrid-body tr:first > td[field]").each(function (k, v) {
var bodyCol = $(v);
var field = bodyCol.attr("field");
var headerCol = panel.find("div.datagrid-view2 > div.datagrid-header tr:first > td[field='" + field + "']");
var bodyContent = bodyCol.children(":first");
var headerContent = headerCol.children(":first");
var content = null;
if (bodyCol.width() > headerCol.width()) {
content = bodyCol.children(":first");
} else {
content = headerCol.children(":first");
}
var col = dg.datagrid("getColumnOption", field);
col.width = content.outerWidth();
col.boxWidth = $.boxModel == true ? content.width() : content.outerWidth();
bodyContent.width(col.boxWidth);
headerContent.width(col.boxWidth);
});
dg.datagrid("fitColumns");
dg.datagrid("fixColumnSize");
}
});
And here is the image:

This topic will help you and then I changed extension code with;
var myview = $.extend({}, $.fn.datagrid.defaults.view, {
onAfterRender: function (target) {
$.fn.datagrid.defaults.view.onAfterRender.call(this, target);
var opts = $(target).datagrid('options');
var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
vc.children('div.datagrid-empty').remove();
if ($(target).datagrid('getRows').length <= 1) {
if ($(target).datagrid('getRows')[0].Id == null) {
var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
d.css({
position: 'absolute',
left: 0,
top: 25,
height: 25,
width: '100%',
textAlign: 'center',
background: 'snow'
});
}
}
}
});