I`ve made a inlineformset which contains a django-select2 field. The problem appears when I try to add another inline .The select2 data don't work on cloned field.
This is my template:
{{ form_m.management_form }}
{% for m in form_m.forms %}
<div class="{% cycle 'row1' 'row2' %} formset_row">
<div class="row">
<div class="col-sm-12">
{{ m.id }}
{{ m.medicament }}
</div>
</div>
<div class="row">
<div class="col-md-2">
{{ m.cantitate }}
</div>
<div class="col-md-2">
{{ m.nr_zile }}
</div>
<div class="col-md-2">
{{ m.mod_administrare }}
</div>
<div class="col-md-2">
{{ m.schema }}
</div>
</div>
</div>
{% endfor %}
This is my script for clone fields:
{% load static %}
<script src="{% static 'style/jquery.formset.js' %}"></script>
<script type="text/javascript">
$('.formset_row').formset({
addText: '<button id="add_more" class="btn btn-sm btn-success float-right mr-1">Adauga medicamentatie</button>',
deleteText: '<button class="btn btn-sm btn-danger float-right mr-5">Elimina</button>',
prefix: 'form_m_set',
});
</script>
Related
<div class="container" id="cd">
<div class="row">
<div class="col-2">
<label for="serialno" class="h4 text-center mx-4"> S.No </label>
</div>
<div class="col-3">
<label for="billno" class="h4 text-center"> Bill No</label>
</div>
<div class="col-5">
<label for="Items" class="h4 text-center"> Items</label>
</div>
<div class="col-2">
<label for="total" class="h4 text-center"> Total</label>
</div>
<hr>
</div>
{% for b,d in history.items %}
<div class="row" id="refresh">
<div class="col-2 py-2">
<label class="h6">{{forloop.counter}}. | {{b.created_at}}</label>
</div>
<div class="col-3 py-2">
<label class="h5">{{b}}</label>
</div>
<div class="col-5 py-2">
{% for i in d %}
<label class="h6">{{i.itemname}} x {{i.qty}} {{i.subtotal}}</label><br>
{% endfor %}
</div>
<div class="col-2 py-2">
<span class="h6">₹</span>
<label class="h6">{{b.grandtotal}}</label>
</div>
</div>
{% endfor %}
</div>
<script>
$(document).on('change','#myform',function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:"{% url 'history' %}",
data:{
tb1:$('#cal').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success:function(response){
},
});
});
</script>
How Can I reload this {% for b,d in history.items() %} without refresh a page using ajax
Any way to change history value using ajax Important Note value processed by onchange event
I am trying to reload the loop without a page reload
I want to change the history.items() django variable value after the ajax call and corressponding values can be iterated
{% for b,d in history.items %}
<div class="row" id="refresh-main">
<div class="row" id="refresh-child">
<div class="col-2 py-2">
<label class="h6">{{forloop.counter}}. | {{b.created_at}}</label>
</div>
<div class="col-3 py-2">
<label class="h5">{{b}}</label>
</div>
<div class="col-5 py-2">
{% for i in d %}
<label class="h6">{{i.itemname}} x {{i.qty}} {{i.subtotal}}</label><br>
{% endfor %}
</div>
<div class="col-2 py-2">
<span class="h6">₹</span>
<label class="h6">{{b.grandtotal}}</label>
</div>
</div>
</div>
{% endfor %}
<script>
$(document).on('change','#myform',function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:"{% url 'history' %}",
data:{
tb1:$('#cal').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success:function(response){
var pageURL = $(location).attr("href");
$('#refresh-main').load(pageURL + ' #refresh-child');
},
});
});
</script>
I want to hide the field form.name_of_parent_if_minor if the age (CharField) < 18 else show. I am not getting where to write jQuery or JS code or add separate js file. For this do I need to the html definition and add tag for age (CharField) or we can perform action on this as well.
I am new to the Django so if you find any mistakes in my code then any help would be appreciated for guidance.
forms.py
class StudentDetailsForm(forms.ModelForm):
class Meta:
model = StudentDetails
views.py
class StudentCreateView(LoginRequiredMixin, CreateView):
template_name = 'student/student_details_form.html'
model = StudentDetails
form_class = StudentDetailsForm
success_url = "/"
html
{% extends 'student/base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div id="idParentAccordian" class="content-section">
<form method="POST">
{% csrf_token %}
<div class="card mt-3">
<div class="card-header">
<a class="collapsed card-link" style="display: block;" data-toggle="collapse"
href="#idPersonalInformation">Personal Information</a>
</div>
<div id="idPersonalInformation" class="collapse show" data-parent="#idParentAccordian">
<div class="card-body">
<div class="row">
<div class="col-6">
{{ form.joining_date|as_crispy_field }}
</div>
<div class="col-6">
{{ form.class|as_crispy_field }}
</div>
</div>
{{ form.student_name|as_crispy_field }}
{{ form.father_name|as_crispy_field }}
{{ form.mother_name|as_crispy_field }}
{{ form.gender|as_crispy_field }}
<div class="row">
<div class="col-6">
{{ form.date_of_birth|as_crispy_field }}
</div>
<div class="col-6">
{{ form.age|as_crispy_field }}
</div>
</div>
<div>
{{ form.name_of_parent_if_minor|as_crispy_field }}
</div>
</div>
</div>
</div>
<div class="form-group mt-3">
<button class="btn btn-outline-info" type="submit">Save</button>
<a class="btn btn-outline-secondary" href="javascript:history.go(-1)">Cancel</a>
</div>
</form>
</div>
{% endblock content %}
the easiest way but not the cleanest is to add JS script in your html
the recommanded way is to add static folder to your app and load static files in your html template using {% load static %}
I am facing a problem building a django project:
the pull-right class in bootstrap 3 didn't work in django template pull-right
here is my code
{% block content %}
<div class="row">
<div class="col-sm-4 pull-right">
<h1>{{ title }}</h1>
<form method="POST" action="">
{% csrf_token %}
{{ form|crispy }}
<input class="btn btn-primary" type="submit" value="Sign Up!">
</form>
</div>
</div>
{% endblock content %}
Put a div inside your column and apply the pull-right class on that one.
<div class="col-sm-4">
<div class="pull-right">
<!-- content here -->
</div>
</div>
Why are you using columns if you want to pull it right?
I'm building a blog using Django and I just integrated markdown. How do I make sure that the truncated part of the body of a post (which is telling a little of what you'll see when that particular post is opened) doesn't display markdown?
I created a template filter markdown:
from django.utils.safestring import mark_safe
from django import template
import markdown
register = template.Library()
#register.filter(name='markdown')
def markdown_format(text):
return mark_safe(markdown.markdown(text))
Here's the usage in the post_list.html template
{% extends "base.html" %}
{% load blog_tags static disqus_tags %}
{% disqus_dev %}
{% block content %}
<div class="jumbotron">
<h1 class="heading-font">Shelter At Your Crossroads</h1>
<p class="lead">...some random ass text that could serve as motto or something</p>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8">
{% if tag %}
<h2 class="mb-4">Posts tagged with "{{ tag.name }}"</h2>
{% endif %}
{% for post in posts %}
<div class="card mb-5">
<img class="card-img-top img-fluid" src="{{ post.image.url }}" alt="{{ post.title }}">
<div class="card-body">
<h2 class="card-title">{{ post.title }}</h2>
<p class="card-text">{{ post.body|markdown|truncatewords_html:50 }}</p>
<i class="fa fa-book" aria-hidden="true"></i> Read More
<i class="fa fa-share-alt" aria-hidden="true"></i> Share Post
<div class="float-right">
<i class="fa fa-tags"></i>
{% for tag in post.tags.all %}
<a href="{% url 'post_list_by_tag' tag.slug %}">
<span class="badge badge-pill badge-info">{{ tag.name }}</span>
</a>
{% endfor %}
</div>
</div>
<div class="card-footer text-center text-muted">
Posted on {{ post.publish.date }} by {{ post.author.get_full_name }}
</div>
</div>
{% endfor %}
</div>
<div class="col-lg-4">
<div class="card border-dark mb-3">
<div class="card-header">Post Count</div>
<div class="card-body text-dark">
<h4 class="card-title text-center">Total Number of Posts</h4>
<p class="card-text text-center display-3">{% total_posts %}</p>
</div>
</div>
<div class="card border-dark mb-3">
<div class="card-header">Latest Posts</div>
<div class="card-body text-dark">
<h4 class="card-title text-center">Most Recent Posts</h4>
<p class="card-text">{% show_latest_posts 3 %}</p>
</div>
</div>
<div class="card border-dark mb-3">
<div class="card-header">Latest Comments</div>
<div class="card-body text-dark">
<h4 class="card-title text-center">Most Recent Comments</h4>
<p class="card-text">{% disqus_recent_comments shortname 5 50 1 %}</p>
</div>
</div>
</div>
</div>
{% include 'includes/pagination.html' with page=posts %}
</div>
{% endblock %}
The filter was used on line 22 - {{ post.body|markdown|truncatewords_html:50 }}
How do I make display just normal text?
In my Django app i'm using bootstrap-datepicker. User chooses a date, then date is passed in Ajax post request to /check/ view, then sub_template is reloaded with retrieved data.
Everything works like a charm on desktop, but it seems like datepicker doesn't work on phones at all. I've tested it on Iphone 6s, android phone and windows phone(all default browsers). When i press date it just doesn't respond in any way.
Here is my main page html:
<div class="container">
<div class="row text-center">
<h2>Availability</h2>
</div>
<hr>
<div class="row text-center hidden-xs ">
</div>
<div class="row row-pad-30 text-center">
<div class="col-lg-1 md-hidden"></div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<h3>1. Choose date</h3>
<form style="color: white;" class="form-date" role="form" action="" method="get">
{% csrf_token %}
<div class="form-group" id="datepicker">
<div></div>
<input data-date-format="YYYY-MM-DD" type="hidden" name="dt_due" id="dt_due" val="">
</div>
</form>
</div>
<div id="refresh-div" class="timedisplay">{% include 'booking/time.html' %}</div>
<div class="col-lg-1 md-hidden"></div>
</div>
</div>
sub page html:
<div class = "col-lg-6">
<h3 class = "h3-hour">2. Choose hour</h3>
<div class="row row-pad-20">
{% for time_list in availability_table %}
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
{% for i in time_list %}
<button type="submit" class="fade-in-quick btn btn-lg btn-block btn-info btn-core" value="{{ forloop.counter0 }}" name="time" id="time">{{ i.0|date:'H:i' }} do {{ i.1|date:'H:i' }}</button>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
main page script:
$('#datepicker div').datepicker({
language:"pl",
startDate: "+1d"
}).on('changeDate', function(event) {
var date = event.format()
console.log(date);
$.ajax({
type:'POST',
url: '/check/',
data: {'date': date, 'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()},
success: function(data) {
$('#refresh-div').html(data);
}
});
});
Any idea why it doesn't work?
So apparently this div:
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12"></div>
Was causing problems. When i just deleted all classes after col-lg-4(they are not necessary anyway) everything is working correctly.