サーバーにアップすると動作が効かなくなる。java・jQuery

前提・実現したいこと

絞り込みページを制作しています。javaでの表示、非表示を切り分けているのですが、
オフライン環境でhtmlを開くと問題なく動作するのですが、
サーバーにアップして画面を読み込むと動作しなくて困っています。

wordpressも混在しているドメイン内なので、その辺りも影響しているのでしょうか？
サーバー内のページのデバックでは「ReferenceError: Can't find variable: jQuery」も出ています。「＄」を「jQuery」に変えたりしてますが、関係ないですかね。

どうかご教授お願いします！

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8" />
5
6<script type="text/javascript">
7
8</script>
9
10<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
11<script>
12  jQuery(function($) {
13    var lists = $('.list li');
14    $(document).on('change', '.serchBox select', function() {
15      lists.show();
16      for (var i = 0; i < $('.serchBox select').length; i++) {
17        // 絞り込みの項目を取得
18        var item = $('.serchBox select').eq(i).attr('name');
19        // 絞り込みの対象を取得
20        var target = $('.serchBox select').eq(i).val();
21
22        if(target != '') {
23          for (var j = 0; j < lists.length; j++) {
24            // 絞り込み対象でない場合は非表示
25            if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) {
26              lists.eq(j).hide();
27            }
28          };
29        }
30      };
31    });
32  });
33</script>
34<script>
35  (function(i, s, o, g, r, a, m) {
36i['GoogleAnalyticsObject'] = r;
37i[r] = i[r] || function() {
38    (i[r].q = i[r].q || []).push(arguments)
39}, i[r].l = 1 * new Date();
40a = s.createElement(o),
41m = s.getElementsByTagName(o)[0];
42a.async = 1;
43a.src = g;
44m.parentNode.insertBefore(a, m)
45})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
46
47ga('create', 'UA-55250624-1', 'auto');
48ga('send', 'pageview');
49</script>
50</head>
51
52<body>
53<div id="page">
54  <div class="serchBox  search-anime">
55    <select name="type">
56        <option value="">SIMタイプ</option>
57        <option value="data">データのみ</option>
58        <option value="talk_data">通話+データ</option>
59    </select>
60    <select name="free_talk_type">
61          <option value="">無料通話</option>
62          <option value="free_talk">完全無料</option>
63          <option value="10_free_talk">10分以内無料</option>
64          <option value="20_free_talk">10分以上無料</option>
65    </select>
66  </div>
67<div class="search-buttom">
68<a href="#go-serch" class="btn-circle-fishy">GO</a>
69</div>
70
71<a name="go-serch"></a>
72  <ul class="list">
73    <li class="template-list">
74        <p class="listing-data-title">データ量</p>
75        <p class="listing-talk-title">無料通話</p>
76        <p class="listing-month-title">月額</p>
77        <!--ここから修正-->
78        <p class="data_volume"><span class="30gb">90GB</span></p>
79        <p class="free_talk_type"><span class="">なし</span></p>
80        <p class="yenmonth">4860円</p>
81        <p class="type"><span class="data">データSIM</span></p>
82        <p class="talk_app"><span class="">--</span></p>
83    </li>
84    <li class="template-list">
85        <p class="listing-data-title">データ量</p>
86        <p class="listing-talk-title">無料通話</p>
87        <p class="listing-month-title">月額</p>
88        <!--ここから修正-->
89        <p class="data_volume"><span class="20gb">20GB</span></p>
90        <p class="free_talk_type"><span class="free_talk">完全無料</span></p>
91        <p class="yenmonth">4860円</p>
92        <p class="type"><span class="talk_data">通話+データSIM</span></p>
93        <p class="talk_app"><span class="appless">通話アプリ不要</span></p>
94    </li>
95    <li class="template-list">
96        <p class="listing-data-title">データ量</p>
97        <p class="listing-talk-title">無料通話</p>
98        <p class="listing-month-title">月額</p>
99        <!--ここから修正-->
100        <p class="data_volume"><span class="30gb">30GB</span></p>
101        <p class="free_talk_type"><span class="10_free_talk">10分無料</span></p>
102        <p class="yenmonth">5710円</p>
103        <p class="type"><span class="talk_data">通話+データSIM</span></p>
104        <p class="talk_app"><span class="mustapp">通話アプリ必須</span></p>
105    </li>
106  </ul>
107</div>
108
109</body>
110</html>
111

補足情報（FW/ツールのバージョンなど）

x-server管理画面内で直接ファイル管理しています。

m.ts10806

2019/10/09 21:42

JavaとJavaScriptは全く別物です。既に解決されていますがタグと質問文を修正しておいてもらえたらと

行動規範の内容に同意します

回答1件

ベストアンサー

サーバにアップロードしたものを閲覧する際のURLがhttpsから始まっていることが原因だと思います。
セキュリティ上の理由でhttpsで取得したページ中のhttpから始まるスクリプトは読み込まれないです。

diff
1- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

このようにjqueryの取得をhttpsで行うことにすれば読み込むことができます。

投稿2019/10/09 20:43