Js not running in mobile

[jrhager84]

I have a phone number ‘prettifier’ that works perfectly on desktop browsers but doesn’t seem to work in the mobile view.

Here is my custom JS:

const numbers = document.querySelectorAll('.tel_number');
numbers.forEach(num => {
  let match = num.innerText.match(/^(\d{3})(\d{3})(\d{4})$/);
  if (match) {
    num.innerText = ('(' + match[1] + ') ' + match[2] + '-' + match[3])
  };
  return null
})

[tristup]

Hi @jrhager84,

Thanks for reaching out.
Unfortunately, supporting custom coding is beyond the scope of Theme Support. I would suggest you hire a developer who can assist you on this or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[jrhager84]

I am a developer. This code works. It just doesn’t load on mobile. It’s an issue with how js is loaded in cornerstone. That should fall within the scope of this support.

[ruenel]

Hello @jrhager84,

Please be advised that if the code is valid and working, it will not matter which screen size or browser it will be rendered. It will always work. And also, Cornerstone does not interfere with any custom JS code as long as it is valid and correct or does not create any issues with the theme or the whole site.

Meanwhile, I am seeing this upon inspecting your site:

• See the screenshot in the secure note below.

Please clear all your plugin caches since your have installed the 3rd party LiteSpeed Cache plugin. Clear your mobile browser cache as well or use private browsing mode before testing your site again. It is also recommended that you temporarily deactivate all 3rd party caching plugin while you are troubleshooting.

Thank you for your understanding.

[jrhager84]

I had purged all server caches as well as the browser cache when I tried. For some reason, it only doesn’t work on mobile. I can literally look at the desktop page at the same time and it was working. Same on private browsing.

Should I be wrapping my code in an onLoad listener? Or is just putting it in good enough?

[tristup]

Hi @jrhager84,

The Regular Expression has been used within your code does not match with the input, not in desktop or mobile. I have checked the expression /^(\d{3})(\d{3})(\d{4})$/ with the input i.e. the Inner Text of the class name .tel_number is (208) 207-5898 for the first case. I checked the same in follwing site.

regex101: build, test, and debug regex

And it didn’t match, as it has already processed your code and added the braces to the match[1]. It seems that you have tried to check the first 3 digit and then the respective 3 and 4 digits and if that match added the open & closing braces to the match[1]. And it worked perfectly fine in desktop and the mobile.

If you still think that is not working on the mobile, please provide any screenshot or video that helps us to recognize it.

Thanks

[jrhager84]

the innerText that you’re inspecting is probably the already-replaced value (if you’re checking on desktop). The match splits it into 3 capture groups. If you look on mobile, you’ll clearly see it’s not working.

Desktop:

Mobile:

This is the issue. It is the same page just on a mobile browser vs the desktop browser. It’s the same page at the same time (having purged all caches). You can clearly see it works on desktop but not mobile. That’s why it’s so confusing.

[jrhager84]

To show you that my regex works with a ten digit number

[ruenel]

Hello @jrhager84,

I have checked your page on my Android Phone and this is what I am seeing:

This means that your JS code is working on mobile. It may not be working in your phone. Try to clear your phone’s mobile browser cache or use private browsing mode. If you are using Safari, try to test your site using Firefox or Chrome mobile browsers.

Best Regards.

[jrhager84]

I’m using chrome for iPhone. I’ve done private browsing, as well as clearing my cache. I’ve never had this issue happen before.

[jrhager84]

Just checked on a phone that’s never viewed the site. Not working on iPhone. Chrome.

[tristup]

Hi @jrhager84,

Can you please mention the iPhone version, browser version, and also operating system version you are using, that helps us to replicate the issue at our end.

Thanks

[jrhager84]

Iphone 13 mini and pro max. Latest chrome. iOS 15.4.1

[christian]

Hey @jrhager84,

This is not a theme issue. Your custom JS code is simply not compatible with iOS when you specifically apply it to a Button element. Modify your code according to the Button element’s structure.

Or, use a Raw Content element so that you can write your own HTML.

Your code works if the anchor structure is simple. See in the screenshot below that your code doesn’t work with the Button element but the Raw Content works.

This all boils down to your custom JS and not Pro. Please understand the cross-browser functionality of your code.

As my colleague Tristup already mentioned, we do not provide support for custom coding. If you need your code fixed, please consider having our Elite team do the work for you. You can check our Elite service here https://theme.co/elite

Thanks.

[jrhager84]

My code is not broken. The code works, and only doesn’t because of x theme’s button element. The styling is ridiculously convoluted and unintuitive, sometimes having 20-30 nested class names. I’ll just append the class to the span. I.e. I’ll figure it out myself.

I literally write JS/TS all day long. Please spare me the ‘cross-compatibility’ lecture.

Thanks.

[jrhager84]

Here’s a fiddle with it working outside of x theme in ios on chrome:

https://jsfiddle.net/5jkmcvne/

I’ll attach it showing that it works on ios don’t tell me it’s not x theme because it is. Thanks.

Let me be clear: I’m not asking for my JS code to be ‘fixed’ or even looked at. I’m asking why it wasn’t showing up on iOS in chrome. That absolutely falls within the scope of your product.

[christian]

Hey @jrhager84,

Firstly, I believe you haven’t read or understand my post. I said your code works for simple links. I even showed you that it works INSIDE Pro. Please review the my screenshot.

Your code only doesn’t work for the Button element because of the element’s structure. I understand you don’t like the element’s structure. You have a choice not to use it and I said in my post that you should use your own HTML in the Raw Content element instead.

If I’ll explain why your code will not work, that is the same as working on custom integration of your code for the Button element. That work would require research as to why your custom code won’t work with the Button element in iOS only. That might take hours that’s why I recommend our Elite team so they can estimate how many hours they need to spend. We do not do custom integration as part of our product support. Please kindly check our Terms.

Lastly, I’m not providing a lecture on cross-browser compatibility. It’s just a fact that your custom code will not work with the Button element.

I hope you understand now.

[jrhager84]

At least we finally agree - my code doesn’t work because of themeco’s button element structure. Why working code doesn’t work inside an element of your product is exactly within scope of support. I want my code to work in your product. I never asked for a js code review. Why would I use x theme then? The documentation doesn’t cover this in any detail at all either. Surely you can understand my frustration.

I’ll just switch them to custom raw elements. Just means I have to write custom css transitions but whatever. Personally not a fan of the unneeded up-sell to elite.

The fact you ‘believe’ I haven’t read or understand your post is also just a touch condescending.

[marc_a]

Hey @jrhager84,

We’re sorry for the frustration. Anything that alters the default functionality of our elements will fall under customization which is outside the scope of our theme support. You may follow the suggestion given by my colleague by using the Raw Element.

Thank you for understanding.