Event Handler - Mobile

IMTanuki

Thought I'd take one last shot at this issue...

environment:
- bootstrap 5.0.1
- jquery 3.6.0
- dt src downloaded consolidated DT css and js files.

test case:
https://vtcc-cis-1151-webdev-02.easternwind.asia/site/custom/pages/xmd-pag-00-sandbox.html

question / issue
is there any reported issue where a custom element (not a button) has a click event handler that is not recognized on mobile platforms? Custom element and corresponding click event handler below works fine:
- for non-mobile platforms
- outside of datatables (i.e. click event handler works fine)

but click events are not recognized when this element is used within datatables on a mobile platform.

dom
// controls - dom dom: "<'row'<'d-none d-md-flex justify-content-between pb-0' <\"control-group-02-table-01-pagelen\">f>>" + "<'row'<'d-flex d-md-none justify-content-between pb-0' <\"control-group-02-table-01-pagelen\">f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'d-none d-lg-flex justify-content-between pt-2'ip>>" + "<'row'<'d-flex d-lg-none justify-content-center pt-1'i>>" + "<'row'<'d-flex d-lg-none justify-content-center pt-1'p>>" + "<'row'<'d-none d-lg-flex justify-content-end pt-2'B>>" + "<'row'<'d-flex d-lg-none justify-content-center pt-2'B>>",

custom element
// custom controls - table-sandbox-02 $ ( "div.control-group-02-table-01-pagelen" ).html ( '<div class="dropdown"> ' + '<button id="table-sandbox-group-02-table-01-pagelen" class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Items / Page </button> ' + '<ul class="dropdown-menu animated fadeIn " aria-labelledby="table-sandbox-group-02-table-01-pagelen"> ' + '<li id="table-sandbox-group-02-table-01-pagelen-01" class="dropdown-item" >10</li>' + '<li id="table-sandbox-group-02-table-01-pagelen-02" class="dropdown-item" >25</li>' + '<li id="table-sandbox-group-02-table-01-pagelen-03" class="dropdown-item" >50</li>' + '<li id="table-sandbox-group-02-table-01-pagelen-04" class="dropdown-item" >All</li>' + '</ul></div>' );

event handler
```// custom control event listeners - table-sandbox-02
document.querySelector ( '#table-sandbox-group-02-table-01-pagelen-01' ).addEventListener ( "click", function ( e ) {
tableSandboxGroup02Table01.page.len ( 10 ).draw ();
} );

document.querySelector ( '#table-sandbox-group-02-table-01-pagelen-02' ).addEventListener ( "click", function ( e ) {
    tableSandboxGroup02Table01.page.len ( 25 ).draw ();
} ); etc...```

kthorngren

Maybe you need to use event delegation as described here?
https://medium.com/@deo.uviray/how-to-fix-click-event-not-working-in-mobile-phones-6b550fe58357

Kevin

IMTanuki

I clearly stated in my post that click events work fine outside of datatables. In any event, I've already tried delegation and it doesn't resolve the issue. After numerous attempts to resolve this, I have to conclude that there is a software conflict with DT.

kthorngren

I clearly stated in my post that click events work fine outside of datatables.

Believe it or not I actually read that :-) which is why I suggested event delegation.

I cobbled together a simple test case with some of your code:
http://live.datatables.net/benowulu/1

I tried it on my iphone and it seems to work where your page does does not. I'm not sure what is causing the conflict but it doesn't appear to be anything with Datatables. There is a lot to dig though with your code to try and understand your solution and what is happening. Maybe you can update my test case to replicate the issue in a more simplified environment.

EDIT: In case there is a timing issue try moving your code to create the event handlers inside initComplete.

Kevin

IMTanuki

Kevin

I really appreciate your efforts to chase this down.

I tried the test case you created and I'm encountering the same error with the test case - pls see https://imtanuki.tinytake.com/tt/NTYxMDE4NV8xNzQzMzcxOA

When the screen size is < 576, the click event handler is not working.

I'll try moving the code as you suggested.

Thx

IMTanuki

Can I ask - I noticed that even when scrollX is false, DataTables still enables scrolling in mobile - is there a setting that completely disables scrolling or is it automatically active regardless of any setting?

Thx

kthorngren

I've seen issues with the JS BIN iframe (edit) environment. The link I provided was a Live Preview which is outside the JS BIN environment. Looks like the Live Preview time has expired. I cloned the JS BIN to this link:
http://live.datatables.net/sizuguya/1

If the Live Preview doesn't work then clone the link and use the upward/right facing arrow in the upper with of the page for the live preview:

Does the Live Preview work for you?

Kevin

kthorngren

DataTables still enables scrolling in mobile - is there a setting that completely disables scrolling or is it automatically active regardless of any setting?

Is it the Datatables scroll bar that is between the tbody and the tfoot or the browser's scroll bar?

Kevin

IMTanuki

Actually, I cloned it yesterday and used the clone to retest the issue - the clone functions, but it's still not detecting a click on the dropdown.

IMTanuki

It's the DataTables scroll bar.

I double-checked and I'm not setting any overflow params, so it looks like DataTables automatically creates a scroll bar when the screen size is < 576 and the table overflows, regardless of any settings. Is that correct?

kthorngren

Here is a screenshot of my iphone using Safari showing the alert from selecting 25.

Sorry but I'm not really sure how Datatables can be at fault with this. Correct me if I'm wrong but you are not using the lengthChange element supplied by Datatables, ie, it is not in your dom config. You are creating your own element and creating your own event handlers. However if there is a Datatables issue then the developers would like to know about it so they can fix it.

It's the DataTables scroll bar.

I pulled up the example you linked to initially on my iphone and not seeing a scrollbar. Does that example have a scrollbar for you? Looks like you are using FixedColumns in that example which does utilize scrollX. Can you provide an example of the problem?

What types of mobile devices and browser's are you having issues with?

Kevin

IMTanuki

I don't know how many times I can ask the question - does Datatables automatically implement scrolling for tables that overflow a screen that is < 576, regardless of whether scrollX, responsive or any other parameters have been set?

Yes or no?

kthorngren

I'm not one of the developers but I can say that I've never seen Datatables implement scrolling if scrollX is not enabled. Try this basic example on a small screen format. Datatables scrolling is not enabled.

Kevin

kthorngren

Better yet look at a plain http://live.datatables.net/ example that doesn't have any other HTML

@allan or @colin can confirm that there are no conditions that cause Datatables to implement scrolling without it being configured.

Kevin

allan

Kevin - thanks for taking the time to create an example for this. I wouldn't have found the problem without it.

I don't know how many times I can ask the question - does Datatables automatically implement scrolling for tables that overflow a screen that is < 576

No absolutely not. If the table is too wide for the viewport, then the browser will enable its own scrolling, just as it would do with any other element that doesn't fit into the viewport.

I think I see the problem though - in the dom option you have:

            "<'row'<'d-none d-md-flex justify-content-between pb-0'<\"control-group-01-table-01-paglen\">f>>" +
            "<'row'<'d-flex d-md-none justify-content-between pb-0'<\"control-group-01-table-01-paglen\">f>>" +

So you are creating two different page length controls, and which one will be displayed will depend upon the width of the display (since that is how Bootstrap works based on the classes you are using).

However, you are only assigning event handlers to one of the two different controls (indeed, the HTML is actually invalid since you have elements sharing the same id now). That just happens to be the element which is shown when there is no scrollbar. Thus when you shrink the page down, the other menu is displayed and it doesn't have any event listeners. Visually it looks the same, but it is a different element.

The fix? Don't have two page length controls. Just have one unless there was a reason for having two?

Allan

IMTanuki

Alan,

Many thx for weighing in!! That was it.

In the FWIW dept, I use Bootstrap's width-sensitive flex utilities all the time - i.e. multiple html statements to expose/hide or format an element based on width:

d-flex d-md-none - exposes an element up to 767 width
d-none d-md-flex - exposes an element at 768 and wider

In vanilla Bootstrap-enabled HTML, this is fairly common. But I'll admit it's such an obscure use of Bootstrap utilities in Datatables that no one has encountered it before...;>) On the other hand, it does make it possible to have a dropdown that complies with a Bootstrap theme, so after all is said and done, it looks great!

You'll note that I use the same constructs for standard Datatable buttons and there's no issue (just a custom element):
"<'row'<'d-none d-md-flex justify-content-end pt-2'B>>" +
"<'row'<'d-flex d-md-none justify-content-center pt-2'B>>"

And as to why I did this...justify-content-end makes it possible to consolidate 2 DT controls onto a single line in mobile (although I had to tweak the associated text to avoid overflows) - so I can have pagelen and search on the same line in mobile, which IMO looks a little cleaner...:>)

I'll leave this as an open issue for another day so you can view this answer (then I'll close it). Although dropdown may be unique to Bootsrap, this might be a neat enhancement to a future DataTables release (if you haven't seen the earlier thread, the option tag cannot be formatted in Bootstrap due to browser conflicts, which is why it's always blue on hover).

Again, thx so much for your follow-up!!!

allan

Hi,

Good to hear that helped.

We do have a pageLength button which can be used instead of the select for the page length dropdown. It is part of the Buttons library for DataTables. Here is a little example with Bootstrap 5.

Allan

IMTanuki

But what spawned this whole thread is that the page len button uses the select tag, which cannot be formatted the way other tags can - I believe it's a browser limitation that applies to all frameworks, not just bootstrap. So, if you're using any theme, the colors won't be applied to the select tag options and it looks weird (the options are** always blue**, regardless of the theme colors). That's why I suggest that a future version use native dropdowns, which easily tie back to any theme settings...

allan

Not sure if you had a look at my example, but it uses a button inside a div?

Allan

IMTanuki

I think I tried using btns in a btn-group. The bootstrap dropdown tag has a standard look and feel, unique sass and some js functionality, so it's generally the preferred element for this use case. Either way, my dropdown now works and is fully integrated with bootsrap. On to server-side integration! Thx again!