# wire:ignore

The `wire:ignore` directive tells CBWIRE to skip updating specific parts of your template during re-renders. This is essential when integrating third-party JavaScript libraries, Alpine.js components, or preserving content that should remain static across component updates.

## Basic Usage

This dashboard component demonstrates `wire:ignore` protecting third-party content and preserving static elements:

{% tabs %}
{% tab title="BoxLang" %}

```javascript
// wires/Dashboard.bx
class extends="cbwire.models.Component" {
    data = {
        "refreshCount": 0,
        "loadTime": now()
    };

    function refresh() {
        data.refreshCount++;
    }
}
```

{% endtab %}

{% tab title="CFML" %}

```javascript
// wires/Dashboard.cfc
component extends="cbwire.models.Component" {
    data = {
        "refreshCount" = 0,
        "loadTime" = now()
    };

    function refresh() {
        data.refreshCount++;
    }
}
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="BoxLang" %}

```html
<!-- wires/dashboard.bxm -->
<bx:output>
<div>
    <h1>Dashboard (Refreshed #refreshCount# times)</h1>
    
    <!-- This content never updates -->
    <div wire:ignore>
        <p>Component first loaded: #dateFormat(loadTime, "yyyy-mm-dd")# #timeFormat(loadTime, "HH:mm:ss")#</p>
        <div id="third-party-chart"></div>
    </div>
    
    <!-- This Alpine.js component preserves its state -->
    <div wire:ignore.self x-data="{ count: 0 }" class="counter">
        <button @click="count++">Alpine Counter: <span x-text="count"></span></button>
        <p>Current time: #timeFormat(now(), "HH:mm:ss")#</p>
    </div>
    
    <button wire:click="refresh">Refresh Component</button>
</div>
</bx:output>
```

{% endtab %}

{% tab title="CFML" %}

```html
<!-- wires/dashboard.cfm -->
<cfoutput>
<div>
    <h1>Dashboard (Refreshed #refreshCount# times)</h1>
    
    <!-- This content never updates -->
    <div wire:ignore>
        <p>Component first loaded: #dateFormat(loadTime, "yyyy-mm-dd")# #timeFormat(loadTime, "HH:mm:ss")#</p>
        <div id="third-party-chart"></div>
    </div>
    
    <!-- This Alpine.js component preserves its state -->
    <div wire:ignore.self x-data="{ count: 0 }" class="counter">
        <button @click="count++">Alpine Counter: <span x-text="count"></span></button>
        <p>Current time: #timeFormat(now(), "HH:mm:ss")#</p>
    </div>
    
    <button wire:click="refresh">Refresh Component</button>
</div>
</cfoutput>
```

{% endtab %}
{% endtabs %}

## What wire:ignore Does

When you add `wire:ignore` to an element, CBWIRE automatically:

* **Skips DOM Updates**: Prevents the element and its children from being updated during re-renders
* **Preserves Third-Party State**: Maintains JavaScript library state and event listeners
* **Protects Static Content**: Keeps timestamps, IDs, and other content that should remain unchanged
* **Enables Library Integration**: Allows Alpine.js and other frameworks to manage their own DOM sections

## Available Modifiers

The `wire:ignore` directive supports one modifier:

* **Self**: `.self` - Ignores updates only to the element's attributes, not its children

Example: `wire:ignore.self` protects element attributes while allowing child content to update

{% hint style="info" %}
Use `wire:ignore` when integrating third-party JavaScript libraries or preserving content that should remain static across component updates.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cbwire.ortusbooks.com/template-directives/wire-ignore.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.