How to use naja - 10 common examples
To help you get started, we’ve selected a few naja examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
DefinitelyTyped / DefinitelyTyped / types / naja / naja-tests.ts View on Github 
naja.snippetHandler.addEventListener('beforeUpdate', event => console.log(event.snippet, event.content));
naja.snippetHandler.addEventListener('afterUpdate', event => console.log(event.snippet, event.content));
naja.uiHandler.bindUI(document.createElement('div'));
naja.uiHandler.clickElement(document.createElement('button'));
naja.uiHandler.handleUI(new Event('change'));
naja.uiHandler.submitForm(document.createElement('form'));
naja.addEventListener('init', event => console.log(event.defaultOptions));
naja.addEventListener('interaction', event => console.log(event.element, event.originalEvent, event.options));
naja.addEventListener('before', event => console.log(event.data, event.method, event.url, event.xhr));
naja.addEventListener('start', genericListener);
naja.addEventListener('abort', genericListener);
naja.addEventListener('success', successListener);
naja.addEventListener('error', event => console.error(event.error));
naja.addEventListener('complete', completeListener);
naja.removeEventListener('start', genericListener);
naja.snippetHandler.removeEventListener('beforeUpdate', null);
type TestEvent = CustomEvent<{ customProperty: string }>;
interface OtherEvent extends Event {
otherProperty: number;
type: 'otherEvent';
}
const handler = (event: TestEvent): void => console.log(typeof event.detail.customProperty === 'string');
document.addEventListener('DOMContentLoaded', () => {
naja.initialize();
naja.initialize({ history: false, selector: '[data-ajax]', customOption: 1 });naja.formsHandler.processForm(new Event('submit'));
naja.uiHandler.allowedOrigins.push('http://localhost');
naja.snippetHandler.addEventListener('beforeUpdate', event => console.log(event.snippet, event.content));
naja.snippetHandler.addEventListener('afterUpdate', event => console.log(event.snippet, event.content));
naja.uiHandler.bindUI(document.createElement('div'));
naja.uiHandler.clickElement(document.createElement('button'));
naja.uiHandler.handleUI(new Event('change'));
naja.uiHandler.submitForm(document.createElement('form'));
naja.addEventListener('init', event => console.log(event.defaultOptions));
naja.addEventListener('interaction', event => console.log(event.element, event.originalEvent, event.options));
naja.addEventListener('before', event => console.log(event.data, event.method, event.url, event.xhr));
naja.addEventListener('start', genericListener);
naja.addEventListener('abort', genericListener);
naja.addEventListener('success', successListener);
naja.addEventListener('error', event => console.error(event.error));
naja.addEventListener('complete', completeListener);
naja.removeEventListener('start', genericListener);
naja.snippetHandler.removeEventListener('beforeUpdate', null);
type TestEvent = CustomEvent<{ customProperty: string }>;
interface OtherEvent extends Event {
otherProperty: number;
type: 'otherEvent';
}
const handler = (event: TestEvent): void => console.log(typeof event.detail.customProperty === 'string');
document.addEventListener('DOMContentLoaded', () => {naja.formsHandler.initForms(document.body);
naja.formsHandler.processForm(new Event('submit'));
naja.uiHandler.allowedOrigins.push('http://localhost');
naja.snippetHandler.addEventListener('beforeUpdate', event => console.log(event.snippet, event.content));
naja.snippetHandler.addEventListener('afterUpdate', event => console.log(event.snippet, event.content));
naja.uiHandler.bindUI(document.createElement('div'));
naja.uiHandler.clickElement(document.createElement('button'));
naja.uiHandler.handleUI(new Event('change'));
naja.uiHandler.submitForm(document.createElement('form'));
naja.addEventListener('init', event => console.log(event.defaultOptions));
naja.addEventListener('interaction', event => console.log(event.element, event.originalEvent, event.options));
naja.addEventListener('before', event => console.log(event.data, event.method, event.url, event.xhr));
naja.addEventListener('start', genericListener);
naja.addEventListener('abort', genericListener);
naja.addEventListener('success', successListener);
naja.addEventListener('error', event => console.error(event.error));
naja.addEventListener('complete', completeListener);
naja.removeEventListener('start', genericListener);
naja.snippetHandler.removeEventListener('beforeUpdate', null);
type TestEvent = CustomEvent<{ customProperty: string }>;
interface OtherEvent extends Event {
otherProperty: number;
type: 'otherEvent';
}
const handler = (event: TestEvent): void => console.log(typeof event.detail.customProperty === 'string');document.addEventListener('DOMContentLoaded', () => {
naja.initialize();
naja.initialize({ history: false, selector: '[data-ajax]', customOption: 1 });
naja.fireEvent('customEvent', { extra: 1 });
naja.fireEvent('anotherEvent');
naja.addEventListener('testEvent', handler);
naja.addEventListener('someEvent', event => console.log(event.target));
naja.removeEventListener('testEvent', handler);
naja.removeEventListener('someEvent', event => {});
naja.addEventListener('otherEvent', event => console.log(event.otherProperty === 1));
});naja.formsHandler.netteForms = {};
naja.formsHandler.initForms(document.body);
naja.formsHandler.processForm(new Event('submit'));
naja.uiHandler.allowedOrigins.push('http://localhost');
naja.snippetHandler.addEventListener('beforeUpdate', event => console.log(event.snippet, event.content));
naja.snippetHandler.addEventListener('afterUpdate', event => console.log(event.snippet, event.content));
naja.uiHandler.bindUI(document.createElement('div'));
naja.uiHandler.clickElement(document.createElement('button'));
naja.uiHandler.handleUI(new Event('change'));
naja.uiHandler.submitForm(document.createElement('form'));
naja.addEventListener('init', event => console.log(event.defaultOptions));
naja.addEventListener('interaction', event => console.log(event.element, event.originalEvent, event.options));
naja.addEventListener('before', event => console.log(event.data, event.method, event.url, event.xhr));
naja.addEventListener('start', genericListener);
naja.addEventListener('abort', genericListener);
naja.addEventListener('success', successListener);
naja.addEventListener('error', event => console.error(event.error));
naja.addEventListener('complete', completeListener);
naja.removeEventListener('start', genericListener);
naja.snippetHandler.removeEventListener('beforeUpdate', null);
type TestEvent = CustomEvent<{ customProperty: string }>;
interface OtherEvent extends Event {
otherProperty: number;
type: 'otherEvent';
}
const handler = (event: TestEvent): void => console.log(typeof event.detail.customProperty === 'string');naja.uiHandler.allowedOrigins.push('http://localhost');
naja.snippetHandler.addEventListener('beforeUpdate', event => console.log(event.snippet, event.content));
naja.snippetHandler.addEventListener('afterUpdate', event => console.log(event.snippet, event.content));
naja.uiHandler.bindUI(document.createElement('div'));
naja.uiHandler.clickElement(document.createElement('button'));
naja.uiHandler.handleUI(new Event('change'));
naja.uiHandler.submitForm(document.createElement('form'));
naja.addEventListener('init', event => console.log(event.defaultOptions));
naja.addEventListener('interaction', event => console.log(event.element, event.originalEvent, event.options));
naja.addEventListener('before', event => console.log(event.data, event.method, event.url, event.xhr));
naja.addEventListener('start', genericListener);
naja.addEventListener('abort', genericListener);
naja.addEventListener('success', successListener);
naja.addEventListener('error', event => console.error(event.error));
naja.addEventListener('complete', completeListener);
naja.removeEventListener('start', genericListener);
naja.snippetHandler.removeEventListener('beforeUpdate', null);
type TestEvent = CustomEvent<{ customProperty: string }>;
interface OtherEvent extends Event {
otherProperty: number;
type: 'otherEvent';
}
const handler = (event: TestEvent): void => console.log(typeof event.detail.customProperty === 'string');
document.addEventListener('DOMContentLoaded', () => {
naja.initialize();document.addEventListener('DOMContentLoaded', () => {
naja.initialize();
naja.initialize({ history: false, selector: '[data-ajax]', customOption: 1 });
naja.fireEvent('customEvent', { extra: 1 });
naja.fireEvent('anotherEvent');
naja.addEventListener('testEvent', handler);
naja.addEventListener('someEvent', event => console.log(event.target));
naja.removeEventListener('testEvent', handler);
naja.removeEventListener('someEvent', event => {});
naja.addEventListener('otherEvent', event => console.log(event.otherProperty === 1));
});naja.snippetHandler.addEventListener('beforeUpdate', event => console.log(event.snippet, event.content));
naja.snippetHandler.addEventListener('afterUpdate', event => console.log(event.snippet, event.content));
naja.uiHandler.bindUI(document.createElement('div'));
naja.uiHandler.clickElement(document.createElement('button'));
naja.uiHandler.handleUI(new Event('change'));
naja.uiHandler.submitForm(document.createElement('form'));
naja.addEventListener('init', event => console.log(event.defaultOptions));
naja.addEventListener('interaction', event => console.log(event.element, event.originalEvent, event.options));
naja.addEventListener('before', event => console.log(event.data, event.method, event.url, event.xhr));
naja.addEventListener('start', genericListener);
naja.addEventListener('abort', genericListener);
naja.addEventListener('success', successListener);
naja.addEventListener('error', event => console.error(event.error));
naja.addEventListener('complete', completeListener);
naja.removeEventListener('start', genericListener);
naja.snippetHandler.removeEventListener('beforeUpdate', null);
type TestEvent = CustomEvent<{ customProperty: string }>;
interface OtherEvent extends Event {
otherProperty: number;
type: 'otherEvent';
}
const handler = (event: TestEvent): void => console.log(typeof event.detail.customProperty === 'string');
document.addEventListener('DOMContentLoaded', () => {
naja.initialize();
naja.initialize({ history: false, selector: '[data-ajax]', customOption: 1 });
naja.fireEvent('customEvent', { extra: 1 });naja.historyHandler.uiCache = false;
naja.formsHandler.netteForms = {};
naja.formsHandler.initForms(document.body);
naja.formsHandler.processForm(new Event('submit'));
naja.uiHandler.allowedOrigins.push('http://localhost');
naja.snippetHandler.addEventListener('beforeUpdate', event => console.log(event.snippet, event.content));
naja.snippetHandler.addEventListener('afterUpdate', event => console.log(event.snippet, event.content));
naja.uiHandler.bindUI(document.createElement('div'));
naja.uiHandler.clickElement(document.createElement('button'));
naja.uiHandler.handleUI(new Event('change'));
naja.uiHandler.submitForm(document.createElement('form'));
naja.addEventListener('init', event => console.log(event.defaultOptions));
naja.addEventListener('interaction', event => console.log(event.element, event.originalEvent, event.options));
naja.addEventListener('before', event => console.log(event.data, event.method, event.url, event.xhr));
naja.addEventListener('start', genericListener);
naja.addEventListener('abort', genericListener);
naja.addEventListener('success', successListener);
naja.addEventListener('error', event => console.error(event.error));
naja.addEventListener('complete', completeListener);
naja.removeEventListener('start', genericListener);
naja.snippetHandler.removeEventListener('beforeUpdate', null);
type TestEvent = CustomEvent<{ customProperty: string }>;
interface OtherEvent extends Event {
otherProperty: number;
type: 'otherEvent';
}naja.historyHandler.uiCache = false;
naja.formsHandler.netteForms = {};
naja.formsHandler.initForms(document.body);
naja.formsHandler.processForm(new Event('submit'));
naja.uiHandler.allowedOrigins.push('http://localhost');
naja.snippetHandler.addEventListener('beforeUpdate', event => console.log(event.snippet, event.content));
naja.snippetHandler.addEventListener('afterUpdate', event => console.log(event.snippet, event.content));
naja.uiHandler.bindUI(document.createElement('div'));
naja.uiHandler.clickElement(document.createElement('button'));
naja.uiHandler.handleUI(new Event('change'));
naja.uiHandler.submitForm(document.createElement('form'));
naja.addEventListener('init', event => console.log(event.defaultOptions));
naja.addEventListener('interaction', event => console.log(event.element, event.originalEvent, event.options));
naja.addEventListener('before', event => console.log(event.data, event.method, event.url, event.xhr));
naja.addEventListener('start', genericListener);
naja.addEventListener('abort', genericListener);
naja.addEventListener('success', successListener);
naja.addEventListener('error', event => console.error(event.error));
naja.addEventListener('complete', completeListener);
naja.removeEventListener('start', genericListener);
naja.snippetHandler.removeEventListener('beforeUpdate', null);
type TestEvent = CustomEvent<{ customProperty: string }>;
interface OtherEvent extends Event {
otherProperty: number;
type: 'otherEvent';
}
