Custom button not clickable

Custom button not clickable

JerrelSJerrelS Posts: 5Questions: 1Answers: 0

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

Answers

  • kthorngrenkthorngren Posts: 19,927Questions: 26Answers: 4,698

    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

  • JerrelSJerrelS Posts: 5Questions: 1Answers: 0

    Hi Kevin,

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

    Please give it another try

    Jerrel

  • kthorngrenkthorngren Posts: 19,927Questions: 26Answers: 4,698

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

    Kevin

  • JerrelSJerrelS Posts: 5Questions: 1Answers: 0

    look for the init_table_accounts_search() function in backend_search.js

    Jerrel

  • kthorngrenkthorngren Posts: 19,927Questions: 26Answers: 4,698
    edited February 11

    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

  • JerrelSJerrelS Posts: 5Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 19,927Questions: 26Answers: 4,698
    edited February 11

    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

  • JerrelSJerrelS Posts: 5Questions: 1Answers: 0

    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 :D

Sign In or Register to comment.