# Clientside callback with pattern matching

**URL:** <https://community.plotly.com/t/clientside-callback-with-pattern-matching/45657>\
**Category:** Dash Python\
**Created:** [October 3, 2020, 8:52pm UTC](https://community.plotly.com/t/clientside-callback-with-pattern-matching/45657 "2020-10-03T20:52:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![luiz](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@luiz](https://community.plotly.com/u/luiz)\
**Post date:** [October 3, 2020, 8:52pm UTC](https://community.plotly.com/t/clientside-callback-with-pattern-matching/45657/1 "2020-10-03T20:52:42Z")

</div>

Is it possible to use pattern matching with client side callbacks?  
If yes, how? I’ve been failing in my attempts so far.  
If no, when? =)

---

<div class="post-metadata">

**Author:** ![sdementen](https://avatars.discourse-cdn.com/v4/letter/s/67e7ee/32.png) [@sdementen](https://community.plotly.com/u/sdementen)\
**Post date:** [November 17, 2020, 6:21am UTC](https://community.plotly.com/t/clientside-callback-with-pattern-matching/45657/2 "2020-11-17T06:21:15Z")

</div>

Not an answer to your question but could still be useful.  
If you have an id that is a dict instead of a string, a callback that is taking the id as input will not work as it will receive an object (instead of a string) in the callback. You can convert the object you receive to a string with something like this in your javascript code:

```auto
        if (!(typeof id === 'string' || id instanceof String)) {
            id = JSON.stringify(id, Object.keys(id).sort());
        };

```

For instance, in the example [Drag and drop cards](https://community.plotly.com/t/drag-and-drop-cards/42480/2), changing the js code to

```auto
if (!window.dash_clientside) {
    window.dash_clientside = {};
}
window.dash_clientside.clientside = {
    make_draggable: function(id) {
        // convert id to string if dict
        if (!(typeof id === 'string' || id instanceof String)) {
            id = JSON.stringify(id, Object.keys(id).sort());
        };
        setTimeout(function() {
            var el = document.getElementById(id)
            window.console.log(el)
            dragula([el])
        }, 1)
        return window.dash_clientside.no_update
    }
}

```

will at least make it works if the id in Dash is changed to a dict structure (e.g. `id={"class":"dragger","id":"drag_container"}` instead of `id="drag_container"`.

Not sure yet if it helps in your case (as it is obviously not the full pattern matching story!)

---

<div class="post-metadata">

**Author:** ![luiz](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@luiz](https://community.plotly.com/u/luiz)\
**Post date:** [November 17, 2020, 9:38am UTC](https://community.plotly.com/t/clientside-callback-with-pattern-matching/45657/3 "2020-11-17T09:38:35Z")

</div>

hi @sdementen, thanks for your answer! I had already implemented a solution exactly the way you described, it seems to work fine.

---

<div class="post-metadata">

**Author:** ![sdementen](https://avatars.discourse-cdn.com/v4/letter/s/67e7ee/32.png) [@sdementen](https://community.plotly.com/u/sdementen)\
**Post date:** [November 17, 2020, 10:09am UTC](https://community.plotly.com/t/clientside-callback-with-pattern-matching/45657/4 "2020-11-17T10:09:52Z")

</div>

Ok, I have filled the issue [https://github.com/plotly/plotly.py/issues/2910](https://github.com/plotly/plotly.py/issues/2910)

---

<div class="post-metadata">

**Author:** ![Bw984](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@Bw984](https://community.plotly.com/u/Bw984)\
**Post date:** [January 29, 2021, 5:59pm UTC](https://community.plotly.com/t/clientside-callback-with-pattern-matching/45657/5 "2021-01-29T17:59:01Z")

</div>

> [@sdementen](#):
>
> ```auto
> if (!(typeof id === 'string' || id instanceof String)) {
> id = JSON.stringify(id, Object.keys(id).sort());
> };
> 
> ```

I also have an application that could be simplified with the implementation of pattern matching on clientside callbacks. Currently I have to create dummy hidden inputs to prevent errors and manage their visibility and location manually.