searchpanes buttons (e.g. collapse) not working
searchpanes buttons (e.g. collapse) not working
tacman1123
Posts: 199Questions: 46Answers: 1
Wahoo, I finally have a live site that doesn't require login using SearchPanes, and I'm really happy with it.
https://www.museado.org/es/esquina/obj/visitor-browse
It works great, except that the buttons to collapse all and clear all don't work, and I'm not sure where to look to solve this.
I suspect it has something to do with the fact that I moved the searchpanes to the sidebar. It could also be because there is so much data in the searchpanes, making it very powerful for anyone who is trying to explore the museum database.
let dt = new DataTables(el, setup);
dt.searchPanes();
console.log('moving panes.');
$("div.search-panes").append(dt.searchPanes.container());
The html:
<div class="dtsp-verticalContainer row">
<div class="search-panes xxdtsp-verticalPanes col-3">
</div>
<div class="xxcontainer col-9">
{{ block('gridTable') }}
</div>
</div>
I'm using bootstrap 5 and (obviously) hacking away trying to get it to look right. But maybe that's not the issue. FWIW, this is an ajax-loaded site. And all the columns are created in javascript as well.
Anyway, thanks so much for releasing searchPanes!
This question has an accepted answers - jump to answer
Answers
it's not moving the searchpanes. I still don't know what it is, though.
The fields are loaded by JSON first, then when the load finishes initDatatables() is called, with the data and searchPanes data are sent in the callback
where searchPanes is the data dumped via console.error when viewing the page.
There are no event handlers on the buttons. The buttons within the searchPanes work fine though.
FWIW, I do load a lot of the datatables plugins, though. Maybe there's a conflict with all of them being loaded?
You've got a floating element at the top of the page which is intercepting the clicks. You need to add padding to the body element. As the Bootstrap documentation notes:
Allan
Thanks, Allan!