We have live project with Nittro and it works great, but I have found we have an issue with IE11, the basic Nittro works, but when I use snippet.setup() in external file,... it is not called. In chrome, Edge, FF,... it works. Just IE11 and lower.
Does Nittro support IE11? Is there any known issue?
Hi, not that I know of.. what exactly do you mean by "use snippet.setup() in external file"? There might be a sort of race condition with the snippet.setup() part of your script being executed too late (after the setup phase has already been run by the snippet manager). I'd need more info about your code to know for sure.
It is hard to explain the whole code, but lets try it.
In layout.latte I am including JS files this way:
{* This is in <head> *}
<script type="text/javascript">window._stack = [];</script>
<script type="application/javascript" src="{webpack order.js}" async defer></script>
{* This is in <body> *}
<script type="application/javascript" src="{webpack vendor/nittro/nittro.min.js}" async defer></script>Than in order.js I am searching for all snippets
'use strict'; // eslint-disable-line
////////////////////////////////////////////////////////////////////////////////
// Import modules //////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
import './common/base';
import Orders from './app/orders';
import Forms from './components/forms';
import Navigation from './app/navigation';
const OrdersApp = new Orders();
const FormComponent = new Forms();
const Nav = new Navigation();
////////////////////////////////////////////////////////////////////////////////
// Events handling /////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
/**
* Before each page update, perform following actions
*/
window._stack.push((di) => {
let snippets = document.querySelectorAll('[id*="snippet-"]');
let initialSnippetsList = [];
for (let i = 0; i < snippets.length; i++) {
initialSnippetsList.push(snippets[i].id);
}
init(di, initialSnippetsList);
di.getService('snippetManager')
.on('after-update', evt => {
if (typeof evt.data.update !== 'undefined') {
init(di, Object.keys(evt.data.update));
}
});
});
function init(di, snippets) {
let page = di.getService('page');
let contentSnippet = page.getSnippet('snippet--content');
let navigationSnippet = page.getSnippet('snippet--navigation');
let billingSnippet = page.getSnippet('snippet-billingForm-form');
// Common functions
snippets.forEach((id) => {
let snippet = page.getSnippet(id);
FormComponent.handleSelectPicker(snippet);
FormComponent.handleTooltip(snippet);
FormComponent.handleFlatpicker(snippet);
FormComponent.handleNetteToggle(snippet);
});
// Special functions
OrdersApp.setPage(page);
OrdersApp.handleOrderPrice(contentSnippet);
OrdersApp.handleChangeCompany(billingSnippet);
Nav.handleOpenMenu(navigationSnippet);
}
Method handleOrderPrice is called, but snippet.setup() is not fired, but only in IE11,... Chrome, FF, Edge,... works fine. Do you have any idea?
...
handleOrderPrice(snippet) {
const snippetId = snippet.getId();
snippet
.setup(() => {
$(`#${snippetId} form#order-form input`)
.on('click', () => {
this.updateOrderPrice();
});
$(`#${snippetId} form#order-form input[type=text]`)
.on('focusout', () => {
this.updateOrderPrice();
});
this.updateOrderPrice();
})
.teardown(() => {
$('body').off('click', `#${snippetId} form#order-form input`, this.updateOrderPrice);
$('body').off('focusout', `#${snippetId} form#order-form input[type=text]`, this.updateOrderPrice);
});
}
updateOrderPrice() {
let total = 0.0;
$('form#order-form tr:has(input:checked) .order-price').each((i, el) => {
let value = 0.0;
if ($(el).is('input')) {
value = parseFloat($(el).val());
} else {
value = parseFloat($(el).text());
}
total += Number.isNaN(value) ? 0 : value;
});I'm thinking it might be an issue with the order.js script being loaded and run too late. One way to know for sure is to put the following inside your layout (e.g. at the end of <body>):
<script type="application/javascript">
_stack.push(function(di) {
di.getService('page').getSnippet({snippet.id content}).setup(function() {
console.log('setup of snippet "content"');
});
});
</script>Obviously if you don't have a content snippet in your layout, choose any other snippet that's there. Reload the page and check the console - if it says 'setup of snippet "content"' right after the initial page load, then it's as I thought; otherwise it might be a bug in Nittro.
Thanks, this helped. The issue was with the order of scripts because Tracy was killed in IE due to unknown reason and killed deferred files. Once I figured this out, I was able to solve IE11 issue with Number.isNaN which is not supported yet.
Glad it helped :-)
Sign in to post a reply