Develop Reference

Django-bootstrap-datepicker-plus is not rendering datepicker properly

I am facing with the problem that my datetimepicker is not loading at all.
Just in my template, the datetime field loads the current date and time when i press the calendar icon as the image shows.
Despite following the installation steps from here : https://pypi.org/project/django-bootstrap-datepicker-plus/ and checking other answers in stackoverflow i did not manage to find the solution.
I think the problem has to do with the imports and their priority.
my template
{% extends 'base.html' %}
{% load render_table from django_tables2 %}
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{% block page-title %}Creation of Process Note{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-6 col-xl-6 offset-md-3">
<form class="well" method="post" action="">
{% csrf_token %}
{% bootstrap_form form %}
<br>
{% buttons %}
<button type="submit" class="btn btn-primary">
Submit
</button>
{% endbuttons %}
</form>
{{ form.media }}
</div>
</div>
{% endblock %}
in settings.py
BOOTSTRAP4 = {
'include_jquery': True,
}
In my base.html the appearence of the imports is:
Inside head
<link href="/static/theme/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="/static/theme/assets/js/jquery.min.js"></script>
...
Inside footer
<script src="/static/theme/assets/js/bootstrap.bundle.min.js"></script>
...
my model
class Case_Notes(models.Model):
date_created = models.DateTimeField("Creation Date", null=True,blank=True, default=datetime.datetime.now)
date = models.DateTimeField("Appointment Date", null=True,blank=True)
notes = models.CharField("Notes",max_length=500, blank=True, null=True)
def __str__(self):
return self.notes
my form
class ProcessNotesForm(ModelForm):
notes= CharField(required=False,widget=Textarea(attrs={"rows":5, "cols":20}))
class Meta:
model = Case_Notes
fields = ("date","notes",)
widgets = {
'date': DateTimePickerInput(), # default date-format %m/%d/%Y will be used
}
Why datepicker widget in the form field is not rendering?

According to the documentation, the {{ form.media }} needs to follow right under the {% bootstrap_javascript jquery='full' %} in your template file.
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{{ form.media }}

Addition to {{ form.media }} you use tuple instead of an array in the fields Meta in the ModelForm:
class ProcessNotesForm(ModelForm):
notes= CharField(required=False,widget=Textarea(attrs={"rows":5, "cols":20}))
class Meta:
model = Case_Notes
fields = ["date", "notes" ] # change this ("date","notes",)
widgets = {
'date': DateTimePickerInput(), # default date-format %m/%d/%Y will be used
}

Embed tweets using python django + Javascript

I'm trying to embed tweets using python django and javascript.
This is my views.py currently:
def tweets(request):
context_dict = {}
tweets_today = Tweet.objects.order_by('-favorites')
tweets_today = tweets_today[:15]
context_dict['tweets_today'] = tweets_today
return render(request, 'summary/tweets.html', context_dict)
And my HTML (base.html has the twitter JS script)
{% extends 'base.html' %}
{% block body_block %}
<div class="container">
{% for tweet in tweets_today %}
<div class="block social-block social-twitter">
<div id="container_{{ forloop.counter }}">
</div>
</div>
<script>
window.onload = (function () {
twttr.widgets.createTweet(
'{{ tweet.tweet_id }}',
document.getElementById('container_{{ forloop.counter }}'),
{
theme: 'dark'
}
);
});
</script>
{% endfor %}
</div>
{% endblock %}
For some reason this is only embedding one tweet. Is it because of the window.onload?

jQuery not working after ajax call, even though I'm using the correct on() method

I'm using django-el-pagination, a django package that allows ajax pagination. I'm paginating a queryset of Comment (a list of comments). The queryset is inside comments.html, which is inside comments_base.html, which is inside article.html (the parent view). Here's my views:
def article(request, category, id, extra_context=None):
name = resolve(request.path).kwargs['category']
instance = get_object_or_404(Post, id=id, entered_category=name)
new_comments_list = Comment.objects.filter(destination=id, parent_id=0).order_by('-timestamp')
template = 'article.html'
page_template = 'comments.html'
if request.is_ajax():
template = page_template
context = {
'id': id,
'comment_list': new_comments_list,
'page_template': page_template,
'instance': instance,
}
if extra_context is not None:
context.update(extra_context)
return render(request, template, context)
comments_base.html
{% block comments_base %}
<div class="commentsContainer">
<div class="endless_page_template">
{% include 'comments.html' %}
</div>
{% block js %}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="{% static 'js/el-pagination/js/el-pagination.js' %}"></script>
<script>
$.endlessPaginate({
});
</script>
{% endblock %}
</div>
{% endblock %}
comments.html
{% block comments %}
{% paginate 10 comment_list %}
{% for i in comment_list %}
{% if i.parent_comment %}
<div class="comment_shell hasParent">
{% else %}
<div>
{% endif %}
<div class='comment_div' data-comment_id="{{ i.id }}">
<div class="left_comment_div">
<div class="username_and_votes">
<h3><a class='username_foreign'>{{ i.user }}</a></h3>
{% for j in i.score.all %}
<span class="upvotes">{{ j.upvotes }}</span>
<span class="downvotes">{{ j.downvotes }}</span>
{% endfor %}
</div>
<br>
<p>{{ i.comment_text }}</p>
</div>
</div>
{% include 'comments.html' with comment_list=i.replies.all %}
</div>
{% endfor %}
{% show_pages %}
{% endblock %}
So when I go to the next set of comments in the pagination, jQuery doesn't work. And I assume this is because of it being appended or dynamic content. So I used the on() method which other answers say to do. However it still doesn't work. I'll just show a simple example to show it doesn't work:
$('.upvotes').on('click', function() {
$(this).css('color', '#fff');
});
Doesn't change color onclick. So is there any reason why it still doesn't work, and how can I fix it?

This sounds like an application of jquery's on method overload that uses the additional selector argument:
.on( events [, selector ] [, data ], handler )
From the jquery documentation:
When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.
So this should work:
$('body').on('click', '.upvotes', function() {
$(this).css('color', '#fff');
});
Or in place of the 'body' selector use any other element that exists in the DOM at the time that javascript is executed.

Django-endless-pagination: apply javascript to whole html after "show more"?

views.py
class PortfolioListView(AjaxListView):
model = Portfolio
context_object_name = "portfolios"
template_name = "portfolios/portfolio_list.html"
page_template = 'portfolios/portfolio_list_page.html'
portfolio_list.html
{% extends "skeleton/base.html" %}
{% load el_pagination_tags %}
{% block content %}
<div class="test-class">
hi-1
</div>
<section>
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10">
{% include page_template %}
</div>
</div>
</div>
</section>
{% endblock %}
{% block custom_js %}
<script src="{% static 'el-pagination/js/el-pagination.js' %}"></script>
<script>$.endlessPaginate({});</script>
<script type="text/javascript">
$(document).ready(function(){
$(".test-class").click(function(){
alert("ji");
});
});
</script>
{% endblock %}
portfolio_list_page.html
<div>
{% lazy_paginate portfolios %}
<div class="test-class">
hi-2
</div>
<div class="test-class">
hi-3
</div>
{% show_more %}
</div>
When I load portfolio_list.html page and click hi-1, it shows alert.
But when I click show more and click hi-2 or hi-3, it doesn't show alert.
I want to show alert even I clicked hi-2 or hi-3.
How can I implement this?
p.s Actually, this is a kinda very simple code for showing clearly what I want to do.
What I eventually want to do is to execute whole javascripts code(e.g _owl_carousel(), _flexslider(), _popover(), _lightbox(), _mixitup(),, etc) after loading portfolio_list_page so that this whole javascript function also can be applied to newly loaded page

Django: Jquery click function not working in Ajax

I have been working through the Tango with Django exercises to cut my teeth into Django. Almost done but having a problem with the Ajax part.
Ajax function to auto_add a page is not being called. Idk what the problem is since the other functions are being called.
On the shell prompt, there is no call to the ajax function at all. Help needed.
Pertinent code attached. It is the same as on the website link above.
static/rango-ajax.js
$('.rango-add').click(function(){
var catid = $(this).attr("data-catid");
var title = $(this).atrr("data-title");
var url = $(this).attr("data-url");
$.get('/rango/auto_add_page/', {category_id: catid, url: url, title: title}, function(data){
$('#pages').html(data);
me.hide();
});
});
templates/rango/category.html
{% if user.is_authenticated %}
<button data-catid="{{category.id}}" data-title="{{ result.title }}" data-url="{{ result.link }}" class="rango-add btn btn-mini btn-info" type="button">Add</button>
{% endif %}
rango/views.py
#login_required
def auto_add_page(request):
context = RequestContext(request)
cat_id = None
url = None
title = None
context_dict = {}
if request.method == 'GET':
cat_id = request.GET['category_id']
url = request.GET['url']
title = request.GET['title']
if cat_id:
category = Category.objects.get(id=int(cat_id))
p = Page.objects.get_or_create(category=category, title=title, url=url)
pages = Page.objects.filter(category=category).order_by('-views')
#Adds our results list to the template context under name pages.
context_dict['pages'] = pages
return render_to_response('rango/page_list.html', context_dict, context)
rango/urls.py
urlpatterns = patterns('',
url(r'^$', views.index, name='index'),
url(r'^goto/$', views.track_url, name='track_url'),
url(r'^add_category/$', views.add_category, name='add_category'),
url(r'^auto_add_page/$', views.auto_add_page, name='auto_add_page'),
Complete code is at this link.

your code is good, the only thing what you have to do is to define your template in /tango/templates/rango/page_list.html. This template have the following code:
{% if pages %}
<ul>
{% for page in pages %}
<li>
{{ page.title}}
{% if page.views > 1 %}
({{page.views}} views)
{% elif page.views == 1 %}
({{page.views}} view)
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<strong> No Pages currently in category. </strong>
{% endif %}
And inside of your category template you must define the following code:
% if category %}
{% if user.is_authenticated %}
Add a new Page <br>
{% endif %}
{% if pages %}
<div id="pages">
<ul>
{% for page in pages %}
<li>
{{ page.title}}
{% if page.views > 1 %}
({{page.views}} views)
{% elif page.views == 1 %}
({{page.views}} view)
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% else %}
<strong> No Pages currently in category. </strong>
{% endif %}
{% else %}
The specified category {{ category_name }} does not exist!
{% endif %}

I'm working through this section of the tutorial now and just want to add to Héctor's answer. To avoid duplicating the code to display the list of pages I did the following:
I added a get_page_list() method to tango/rango/templatetags/rango_extras.py, similar to the get_category_list() method used to display a list of categories in an earlier section of the tutorial.
from rango.models import Page
#register.inclusion_tag("rango/page_list.html")
def get_page_list(category):
pages = Page.objects.filter(category=category) if category else []
return {'pages': pages}
Then we just need to load rango_extras and call the get_page_list() method in tango/templates/rango/category.html.
{% extends 'rango/base.html' %}
{% load rango_extras %}
<!-- Existing code -->
{% if category %}
<!-- Existing code to show category likes and like button -->
<div id="page_list">
{% get_page_list category %}
</div>
<!-- Existing code to show search if user is authenticated -->
{% else %]
The specified category {{ category_name }} does not exist!
{% endif %}
This allows you to display the list of pages when a category page is first loaded and then refresh it if a category is added from the search area, without having to duplicate any code.