Important jQuery / Javascript specific features not working on mobile Safari and Chrome

For some reason, 2 important features of this landing page that I'm trying to wrap up aren't working on mobile:

https://www.movingpicture.com/camera-rentals/

1) My multi-step form is not displaying
2) My jQuery load() methods for the sections with the headings "Browse cameras. Then rent." and "Other equipment you might also need" are not working working.


I've been testing using Safari and Chrome using an iPhone X and both mobile browsers are having the same exavt problems.

I suspect that the problem is Javascript based, but I have no idea what's broken or incompatible.  How can I fix these 2 important features so that they both work on mobile?

Here is a link to my custom.js file:

https://www.movingpicture.com/camera-rentals/js/custom.js

Thanks,
- Yvan
egoselfaxisAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert PerezFront-end DeveloperCommented:
Hey Egoselfaxis,

I'm actually not having trouble loading your website on mobile. (Google Pixel XL 2), but I AM having troubles loading your website on my imac.

The errors in the console indicate your Jquery isn't being loaded.

Errors

Could you switch out
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Open in new window

with
<script
  src="https://code.jquery.com/jquery-2.2.3.js"
  integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
  crossorigin="anonymous"></script>

Open in new window

egoselfaxisAuthor Commented:
Changing out the jQuery script tag made it so that the multi-step form now initially displays in both mobile Safari and chrome .. but it doesn't work the way it's supposed to (ie: the required field highlighting isn't working, and clicking on the GET A QUOTE button doesn't advance you to the next step/tab like it's supposed to).

Also .. my  jQuery load() methods for the sections with the headings "Browse cameras. Then rent." and "Other equipment you might also need" still aren't working .

- Yvan
Robert PerezFront-end DeveloperCommented:
Hey Yvan,

Sorry if you receive 2 test notifications. I tested from my iMac and an iPad pro and both successfully passed through the checkout method.

On the initial load, it didn't come up, but once I refreshed, your site worked. So it looks like there might be some inconsistency with the loading of the Jquery script.

-Robert
Get Blueprints for Increased Customer Retention

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

egoselfaxisAuthor Commented:
Ah - hah!!!  I apparently had a typo in a couple of my javascript methods (I was missing a closing parentheses in a couple of places).  

document.querySelector('#camera-nav li:nth-child(1').addEventListener('click', function() { 

Open in new window


Should have been ...

document.querySelector('#camera-nav li:nth-child(1)').addEventListener('click', function() { 

Open in new window


Now almost everything is working.  The only thing that still isn't working is when I click on the GET A QUOTE button in the form (after typing in some text) .. the screen that displays the next step in the multi-stop form is being displayed UNDERNEATH the first form .. instead of replacing it.  And ideas as to why this might be happening?

- Yvan
egoselfaxisAuthor Commented:
Hmm .. now it appears to be working correctly for me.  I'm not sure what I did exactly, but I think it might have been a CSS tweak.  Could you please verify that it's now behaving correctly for you on your mobile device?
Robert PerezFront-end DeveloperCommented:
Yvan,  All looks good on my end. Everything is in place and I can see all the steps of the forms process.

Syntax errors are always a pain,  small and undetected pains haha.

May I also recommend http://esprima.org/demo/validate.html, when I write custom scripts I run them through there just to make sure I don't miss anything small with syntax.

-Robert

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
egoselfaxisAuthor Commented:
Thanks for your help Robert!
Robert PerezFront-end DeveloperCommented:
Glad to help, have a great weekend!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
iOS

From novice to tech pro — start learning today.