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

egoselfaxis
egoselfaxis used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Robert PerezFront-end Developer

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

Author

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 Developer

Commented:
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
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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

Author

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?
Front-end Developer
Commented:
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

Author

Commented:
Thanks for your help Robert!
Robert PerezFront-end Developer

Commented:
Glad to help, have a great weekend!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial