<p>The cleanest way to do this would be to provide your own Javascript class that overrides Craft.BaseElementIndex, which stores the latest search value in localStorage:</p>

<pre class="lang-js prettyprint-override"><code>MyElementTypeIndex = Craft.BaseElementIndex.extend(
{
    onAfterHtmlInit: function()
    {
        // Do we have a stored search value?
        if (this.instanceState.searchVal)
        {
            this.$search.val(this.instanceState.searchVal);
        }

        this.base();
    },

    updateElements: function()
    {
        // Store the current search val in localStorage
        this.setInstanceState('searchVal', this.$search.val());

        this.base();
    }
});

// Register this as the official index class for this element type!
Craft.registerElementIndexClass('MyElementType', MyElementTypeIndex);
</code></pre>

<p>Save that file somewhere in your plugin’s resources/ folder (let’s say it’s craft/plugins/myplugin/resources/js/index.js), and then include it from your plugin’s <code>init()</code> function:</p>

<pre class="lang-php prettyprint-override"><code>class MyPlugin extends BasePlugin
{
    // ...

    public function init()
    {
        if (craft()-&gt;request-&gt;isCpRequest())
        {
            craft()-&gt;templates-&gt;includeJsResource('myplugin/js/index.js');
        }
    }
}
</code></pre>

CC BY-SA 3.0
2014-07-25T15:01:01.823Z
That's what I was looking for, thanks Brandon!
Peter Tell
CC BY-SA 3.0
2014-07-25T14:56:59.753Z
2014-07-25T14:56:59.753Z
Brandon Kelly
<p>If I wanted to update the Elements listing based on an action taken from a plugin, would it be possible to do this?</p>

<p><strong>Setup:</strong></p>

<ul>
<li>We're on an Elements listing page.</li>
<li>We filter the results with a search query.</li>
<li>We then click an Element's name to move to its individual editing page</li>
</ul>

<p><strong>The Problem:</strong></p>

<p>Currently in my tests with Google Chrome if I:</p>

<ul>
<li>Filter a list by a search query (say <code>lastName::T*</code> on the Users listing page),</li>
<li>Click on one of the usernames</li>
<li>Hit "Back"</li>
</ul>

<p>My search is not saved, i.e., I'm returned to a non-filtered list.</p>

<p>My workaround to this is to write a simple JS plugin that stores your search query - if populated - when you navigate away from the page. I then re-populate the search query when you re-enter the page but I have to tell Craft to execute it, IE to fire <code>updateElements</code>.</p>

<p>My current workaround for this is to fire a <code>change</code> event on the search box if the search query is stored and it's not an Ajax request. It works, it just feels kind of hacky.</p>

<p>So I'm wondering if there's a more native, less hacky solution.</p>

CC BY-SA 3.0
2014-07-16T22:27:12.987Z
Hey Peter, can you provide more context? What page in the CP would this be happening on, what exactly is this “onSourceSelectChange” event you’re referring to, etc.
Brandon Kelly
CC BY-SA 3.0
2014-07-17T01:21:04.440Z
Hi Brandon, absolutely. I'll update the question to make it more clear.
Peter Tell
CC BY-SA 3.0
2014-07-25T14:58:57.903Z
Sorry Peter, didn’t get a notification that you had responded. (I think SE only gives notifications for comments that include @username, unless the comment is on your own post.) Just provided an answer.
Brandon Kelly
CC BY-SA 3.0
2014-07-25T15:01:25.093Z
No problem whatsoever! Thanks for the feedback.
Peter Tell
<plugin-development><elementtype><javascript>
How would I trigger updateElements for BaseElementIndex from a plugin's JavaScript?
# How would I trigger updateElements for BaseElementIndex from a plugin's JavaScript?

(Asked by: username_0 on 2014-07-16)

If I wanted to update the Elements listing based on an action taken from a plugin, would it be possible to do this?

**Setup:**

* We're on an Elements listing page.
* We filter the results with a search query.
* We then click an Element's name to move to its individual editing page

**The Problem:**

Currently in my tests with Google Chrome if I:

* Filter a list by a search query (say `lastName::T*` on the Users listing page),
* Click on one of the usernames
* Hit "Back"

My search is not saved, i.e., I'm returned to a non-filtered list.

My workaround to this is to write a simple JS plugin that stores your search query - if populated - when you navigate away from the page. I then re-populate the search query when you re-enter the page but I have to tell Craft to execute it, IE to fire `updateElements`.

My current workaround for this is to fire a `change` event on the search box if the search query is stored and it's not an Ajax request. It works, it just feels kind of hacky.

So I'm wondering if there's a more native, less hacky solution.

**Tags:** plugin-development, elementtype, javascript

> **Comments:**
> **username_1**: Hey Peter, can you provide more context? What page in the CP would this be happening on, what exactly is this “onSourceSelectChange” event you’re referring to, etc.  
> **username_0**: Hi Brandon, absolutely. I'll update the question to make it more clear.  
> **username_1**: Sorry Peter, didn’t get a notification that you had responded. (I think SE only gives notifications for comments that include @username, unless the comment is on your own post.) Just provided an answer.  
> **username_0**: No problem whatsoever! Thanks for the feedback.  

---

## 1 answers

### Answer by username_1 on 2014-07-25. Score: 4 | Accepted answer

The cleanest way to do this would be to provide your own Javascript class that overrides Craft.BaseElementIndex, which stores the latest search value in localStorage:
MyElementTypeIndex = Craft.BaseElementIndex.extend(
{
    onAfterHtmlInit: function()
    {
        // Do we have a stored search value?
        if (this.instanceState.searchVal)
        {
            this.$search.val(this.instanceState.searchVal);
        }

        this.base();
    },

    updateElements: function()
    {
        // Store the current search val in localStorage
        this.setInstanceState('searchVal', this.$search.val());

        this.base();
    }
});

// Register this as the official index class for this element type!
Craft.registerElementIndexClass('MyElementType', MyElementTypeIndex);

Save that file somewhere in your plugin’s resources/ folder (let’s say it’s craft/plugins/myplugin/resources/js/index.js), and then include it from your plugin’s init() function:
class MyPlugin extends BasePlugin
{
    // ...

    public function init()
    {
        if (craft()->request->isCpRequest())
        {
            craft()->templates->includeJsResource('myplugin/js/index.js');
        }
    }
}

> **Comments:**
> **username_0**: That's what I was looking for, thanks Brandon!  

---

