{"library":"naja","title":"Naja AJAX Library for Nette Framework","description":"Naja is a modern, full-featured client-side AJAX library specifically designed for seamless integration with the Nette Framework. It provides robust capabilities for handling asynchronous requests, managing browser history states, and dynamically updating UI snippets, enabling developers to build highly interactive web applications with minimal JavaScript boilerplate. Currently stable at version 3.3.3, Naja maintains an active release cadence, frequently delivering minor enhancements and bug fixes. Key differentiators include its tight coupling with Nette's server-side AJAX responses, thorough testing across modern browsers (Chromium, Firefox, WebKit), and a strong focus on providing a reliable, performant AJAX experience tailored for the Nette ecosystem, allowing for progressive enhancement of traditional server-rendered applications. It is written using modern JavaScript and compiled for broad browser compatibility.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install naja"],"cli":null},"imports":["import naja from 'naja';","import type { InteractionEvent, BuildStateEvent } from 'naja';","import naja from 'naja'; naja.initialize();"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import naja from 'naja';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    // Initialize Naja. This sets up event listeners for AJAX interactions\n    // on elements like <a data-nette-ajax> and <form data-nette-ajax>.\n    naja.initialize();\n\n    // Listen to Naja's lifecycle events for debugging or custom logic.\n    naja.addEventListener('init', () => {\n        console.log('Naja initialized and ready to handle Nette AJAX requests.');\n    });\n\n    naja.addEventListener('interaction', (event) => {\n        console.log('AJAX interaction started:', event.detail.element.tagName, event.detail.url);\n    });\n\n    naja.addEventListener('start', (event) => {\n        console.log('AJAX request is about to be sent.');\n        // You could show a loading spinner here\n    });\n\n    naja.addEventListener('success', (event) => {\n        console.log('AJAX request successful.');\n        // Hide loading spinner\n    });\n\n    naja.addEventListener('error', (event) => {\n        console.error('AJAX request failed:', event.detail.error);\n        // Handle error, e.g., display an error message\n    });\n\n    // Example: Custom snippet handler for specific element updates\n    naja.snippetHandler.addEventListener('afterUpdate', (event) => {\n        const { snippet, content } = event.detail;\n        if (snippet && snippet.id === 'my-dynamic-content') {\n            document.getElementById('my-dynamic-content').innerHTML = content;\n            console.log(`Snippet #${snippet.id} updated.`);\n        }\n    });\n});","lang":"javascript","description":"Demonstrates how to initialize Naja and subscribe to its core lifecycle events to handle Nette AJAX interactions and custom snippet updates.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}