Avatar of Mark B
Mark B
Flag for United States of America asked on

Javascript navigation not working 100% after AJAX scripts added to page

Hi- I am reworking an email form that was using server side script to client side. The issue, is that the Javascript navigation does not working correctly with the new Ajax scripts added to page, but if you hit refresh in browser, then the navigation seems to work ok. I am thinking perhaps there is a need to force reload the javascript after the new ajax based scripts load.

The page is here: http://dev.alphagraphicsseattle.com/contact.aspx

The new Ajax code added to the page is here (and we should not alter this vendor supplied code:

<!-- XMPL library -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link type="text/css" href="https://ajax.xmcircle.com/ajax/libs/xmpl/1.9.1/xmp/css/xmp.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="https://ajax.xmcircle.com/ajax/libs/xmpl/1.9.1/xmp/js/xmp.min.js"></script>
<script type="text/javascript" src="https://cdn.121.ag/sem/ag/skin2/xmpcfg/2gagsemhttps/xmpcfg.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.121.ag/sem/ag/skin2/css/xmpl.css" />
<!-- XMPL library -->

Open in new window


The javascript that manages the navigation style is here:

http://dev.alphagraphicsseattle.com/js/main092718.js

Attached are two screens. One shows how the navigation is not wide enough on page load / before refresh. The other screen shows how the navigation should look / after refresh.

I've tried moving the scripts around in the header, putting them after the body, added defer or async to the javascript lines. If there is a change to main092718.js, that is possible for us to add, but the other ajax scripts, we cannot change.

Is there some way to force the main092718.js to re initialize after ajax scripts or is there something to change in main092718.js? main092718.js has been working forever ok, but the addition of the new scripts has caused issues. Thank you for any direction.  Mark
before-refresh-notworking.png
after-refresh-working.png
JavaScriptAJAX* htl

Avatar of undefined
Last Comment
lenamtl

8/22/2022 - Mon
ste5an

You're the initPage() method in your original JS navigation is not called directly in your page code.-.
ASKER CERTIFIED SOLUTION
lenamtl

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes