I'm having some trouble with a small bit of code. Essentially, I inserted a small script into our HTML webpage to pull a navigation/menu bar in from a separate file - so that I can make changes to it sitewide as I please.
Initially, the code would not load locally. I understand this is a common issue with some scripts, so I overlooked it since it worked in my Browser-Plus view within my IDE (Atom).
Now, I had our IT manager upload the test file of our homepage to see if it works live as well. It does not. The page is fine but the menu bar is not appearing as it does in my IDE viewer.
I checked the JS Console, and my function line throws an Uncaught ReferenceError: $ is Not Defined.
Can anyone tell me a workaround or different approach?
My boss is not very tech savvy and will not allow the code to go live until I can show him that it works locally - which is starting to seem like an impossible task. I'm not a developer by trade, I just do our website work because I have some webdev knowledge, so this is not exactly in my wheelhouse.
Code below.
'''
<!--THIS SCRIPT PLACES THE MENU BAR-->
<script>
$.get("nav.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>
<!--END MENU SCRIPT-->
'''
I also tried:
'''
<!--THIS SCRIPT PLACES THE MENU BAR-->
<script type="text/javascript">
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--END MENU SCRIPT-->
'''
Thanks everyone!