CODEWITHSUNDEEP
javascriptjqueryhtml
zjohn
zjohn

Reputation: 3

JS file loads on one page but not another

My .js file loads for one page but not another. I've already clicked into the JS file on the page where it doesn't work, and it seems to be loading fine.

This does not work

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
  <title>Homepage</title>
  <link href="{% static "css/app_search.css" %}" rel="stylesheet"></link>
  <!-- CSS reference: https://bootswatch.com/yeti/ -->
</head>

<body>

<!-- The header -->
  <div class="container">
    <div class="page-header" id="banner">
      <div class="row">
        <div class="col-lg-8 col-md-7 col-sm-6">
          <h1>Home page/h1>
        </div>
        <a href="{% url 'app_new:new' %}">Submit a Collection Request</a>
      </div>
    </div>
  </div>
  <br>

<!-- The form -->
BLAH BLAH (TOOK OUT CODE TO SHORTEN)

<gcse:searchbox-only></gcse:searchbox-only>
</div>
<script src="{% static "js/scripts.js" %}"></script>
</body>

</html>

Meanwhile, this works:

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
  <title>Seek</title>
  <link href="{% static "css/app_search.css" %}" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- CSS reference: https://bootswatch.com/yeti/ -->
</head>

<body>

!~form BLAH BLAH TOOK OUT CODE TO SHORTEN

<script src="{% static "js/scripts.js" %}"></script>
</body>

</html>

This is the JS file...

$(document).ready(function(){
    $(":submit").click(function(){
        alert("Thank you for submitting a website request!");
    });

    !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="4.0.0";
    analytics.load("key");
    analytics.page();
    }}();

    (function() {
      var cx = 'took out';
      var gcse = document.createElement('script');
      gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(gcse, s);
    })();

});

It is just weird because if the JS is wrong, then both pages should not be working. I am not getting any file not found errors, etc.

Upvotes: 0

Views: 595

Answers (1)

Thum Choon Tat
Thum Choon Tat

Reputation: 3090

You're using jQuery without importing it. Import jQuery script as shown in the working page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Upvotes: 1

Related Questions