Client side JavaScript events

[Fedik]

User description

This is information about joomla:updated and joomla:removed events

Updated copy of https://docs.joomla.org/J4.x:ClientSideEvents

Reference:

• [4.0][JS] Joomla! Custom events. Yo! joomla-cms#16016

---

PR Type

Documentation

---

Description

• Add comprehensive documentation for client-side JavaScript events

• Document joomla:updated event for content change notifications

• Document joomla:removed event for pre-removal cleanup

• Include naming conventions and practical code examples

---

Diagram Walkthrough

flowchart LR
  A["Client-side Events<br/>Documentation"] --> B["Event Basics<br/>CustomEvent & Naming"]
  A --> C["joomla:updated<br/>Content Changed"]
  A --> D["joomla:removed<br/>Before Removal"]
  C --> E["AJAX Update<br/>Example"]
  D --> F["AJAX & Table<br/>Examples"]

Loading

File Walkthrough

Relevant files

Documentation

events.md Client-side JavaScript events guide                                            docs/general-concepts/javascript/events.md New documentation file explaining Joomla client-side event conventions Covers CustomEvent usage and event naming patterns (namespace:eventname) Documents joomla:updated event with AJAX content update examples Documents joomla:removed event with removal and table row examples +87/-0

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
🔴	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Missing fetch error handling: The fetch examples do not handle network/HTTP failures (no .catch() or status checks), encouraging silent failures without actionable context. Referred Code fetch('/foobar/page') .then(function(res) { return res.text(); }) .then(function(data) { someContainer.innerHTML = data; someContainer.dispatchEvent(new CustomEvent('joomla:updated', { bubbles: true }); }); The extensions can listen to this event also, example for initialization for modified part of the page: document.addEventListener('joomla:updated', function(event){ const elements = event.target.querySelectorAll('.foo-bar'); // ... do something with $elements }); joomla:removed Dispatched over the changed container before its content will be removed or replaced. ... (clipped 15 lines) </details> > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td><details> <summary><strong>Generic: Security-First Input Validation and Data Handling</strong></summary><br> **Objective:** Ensure all data inputs are validated, sanitized, and handled securely to prevent <br>vulnerabilities<br> **Status:** <br><a href='https://github.com/joomla/Manual/pull/580/files#diff-ad6046e7b045d02f23b5a4c8419035279df37646a68bda5fe5c80e72c4b30b1fR44-R80'><strong>Unsafe HTML injection example</strong></a>: The examples assign <code>fetch()</code> response data directly into <code>innerHTML</code> without any sanitization <br>or “trusted content only” warning, which can promote XSS-prone patterns.<br> <details open><summary>Referred Code</summary> ```markdown const someContainer = document.querySelector('.my-dinamic-container'); fetch('/foobar/page') .then(function(res) { return res.text(); }) .then(function(data) { someContainer.innerHTML = data; someContainer.dispatchEvent(new CustomEvent('joomla:updated', { bubbles: true }); }); The extensions can listen to this event also, example for initialization for modified part of the page: document.addEventListener('joomla:updated', function(event){ const elements = event.target.querySelectorAll('.foo-bar'); // ... do something with $elements }); joomla:removed ... (clipped 16 lines) </details> > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td align="center" colspan="2"> - [ ] Update <!-- /compliance --update_compliance=true --> </td></tr></tbody></table> <details><summary>Compliance status legend</summary> 🟢 - Fully Compliant<br> 🟡 - Partial Compliant<br> 🔴 - Not Compliant<br> ⚪ - Requires Further Human Verification<br> 🏷️ - Compliance label<br> </details>

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	✅ Complete the joomla:removed table row example Suggestion Impact: The documentation example for removing a dynamic table row was completed by adding code to remove the row from the DOM after dispatching the `joomla:removed` event (implemented as `row.parentNode.removeChild(row);` rather than `row.remove();`). code diff: @@ -84,5 +84,6 @@ ```javascript const row = myTable.querySelector('.row-to-remove'); row.dispatchEvent(new CustomEvent('joomla:removed', { bubbles: true })); +row.parentNode.removeChild(row); </details> ___ **The documentation for <code>joomla:removed</code> provides an incomplete example for removing <br>a table row. It should be updated to include the code that removes the element <br>from the DOM after dispatching the event.** ### Examples: <details> <summary> <a href="https://github.com/joomla/Manual/pull/580/files#diff-ad6046e7b045d02f23b5a4c8419035279df37646a68bda5fe5c80e72c4b30b1fR83-R87">docs/general-concepts/javascript/events.md [83-87]</a> </summary> ```markdown Example removing row of a dynamic table: ```javascript const row = myTable.querySelector('.row-to-remove'); row.dispatchEvent(new CustomEvent('joomla:removed', { bubbles: true })); </details> ### Solution Walkthrough: #### Before: ```markdown ```javascript // Example removing row of a dynamic table: const row = myTable.querySelector('.row-to-remove'); row.dispatchEvent(new CustomEvent('joomla:removed', { bubbles: true })); #### After: ```markdown ```javascript // Example removing row of a dynamic table: const row = myTable.querySelector('.row-to-remove'); row.dispatchEvent(new CustomEvent('joomla:removed', { bubbles: true })); row.remove(); <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion correctly identifies an incomplete code example in the documentation, which could mislead developers; fixing it is important for the quality and clarity of the new documentation. </details></details></td><td align=center>Medium </td></tr><tr><td rowspan=2>Possible issue</td> <td> <details><summary>Fix syntax errors in code example</summary> ___ **Fix two syntax errors in the <code>myshop:add-to-cart</code> JavaScript example. Add a <br>missing comma after the <code>detail</code> property and correct the closing parentheses for <br>the <code>CustomEvent</code> constructor and <code>dispatchEvent</code> call.** [docs/general-concepts/javascript/events.md [20-25]](https://github.com/joomla/Manual/pull/580/files#diff-ad6046e7b045d02f23b5a4c8419035279df37646a68bda5fe5c80e72c4b30b1fR20-R25) ```diff // Shop extension: window.dispatchEvent(new CustomEvent('myshop:add-to-cart', { - detail: {sku:'productSku', amount:10, name: 'Foo Bar'} + detail: {sku:'productSku', amount:10, name: 'Foo Bar'}, bubbles: true, cancelable: true, -}); +})); Apply / Chat Suggestion importance[1-10]: 5 __ Why: The suggestion correctly identifies two syntax errors in the JavaScript example code: a missing comma and incorrect closing parentheses. Fixing these makes the example code valid and runnable, which is important for documentation.	Low
✅ Fix missing parentheses in event dispatches Suggestion Impact: Added the missing closing parentheses to both dispatchEvent(new CustomEvent(...)) calls, making the JavaScript example syntactically correct. code diff: - someContainer.dispatchEvent(new CustomEvent('joomla:removed', { bubbles: true }); + someContainer.dispatchEvent(new CustomEvent('joomla:removed', { bubbles: true })); someContainer.innerHTML = data; - someContainer.dispatchEvent(new CustomEvent('joomla:updated', { bubbles: true }); + someContainer.dispatchEvent(new CustomEvent('joomla:updated', { bubbles: true })); Fix missing closing parentheses in two new CustomEvent constructor calls within the AJAX update example. docs/general-concepts/javascript/events.md [77-79] -someContainer.dispatchEvent(new CustomEvent('joomla:removed', { bubbles: true }); +someContainer.dispatchEvent(new CustomEvent('joomla:removed', { bubbles: true })); someContainer.innerHTML = data; -someContainer.dispatchEvent(new CustomEvent('joomla:updated', { bubbles: true }); +someContainer.dispatchEvent(new CustomEvent('joomla:updated', { bubbles: true })); [Suggestion processed] Suggestion importance[1-10]: 5 __ Why: The suggestion correctly identifies a recurring syntax error (missing closing parenthesis) in two dispatchEvent calls within a JavaScript code example. Correcting this makes the example valid, improving the quality of the documentation.	Low
Update