I'm trying to load easy pie chart for my HTML+Flask page and I received only the label without circle.
{% block head %}
<title>Home</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}"/>
{% endblock %}
{% block body %}
<div class="container">
<div class="overview-chart-body">
<div class="chart" data-percent="75"><span class="percent">75%</span></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename ='js/jquery.easypiechart.js') }}"></script>
<script>
$(function () {
$('.chart').easyPieChart({
})
})
</script>
{% endblock %}
Can anyone help me what is wrong with this code and how to fix this.
Related
I can't use emojionearea in a simple page in Django. I have followed the basics steps, listed on their website:
What I have done:
downloaded the zip from their GitHub and copied both of these files into CSS and JavaScript folder
configure django static settings e.g add to url, add static dir, add url pattern
added the script written above.
Code:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/emojionearea.min.css' %}">
<link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
<body>
{% include 'navbar.html' %}
{% block content %}
{% endblock content %}
<script>
$(document).ready(function() {
$("#mytextarea").emojioneArea();
})
</script>
<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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{% static 'js/emojionearea.min.js' %}"></script>
</body>
</html>
and this is the form text area I want to add the emoji to:
<form method="post" action="" class="edit">
{% csrf_token %}
<div class="form-row">
<div class="col-12">
<label for="inputTask">Tweet:</label>
<textarea class="form-control" placeholder="Enter Tweet:" name="tweet" id="mytextarea"></textarea>
</div>
<div class="col-10">
<label for="inputTime">Image:</label>
<input type="file" class="form-control" placeholder="select image:" name="images">
</div>
<div class="col-2" style="margin-top: 35px;">
<button type="submit" class="btn btn-outline-primary float-right">Add Tweet</button>
</div>
</div>
</form>
I have also tried putting textarea out of form tag and do the stuff on it, but still no effect
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>
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'm adding a drag and drop list in my Flask application. However, the list is not draggable. What wrong with my coding?
I have tried to use the jquery-sortable.js library.
Code in home.html:
{% extends "layout.html" %}
{% block content %}
<script type="text/javascript">
$(function() {
$("ol.list-group-sortable").sortable();
});
</script>
<div class="content-section">
<ol class="list-group list-group-sortable" method="POST" action="">
{% for item in things_to_sort %}
<li class="list-group-item" id="Item-{{ item }}">{{ item }}</li>
{% endfor %}
</ol>
</div>
{% endblock content %}
Code in layout.html:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='jquery-sortable.js') }}"></script>
The rendered html:
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="/static/jquery-sortable.js"></script>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
<script type="text/javascript">
$(function() {
$("ol.list-group-sortable").sortable();
});
</script>
<div class="content-section">
<ol class="list-group list-group-sortable" method="POST" action="">
<li class="list-group-item" id="Item-Test">Test</li>
<li class="list-group-item" id="Item-Testing">Testing</li>
<li class="list-group-item" id="Item-Hi">Hi</li>
</ol>
</div>
</div>
</div>
</main>
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?