# AjaxPress Developer Guide ## Handling Dynamic Content Updates When AjaxPress loads content via AJAX, scripts and stylesheets are automatically handled. However, if you have custom JavaScript that needs to reinitialize after content updates, use the provided events. ### Available Events #### `ajaxpress-content-updated` Fired after content has been updated and scripts have been executed. Use this to reinitialize your JavaScript. ```javascript document.addEventListener('ajaxpress-content-updated', function(e) { const container = e.detail.container; // The updated container element const url = e.detail.url; // The new URL // Reinitialize your scripts here // Example: Initialize a slider, form handler, etc. initializeMySlider(container); }); ``` #### `ajaxpress-loading` Fired when navigation starts (before content is fetched). ```javascript document.addEventListener('ajaxpress-loading', function(e) { console.log('Loading:', e.detail.url); }); ``` #### `ajaxpress-fetched` Fired after content is fetched but before it's updated in the DOM. ```javascript document.addEventListener('ajaxpress-fetched', function(e) { console.log('Fetched:', e.detail.html); }); ``` #### `ajaxpress-updated` Fired after content is fully updated, scripts/stylesheets loaded, and `ajaxpress-content-updated` has fired. ```javascript document.addEventListener('ajaxpress-updated', function(e) { console.log('Updated:', e.detail.html); }); ``` ### Automatic Script & Stylesheet Handling AjaxPress automatically: 1. **Loads new scripts/stylesheets** from the `` of the new page 2. **Executes inline scripts** from the loaded content 3. **Prevents duplicates** - scripts/stylesheets already loaded won't be loaded again 4. **Updates meta tags** (Open Graph, Twitter Cards, etc.) ### Example: Reinitializing a Third-Party Plugin ```javascript // Example: Reinitialize a lightbox plugin after AJAX navigation document.addEventListener('ajaxpress-content-updated', function(e) { const container = e.detail.container; // Reinitialize lightbox for new images if (typeof SimpleLightbox !== 'undefined') { const images = container.querySelectorAll('a[href$=".jpg"], a[href$=".png"], a[href$=".gif"]'); if (images.length > 0) { new SimpleLightbox(images, { // your options }); } } }); ``` ### Example: Reinitializing Form Handlers ```javascript document.addEventListener('ajaxpress-content-updated', function(e) { const container = e.detail.container; // Reinitialize form validation const forms = container.querySelectorAll('form'); forms.forEach(form => { if (typeof jQuery !== 'undefined' && jQuery.fn.validate) { jQuery(form).validate(); } }); }); ``` ### Skipping Elements from AJAX Updates If you have elements that should persist across navigation (like headers, sidebars), add them to **Skip these elements** in Advanced settings: ``` .header, #sidebar, .persistent-menu ``` Links inside these elements will reload normally (full page reload). ### Skipping Links from AJAX Navigation To exclude specific URLs from AJAX navigation, add them to **Skip these links**: ``` checkout, cart, my-account ``` Or use regex patterns: ``` ^/wp-admin, ^/wp-login ``` ### Best Practices 1. **Use event listeners** instead of `DOMContentLoaded` for AJAX-loaded content 2. **Check if elements exist** before initializing 3. **Clean up old instances** if needed (e.g., remove old event listeners) 4. **Test with AJAX navigation enabled** to ensure everything works ### Debugging Enable debug mode to see what AjaxPress is loading: ```javascript window.ajaxpress_debug = true; ``` This will log to the console: - When scripts/stylesheets are loaded - When inline scripts/styles are executed - Parsed HTML structure information ### Troubleshooting **Scripts not executing?** - Check browser console for errors - Enable debug mode: `window.ajaxpress_debug = true` - Check Network tab to see if scripts are being requested - Ensure scripts are in the content area (not in ignored elements) - Use `ajaxpress-content-updated` event to reinitialize - Verify scripts are in `` or `` of the new page **Styles not applying?** - Check if stylesheet is being loaded (Network tab) - Enable debug mode to see loading logs - Ensure stylesheet is in `` of the new page - Check for CSS specificity issues - Verify relative URLs are resolving correctly **Page-specific scripts/styles not loading?** - Check browser console for "AjaxPress: Script loaded" or "AjaxPress: Stylesheet loaded" messages - Verify the server is returning full HTML (with `` section) when `AjaxPress-Ajax: true` header is sent - Check Network tab - the response should be full HTML, not JSON or partial content - Some plugins may need to be configured to work with AJAX navigation **JavaScript errors after navigation?** - Ensure you're using the `ajaxpress-content-updated` event - Check for conflicts with other plugins - Verify scripts aren't trying to access elements that were removed - Some plugins may need reinitialization - use the event system