LoginSignup
@coltonOP (こるとんくん)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

jQueryが使えない(Django)

Q&A

Closed

PythonJavaScriptDjangojQuery

DjangoでjQueryが使えない

手順通りに導入したのですがエラー吐いてjsが動きません

発生している問題・エラー

Uncaught TypeError: $(...).datepicker is not a function
    at HTMLDocument.<anonymous> ((インデックス):606:33)
    at e (jquery-3.6.0.min.js:2:30038)
    at t (jquery-3.6.0.min.js:2:30340)


jQuery.Deferred exception: $(...).datepicker is not a function TypeError: $(...).datepicker is not a function
    at HTMLDocument.<anonymous> (http://127.0.0.1:8000/Select/:606:33)
    at e (https://code.jquery.com/jquery-3.6.0.min.js:2:30038)
    at t (https://code.jquery.com/jquery-3.6.0.min.js:2:30340) undefined

base.html

{% load static %}
{% load widget_tweaks %}
<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="{% static 'create.css' %}" rel="stylesheet">
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="{% static 'js/sakusei.js' %}"></script>
    
    
    
    <style>
    .parent ul{
      display: none;
    }
    .active {
      
    }
    .active ul {
      display: block;
    }
  </style>

    <title>{% block title %}{% endblock %}</title>    
  </head>
  <body>
    {% block content %}{% endblock %}   
  </body>
</html>

{% extends "account/base2.html" %}

{% block title %}スケジュール{% endblock %}

{% block content %}
{% load widget_tweaks %}
    
  <div class="head">
      <header>
          <a class="headmoji">スケジュールアプリ</a>
      </header>
  </div>
  
  <div>
      <a class="mikettei">未返信</a>
  </div>
  
  
  <div class="information">
      <a class="font">     
              <p class="output-date-time"></p>
      </a>         
      <a class="font">ようこそ、{{ user.username }}さん</a>
         
  </div>
  
  
  
  
  <div class="sentaku">
      {% csrf_token %}     
      <ul class="mendantime">
          <a class="ff">{{ mendanform.mendantime.label }}</a>
      
          {% for radio in mendanform.mendantime|add_class:"ff" %}
              {{ radio.tag }}
              <label for="id_mendantime_{{ forloop.counter0 }}">{{ radio.choice_label }}</label>
          {% endfor%}
      </ul>
      
      <ul class="mendantype">
          <a class="ff">{{ mendanform.mendantype.label }}</a>
          {% for radio in mendanform.mendantype %}
          {{ radio.tag }}
          <label for="id_mendantype_{{ forloop.counter0 }}">{{ radio.choice_label }}</label>
       {% endfor %}
       </ul>    
  </div>
  
  <div class="jouhou">
      <ul>
      <a class="form"><a class="font">面談名</a> {{ mendanform.name|add_class:"frame" }}</a>
      <a class="form"><a class="font">面談場所</a> {{ mendanform.state|add_class:"frame" }}</a>
      <a class="form"><a class="font">募集締め切り日</a> {{ mendanform.deadline|add_class:"frame" }}</a>
      </ul>
  </div>
  
  
      
  
      <div class="kikan">
          <a class="bigfont"> 
          開催期間 </a> <br>
         <a class="font"> 開始日</a> {{ mendanform.startday|add_class:"frame" }} <br>
          <a class="font">終了日</a> {{ mendanform.endday|add_class:"frame" }} <br>
          
          <p>&nbsp;</p>
          
          <a class="bigfont">例外時間</a><br>
          {{ mendanform.reigai|add_class:"frame" }} <br>
          
          <p>&nbsp;</p>
          
          <a class="bigfont">面談優先度</a><br>
          1st <br>{{ mendanform.yusen1|add_class:"frame" }}<br>
          2nd <br>{{ mendanform.yusen2|add_class:"frame" }}<br>
          3rd <br>{{ mendanform.yusen3|add_class:"frame" }}<br>
          4th <br>{{ mendanform.yusen4|add_class:"frame" }}<br>
          5th <br>{{ mendanform.yusen5|add_class:"frame" }}<br>
  
      </div>
      
      <div class="taisyodaimei">
          <a class="bigfont">対象者</a>
      </div>
      
      <div class="taisyo">
      
        <table class="taisyosya">
            <tr>
                <th> 月 </th>
                <th> 火 </th>
                <th> 水 </th>
                <th> 木 </th>
                <th> 金 </th>
            </tr>
                
            
    {% for days in mendandays %}
        {% if days.week == 0 %}
            <tr>
                <td align="left"><dt><label><input type="checkbox">{{ days|date:"n/j"}}</label></dt><br>
                    
                    <dd><label><input type="checkbox">8:00</label></dd>  <dd><label><input type="checkbox">8:30</label></dd><br>
                    <dd><label><input type="checkbox">9:00</label></dd>  <dd><label><input type="checkbox">9:30</label></dd><br>
                    <dd><label><input type="checkbox">10:00</label></dd> <dd><label><input type="checkbox">10:30</label></dd><br>
                    <dd><label><input type="checkbox">11:00</label></dd> <dd><label><input type="checkbox">11:30</label></dd><br>
                    <dd><label><input type="checkbox">13:00</label></dd> <dd><label><input type="checkbox">13:30</label></dd><br>
                    <dd><label><input type="checkbox">14:00</label></dd> <dd><label><input type="checkbox">14:30</label></dd><br>
                    <dd><label><input type="checkbox">15:00</label></dd> <dd><label><input type="checkbox">15:30</label></dd><br>
                    <dd><label><input type="checkbox">16:00</label></dd> <dd><label><input type="checkbox">16:30</label></dd><br>
                </td>
                
        {% elif days.weekday == 4 %}
                <td align="left"><dt><label><input type="checkbox">{{ days|date:"n/j"}}</label></dt><br>
                    <dd><label><input type="checkbox">8:00</label></dd>  <dd><label><input type="checkbox">8:30</label></dd><br>
                    <dd><label><input type="checkbox">9:00</label></dd>  <dd><label><input type="checkbox">9:30</label></dd><br>
                    <dd><label><input type="checkbox">10:00</label></dd> <dd><label><input type="checkbox">10:30</label></dd><br>
                    <dd><label><input type="checkbox">11:00</label></dd> <dd><label><input type="checkbox">11:30</label></dd><br>
                    <dd><label><input type="checkbox">13:00</label></dd> <dd><label><input type="checkbox">13:30</label></dd><br>
                    <dd><label><input type="checkbox">14:00</label></dd> <dd><label><input type="checkbox">14:30</label></dd><br>
                    <dd><label><input type="checkbox">15:00</label></dd> <dd><label><input type="checkbox">15:30</label></dd><br>
                    <dd><label><input type="checkbox">16:00</label></dd> <dd><label><input type="checkbox">16:30</label></dd><br>
                </td>
            </tr>
            
        {% elif days.weekday == 5 or days.weekday == 6 %}
            
        {% else %}
                <td align="left"><dt><label><input type="checkbox">{{ days|date:"n/j"}}</label></dt><br>
                    <dd><label><input type="checkbox">8:00</label></dd>  <dd><label><input type="checkbox">8:30</label></dd><br>
                    <dd><label><input type="checkbox">9:00</label></dd>  <dd><label><input type="checkbox">9:30</label></dd><br>
                    <dd><label><input type="checkbox">10:00</label></dd> <dd><label><input type="checkbox">10:30</label></dd><br>
                    <dd><label><input type="checkbox">11:00</label></dd> <dd><label><input type="checkbox">11:30</label></dd><br>
                    <dd><label><input type="checkbox">13:00</label></dd> <dd><label><input type="checkbox">13:30</label></dd><br>
                    <dd><label><input type="checkbox">14:00</label></dd> <dd><label><input type="checkbox">14:30</label></dd><br>
                    <dd><label><input type="checkbox">15:00</label></dd> <dd><label><input type="checkbox">15:30</label></dd><br>
                    <dd><label><input type="checkbox">16:00</label></dd> <dd><label><input type="checkbox">16:30</label></dd><br>
                </td>
        {% endif %}
        
        
    {% endfor %}
            
            
        </table>
            
      </div>
      <br>
      
      <div class="button">
          <a href="#" class="buttontext">選択日時決定<a>
      </div>
      
      
      <div class="under">
          <a href="{% url 'account:logout' %}"> ログアウト </a>
      </div>
  
  
  
  
  
  
  <script>
        $(function () {
            // 日付は、年-月-日 の形式でお願いする。
            let dateFormat = 'yy-mm-dd';
            $('#id_created_at').datepicker({
                dateFormat: dateFormat
            });
        });

        // drag and drop event
        $(document).ready(function() {
            var obj = $("#dragandrophandler");
            obj.on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
                $(this).css('border', '2px solid #0B85A1');
            });
            obj.on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            obj.on('drop', function(e) {
                $(this).css('border', '2px dotted #0B85A1');
                e.preventDefault();
        
                var files = e.originalEvent.dataTransfer.files;
                
                // Modal dialog
                popupImage(file, obj);
            });
        
            // Avoid opening in a browser if the file is dropped outside the div
            $(document).on('dragenter', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
        
            $(document).on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();
                obj.css('border', '2px dotted #0B85A1');
            });
        
            $(document).on('drop', function (e) {
                e.stopPropagation();
                e.preventDefault();
            });
            
        });
    </script>
  
  <script>
    function func1(e) {
      e.classList.toggle("active");
    }
  </script>
  
 
      
{% endblock %}

フォルダ構成

static
    L  js
        L sakusei.js

setting.py

import os

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = "django-insecure-yjg9oj9*_w-b-e-rv5huhcak4jjd7ygyaubfz8!47(x8#nr8eu"

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    
    
    'account.apps.AccountConfig',
    
    'widget_tweaks',
    
]

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

ROOT_URLCONF = "scheduleproject.urls"

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [os.path.join('account','templates')],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
            
        },
    },
]



WSGI_APPLICATION = "scheduleproject.wsgi.application"


# Database
# https://docs.djangoproject.com/en/4.1/ref/settings/#databases

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": BASE_DIR / "db.sqlite3",
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
    },
    {"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",},
    {"NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",},
    {"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",},
]


# Internationalization
# https://docs.djangoproject.com/en/4.1/topics/i18n/

LANGUAGE_CODE = "ja"

TIME_ZONE = "Asia/Tokyo"

LOGIN_URL = "account:login"

LOGIN_REDIRECT_URL = "account:home"

LOGOUT_REDIRECT_URL = "account:top"

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/

STATIC_URL = "static/"

STATICFILES_DIRS = (os.path.join(BASE_DIR,'static'),)

# Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

AUTH_USER_MODEL = 'account.SyainMaster'

これを参考にしました

0 likes

1Answer

blue32a
@blue32a

datepickerというとjQuery UIのDatepickerを使いたいのでしょうか？
だとすればjQuery UIライブラリも読み込む必要があります。

3Like

Comments

  1. @coltonOP

    Questioner

    ありがとうございました。

    script文をbodyの最下に書く、jQuery　UIも書くことで動作しました
    協力ありがとうございました。

Your answer might help someone💌

LoginSign Up