logic that works on every browser/device except samsung internet

Question

I have a piece of code that works on everything except Samsung Internet. Chrome mobile works fine, as do chrome dev tools mobile emulators. I clear the browsing data every attempt.

When a services category button is clicked (first image below), it should open the associated bootstrap collapse card (second image below).

First Image:

enter image description here

Second Image:

enter image description here

Here is the github repo https://github.com/dByler1/windle-chimney https://dbyler1.github.io/windle-chimney/

The .on('click', function(){} part works. Every variable logs cleanly. It just won't go into the logic blocks.

$(".servicesBTN").on("click", function (e) {
  //get the data target value of the button that was clicked which is the same as the accordian content IDs
  let dataTarget = this.getAttribute("data-target")
  let servicesDisplayValue = getComputedStyle(document.getElementById('servicesDescriptions')).display

  //all three console.logs fire and log expected results
  console.log('data target ' + dataTarget)
  console.log('services display value ' + servicesDisplayValue)
  console.log('test hasClass' + $(dataTarget).hasClass('show'))

  //if the clicked button's associated card does have the show class, set the data toggle to blank so it won't change
  //none of the logs in the if blocks fire
  if ($(dataTarget).hasClass("show") && servicesDisplayValue === 'block') {
    this.setAttribute("data-toggle", "")
    console.log('first block - already open - display block')
  } else if ($(dataTarget).hasClass("show") && servicesDisplayValue === 'none') {
    this.setAttribute("data-toggle", "")
    mobileShowServiceInfo($(this))
    console.log('second block - already open - display none - mobile assumption')
  }
  else {
    //give the clicked button a data-toggle of collapse so it will open
    this.setAttribute("data-toggle", "collapse")
    mobileShowServiceInfo($(this))
    changeAllAngleIcons($(this))
    console.log('third block - ')
  }
})

Try to comment all the function call in those if blocks... (`mobileShowServiceInfo` and `changeAllAngleIcons`) Just to be sure that the problem doesn't come from the functions... Ha... If you can look at the console on that Samsung thing... If not, use some `alert()` ;) — Louys Patrice Bessette, Nov 24 '18 at 16:03
May look stupid... But try adding a semicolon on every line end for your whole script. ;) — Louys Patrice Bessette, Nov 24 '18 at 16:15
The logs show that the problem is in the mobileShowServiceInfo function ... investigating there — Dan Byler, Nov 24 '18 at 16:21
Try to change `document.getElementById('backBTN').classList.replace('d-none', 'd-md-none')` for `$('#backBTN').removeClass('d-none').addClass('d-md-none');` — Louys Patrice Bessette, Nov 24 '18 at 16:27
That's it! For some reason the vanilla JS is not working in Samsung Internet. I wonder why? — Dan Byler, Nov 24 '18 at 16:41
hehe... Samsung Internet may be more picky than other browsers... *Normally*, vanilla JS should have been like this: `document.getElementById('backBTN').classList = document.getElementById('backBTN').classList.replace('d-none', 'd-md-none')` --- So I guess the *reference* from where the classList string comes is *kept* by major browsers, but lost on Samsung Internet. -- **That is a big cool assumption!!** — Louys Patrice Bessette, Nov 24 '18 at 16:49
MDN has a '?' under samsung internet compatibility for getElementById - Now I know it doesn't work https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById — Dan Byler, Nov 24 '18 at 16:52
And instead of just not do nothing... Since there is no assignment for the `.replace()` result... It breaks the code... Funny! — Louys Patrice Bessette, Nov 24 '18 at 16:52
The '?' on MDN probably means untested... But I really think the issue comes for the `.replace()` result not assigned. — Louys Patrice Bessette, Nov 24 '18 at 16:53
Well thank you very much @LouysPatriceBessette!! The help is much appreciated! — Dan Byler, Nov 24 '18 at 16:54

Louys Patrice Bessette · Accepted Answer · 2018-11-24T17:25:09.413

Here is an assumption about the source of the issue you had with Samsung Internet (SI).

First, the issue was in a function call : mobileShowServiceInfo($(this)). Not in the if/else blocks.

In that function, that line was the issue: (From OP's GitHub repo)

document.getElementById('backBTN').classList.replace('d-none', 'd-md-none')

So I guess that SI really doesn't like an unassigned result for .replace().

This should probably work:

let tempClassList = document.getElementById('backBTN').classList;
document.getElementById('backBTN').classList = tempClassList.replace('d-none', 'd-md-none');

But this, while shorter and clearer, fixed the issue:

$('#backBTN').removeClass('d-none').addClass('d-md-none');

So I guess that instead of simply discarding the .replace() result because there is no assignment, SI just breaks the code...

Aside advise: Use some semicolons ; at the end of each of your code lines. More reading about it in this SO answer.

;)

logic that works on every browser/device except samsung internet

1 Answers1