I have add datepicker for jQuery UI but I have this error:
Uncaught TypeError: $(...).datepicker is not a function
I add plugin jQuery and jQuery-ui but I have also error
code twig:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Acceuil- Trouvez une nounou c'est facile{% endblock %}</title>
{% block stylesheets %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Raleway:400,700|Merriweather:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('bundles/app/css/MarkerCluster.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/app/css/MarkerCluster.Default.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/app/css/application-42e4eacdbf0506bba5a7d1c783732309c84eb2d6203203da608691b414ebe1c7.css') }}">
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<div id="page">
{% block header %}
<header id="navbar">
<div class="container">
<a class="logo nounou-top" href="{{path('homePage')}}">BabySitter</a>
<div class="ui secondary user menu floated right">
<div id="connect_subscribe_links">
<a class="item" id="navbar_connect" href="{{path('fos_user_security_login')}}">Connexion</a>
<a class="ui small action button blue" id="navbar_subscribe" href="{{ path('inscription') }}">Inscription</a>
</div>
<div class="ui dropdown autolaunch icon button right top pointing blue" id="connect_subscribe_menu">
<i class="dropdown icon"></i>
<div class="ui menu transition hidden">
<a class="item" href="/sessions/new">Connexion</a>
<a class="item" href="/welcome/choice_category_ad">Inscription</a>
</div>
</div>
</div>
</div>
</header>
{% endblock %}
{% block body %}
{% endblock %}
</div>
{% block javascripts %}
<script src="{{ asset('bundles/app/js/places.js') }}"></script>
<script src="{{ asset('bundles/app/js/jquery.js') }}"></script>
<script src="{{ asset('bundles/app/js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('bundles/app/js/application-5385288a7f4b3693dff01f301b0b54547c2887a2eaf0c85b91ed655ec7424ff7.js') }}"></script>
<script src="{{ asset('bundles/app/js/stripe.js') }}"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
{% endblock %}
</body>
</html>
I add plugin jquery and jquery UI but I have this error .. how to resolve this error please
Remove this, try again: (your problem is you're calling the jquery library twice)
<script src="{{ asset('bundles/app/js/jquery.js') }}"></script>
Related
I want to make an infinite scroll but it's not working and throws errors in the console:
Here is my HTML:
{% extends 'base.html' %}
{% load static %}
{% block imports %}
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
{% endblock imports %}
{% block main %}
<h1 class="title">Was soll es denn heute geben?</h1>
<div class="all-recipes infinite-container" id="all-recipes">
{% for recipe in queryset_recipes %}
<div class="recipe-box infinite-item">
<a href="{{recipe.get_absolute_url}}" class="recipe-link">
<img src="{{recipe.images}}" alt="Rezept Bild" class="image" />
<h3 class="recipe-title">{{recipe.title}}</h3>
</a>
</div>
{% endfor %}
</div>
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}"></a>
{% endif %}
<div class="d-flex justify-content-center" style="display:none;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
{% endblock main %}
{% block scripts %}
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
onBeforePageLoad: function () {
$('.loading').show();
},
onAfterPageLoad: function ($items) {
$('.loading').hide();
}
});
</script>
{% endblock scripts %}
And here are the Errors:
1.
infinite.min.js:57 Uncaught TypeError: Cannot set property 'Infinite' of undefined
at infinite.min.js:57
at infinite.min.js:58
(index):329 Uncaught ReferenceError: Waypoint is not defined
at (index):329
I really hope that somebody could help me solving those errors because I have no idea why this is happening. Thank You!
You should have instead of
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
Next ordering:
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/jquery.waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
Pay attention to jquery.waypoints.min.js
I have add datepicker for jQuery UI but I have this error:
Uncaught TypeError: $(...).datepicker is not a function
I add plugin jQuery and jQuery-ui but I have also error
code twig:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Acceuil-{% endblock %}</title>
{% block stylesheets %}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Raleway:400,700|Merriweather:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('bundles/app/css/MarkerCluster.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/app/css/MarkerCluster.Default.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/app/css/application-42e4eacdbf0506bba5a7d1c783732309c84eb2d6203203da608691b414ebe1c7.css') }}">
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<div id="page">
{% block header %}
<header id="navbar">
<div class="container">
<a class="logo nounou-top" href="{{path('homePage')}}">BabySitter</a>
<div class="ui secondary user menu floated right">
<div id="connect_subscribe_links">
<a class="item" id="navbar_connect" href="{{path('fos_user_security_login')}}">Connexion</a>
<a class="ui small action button blue" id="navbar_subscribe" href="{{ path('inscription') }}">Inscription</a>
</div>
<div class="ui dropdown autolaunch icon button right top pointing blue" id="connect_subscribe_menu">
<i class="dropdown icon"></i>
<div class="ui menu transition hidden">
<a class="item" href="/sessions/new">Connexion</a>
<a class="item" href="/welcome/choice_category_ad">Inscription</a>
</div>
</div>
</div>
</div>
</header>
{% endblock %}
{% block body %}
{% endblock %}
</div>
{% block javascripts %}
<script src="{{ asset('bundles/app/js/places.js') }}"></script>
<script src="{{ asset('bundles/app/js/jquery.js') }}"></script>
<script src="{{ asset('bundles/app/js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('bundles/app/js/application-5385288a7f4b3693dff01f301b0b54547c2887a2eaf0c85b91ed655ec7424ff7.js') }}"></script>
<script src="{{ asset('bundles/app/js/stripe.js') }}"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
{% endblock %}
</body>
</html>
I add plugin jquery and jquery UI but I have this error .. how to resolve this error please
I am working on incorporating a react front end with my flask website and am having trouble getting the react component to show up. I am able to use webpack to build and load in my modules without issue, but perhaps don't fully understand how to get the react side running.
Here is the html that holds the div (note, I use flask to simply extend my layout html):
{% extends 'layout.html' %}
{% block content %}
<body id = "aboutPage" data-spy="scroll" data-target = ".navbar" data-offset="60">
<div id = "date-root"> </div>
</body>
{% endblock content %}
The layout html:
<!DOCTYPE html>
<html style="padding:0px;" >
<head >
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="robots" content="noindex,follow" />
<!-- React required tags, change to production later -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Lodash for webpack -->
<script src="https://unpkg.com/lodash#4.16.6"></script>
<!-- Bootstrap CSS and JQuery -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
{% if title %}
<title>{{ title }}</title>
{% else %}
<title>Sneak Em</title>
{% endif %}
</head>
<body background = "{{ url_for('static', filename = 'shoes-dark-green.jpg') }}">
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel navbar-fixed-top" style="background-color: #000000; border-radius:0; margin-bottom:0; border:0; position:fixed; top: 0; width: 100%; z-index:999;">
<div class="container">
<a class="navbar-brand mr-4" href="{{ url_for('shop') }}">Sneak Em</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
<a class="nav-item nav-link" href="{{ url_for('calendar') }}">Schedule</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav right" style = "text-align: center;">
{% if not current_user.is_authenticated %}
<a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
<a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>
{% else %}
<a class="nav-item nav-link" href="{{ url_for('profile') }}">
{% if current_user.first_name is not none %}
{{current_user.first_name}}
{% else %}
Profile
{% endif %}
</a>
<a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<main role="main" class="container" style = "width: 100%; height:auto; z-index:-999; margin-top:0px;">
<div class="row" style = "width: 100%;">
<div class="col-md-8" style = "width: 100%; flex: none; max-width: none;">
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
{{ message }}
</div>
{% endfor %}
</div>
</div>
</main>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Here is my entry point js file, index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import MyDayPicker from './daypicker';
ReactDOM.render(
<MyDayPicker />,
document.getElementById("date-root")
);
const element = <h1>Schedule</h1>;
console.log(element);
Lastly, here is the daypicker.js file which holds the react component and its code:
import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
export default class MyDayPicker extends React.Component {
constructor(props) {
super(props);
this.handleDayClick = this.handleDayClick.bind(this);
this.state = {
selectedDay: null,
};
}
handleDayClick(day, { selected }) {
this.setState({
selectedDay: selected ? undefined : day,
});
}
render() {
return (
<div>
<DayPicker
selectedDays={this.state.selectedDay}
onDayClick={this.handleDayClick}
/>
<p>
{this.state.selectedDay
? this.state.selectedDay.toLocaleDateString()
: 'Please select a day'}
</p>
</div>
);
}
}
Please help me figure out what I am missing! Thanks guys.
I'm not using flask so maybe I'm wrong... but it seems to me that you missed react script in *.html file. Please add:
<script src="<path to your react script - index.js" ></script>
You can check diagnose the problem by starting to see whether a native react component is loaded or not, like Router, if the problem didn't went away, if not, check the inspection console to see the error.
I am trying to use bootstrap-toggle to create a toggle button according to http://www.bootstraptoggle.com/.
I have the following css and js imports.
all CSS and JS files are latest versions pulled today from the web.
<!-- Bootstrap Core CSS -->
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/bootstrap-toggle.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/agency.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/google_font.min.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='js/jquery.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/jquery.easing.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/jqBootstrapValidation.js')}}"></script>
<script src="{{ url_for('static', filename='js/respond.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/html5shiv.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/contact_me.js')}}"></script>
<script src="{{ url_for('static', filename='js/classie.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/cbpAnimatedHeader.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/bootstrap-toggle.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/agency.min.js')}}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>
and my html code is as follows
<div class="col-md-6">
<div class="pull-left">
<input type="checkbox" name="accounts" id="accounts" data-toggle="toggle">
<button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><input data-toggle="toggle" type="checkbox" name="accounts" id="accounts"></li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
</div>
This code shows up as a simple checkbox. I would prefer to use modules instead of writing my own code as I am very new as css and js. Any idea why this is not showing up correctly?
I'm trying to use Material Bootstrap Alert in my Django app. If user inputs wrong password or username while trying to login to the page, the error toast message should appear in the upper right corner. With js alert it works perfectly fine but when I'm trying to invoke toastr.error('Wrong login credentials. Please, try again...'); I get these erorrs:
jQuery.Deferred exception: toastr is not defined #http://127.0.0.1:8000/login/:63:9
j#http://127.0.0.1:8000/static/js/jquery-3.2.1.min.js:2:29997
g/http://127.0.0.1:8000/static/js/jquery-3.2.1.min.js:2:30313
undefined
ReferenceError: toastr is not defined
Here is my login.html page:
{% extends 'utas/template.html' %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Login{% endblock %}</title>
</head>
<body>
{% block pagecontent %}
<div class="container">
<!-- Begin Form login -->
<form method="post" class="mt-5" style="width: 24rem; margin: 0 auto;">
{% csrf_token %}
<p class="h5 text-center mb-4">Sign in</p>
<div class="md-form">
<i class="fa prefix material-icons grey-text">account_circle</i>
<input type="text" id="defaultForm-user" class="form-control" name="username"
required
oninvalid="this.setCustomValidity('Username is required!')"
oninput="setCustomValidity('')">
<label for="defaultForm-user">Your username</label>
</div>
<div class="md-form">
<i class="fa prefix material-icons grey-text">lock</i>
<input type="password" id="defaultForm-pass" class="form-control" name="password"
required
oninvalid="this.setCustomValidity('Password is required!')"
oninput="setCustomValidity('')">
<label for="defaultForm-pass">Your password</label>
</div>
<div class="text-center">
<button type="submit" class="btn btn-default">Login</button>
</div>
</form>
<!-- End Form login -->
</div>
{% endblock %}
{% block script %}
{% if form.errors %}
<script type='text/javascript'>
$(document).ready(function()
{
toastr.error('Wrong login credentials. Please, try again...');
});
</script>
{%endif%}
{% endblock %}
</body>
</html>
And here is my template.html with required scripts:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>UTAS - {% block title %}{% endblock %} </title>
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" rel="stylesheet">
<!-- Custom styles -->
<link href="{% static 'css/style.css'%}" rel="stylesheet">
</head>
<body>
{% block pagecontent %}
{% endblock %}
</body>
<script src="{% static 'js/jquery-3.2.1.min.js'%}"></script>
<script src="{% static 'js/popper.min.js'%}"></script>
<script src="{% static 'js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/mdb.min.js'%}"></script>
{% block script %}
{% endblock %}
</html>
I'm not very experienced with JS or jQuery. All javascript files are from official MDB website.
Found the reason of error. I've been using version of framework which don't have toast messages