0

プログラミング初心者です。
monacaを使ってAmazon Linux上のデータベースにあるデータを表示するアプリを作っています。

JS/CSSコンポーネントの追加から「jQuery バージョン:3.4.1」を選択し、
<script src="components/jquery/jquery.min.js"></script> でロードするように設定しました。

しかし実行していると「Uncaught TypeError: $ is not defined」と出てしまいます。
調べてみるとjQueryのファイルそのものの呼び出しが行われていないか、javascriptと干渉しないようにjQueryの'$'を認識させない設定になっているとのことなので、$の箇所をjQueryに直してみたのですが、「jQuery is not defined」と出てしまいます。やはり正しくjQueryが読み込めてないということなのでしょうか。

また「Uncaught ReferenceError: define is not defined」とも出てしまったのですが、こちらに関しては検索しても中々出てこなかったので何のエラーなのか分からないです…

どなたかご教授をお願い致します。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/jquery/jquery.min.js"></script>
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
  $(function(){ 
   Count();       //Count を呼び出す 
   setInterval(getCount, 5000);  //5秒ごとにCountする
   }); 
   
  function Count(){      //↓カウントプログラムを呼び出す 
   $.get("http://ec2-13-229-124-131.ap-southeast-1.compute.amazonaws.com/database.php",
    function(data){ 
     var html = "<table style='margin:auto' border><tr><th>センサー</th><th>回数</th></tr>"; 
     for(var i = 0; i < data.length; i++){  //結果1つずつ       
     var id = data[i].id;  //id ← 1      
    var varc = data[i].varc;   //count ← 
      html = html + "<tr><td>" + id+ "</td><td>" + count  + "</td></tr>"; 
     } 
     html = html + "</table>"; 
     $("#contents").html(html); //ページの中に反映させる 
    } 
   ); 
  }
    </script>
</head>
<body>
	<p style="text-align: center;" id="contents"> 
  
 </p>
</body>
</html>

3
  • components/jquery/jquery.min.js をブラウザで直接URLとして叩くと表示はできますか?
    – keitaro_so
    Commented 2020年2月26日 5:32
  • ご指摘ありがとうございます。最初は表示出来ませんでしたが、jquery.min.jsを再インストールしたところ表示出来るようになりました。
    – ha nna
    Commented 2020年2月28日 0:54
  • @hanna さん> もし問題が解決した場合は、回答の左側にあるチェックマークをクリックし、質問を解決済みにしていただけませんか?
    – supa
    Commented 2020年2月28日 5:57

1 件の回答 1

1

jQueryのコードがうまく組み込まれていないように思います。
もう一度、JS/CSSコンポーネントからjQueryの「設定」を開いてみてください

ダイアログの上部に「読み込むファイルを選択してください jquery」と表示されて、チェックボックスがたくさん表示されていると思いますが、上から3番目のjquery.min.jsがチェックされているかを確認して、もしチェックされていなければそれをチェックして、「保存」ボタンを押してみてください。

1
  • ご指摘ありがとうございます。確認してみたところチェックはされていたのですが、全てのチェックボックスをチェックしていたので、もう一度jQueryを再インストールしてjquery.min.jsだけをチェックして保存してから実行したところ、正しく動作しました。
    – ha nna
    Commented 2020年2月28日 0:44

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。