Custom button not clickable

JerrelS

Hi Guys,

I added a custom button as shown in de example to my DT, but its not clickable.

Can you help me figure out why this is happening?

My DT can be viewed here: https://etopup.sr/custombutton

kthorngren

I'm unable to reach the page. Can you build a test case starting with this link?
https://live.datatables.net/

Make sure to add the buttons library using the Add Library menu option.

To debug I would start by adding a browser break point or console.log statement in the custom button code to see if it executes. Also check the browser's console of rerrors when clicking the button.

Kevin

JerrelS

Hi Kevin,

My Bad, you should be able to reach https://etopup.sr/custombutton now

Please give it another try

Jerrel

kthorngren

You have a lot of included files. Where would I find the code for the Datatable?

Kevin

JerrelS

look for the init_table_accounts_search() function in backend_search.js

Jerrel

kthorngren

When I inspect the button I find this elelment:

<button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close">
      <span aria-hidden="true"></span>
    </button>

This is not the Datatables button. I'm not sure where this is coming from but it seems to be on top of the Datatables button.

When inspecting the tbody of the Datatable I can work my way up to the Datatables button which looks like this:

<button class="dt-button" tabindex="0" aria-controls="balancetable" type="button"><span>Sale Balance</span></button>

Using the developer tools I can hide this element containing the first button:

<div class="toast" data-bs-delay="3000" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 500;">
  <div class="toast-header">
    <img src="https://www.etopup.sr/topupform/images/icons/etopup-logo-transcircle.png" width="20" height="20" class="rounded mr-2" alt="...">
    <strong class="mr-auto">eTopUp.SR</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close">
      <span aria-hidden="true"></span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Now the Datatables button is clickable. This div is overlaiad on top of the Datatables button. Not sure how to fix it or what the purpose of the div elements are.

Kevin

JerrelS

Kevin you are a genius.
I do indeed have a few other buttons hidden in modals and a toast.

Ill try to reposition the default location of the toast.

For now disabling it resolved the issue.

Very much appreciated bro.

One last thing, can you share with me how you inspected the button tag only?

I know you used F12, but how did you filter out the buttons

Jerrel

kthorngren

I was going to grab some screenshots but can't get to the site again. Instead I'll use this example.

I started by right clicking the button and selecting Inspect. I found the toast div. To find the Datatales button I right clicked on one of the -tag table`'s cells and selected Inspect:

In the inspector I scrolled up until I found the div with the classname dataTables_wrapper. Under that is the dt-buttons div with the buttons.

Does this answer your question?

Kevin

JerrelS

Got, I will use this technique for future troubleshooting.

The issue was not created by the button itself, but indeed by the toast overlaying the DT button.

I changed the toast opacity to 1, and you can now clearly see it sitting on top of the button.

removing the "position: absolute;" of the toast moved it to the buttom of the page resolving the issue.

Can't believe I spend a whole day struggling with this