I have a Django app, with new template where datetimepicker works well. I created an edit template but the widget do not load automatically, so I added them. But for some reason, i do not know how to bring the datetimepicker, I can only get the datepicker.
Does anybody knows please ?
The precise line in the edit template looks like:
<div>
<input id="Restriction_Start_Date_id" type="text" name="Restriction_Start_Date" value="{{ restricted_name_obj.Restriction_Start_Date|date:'n/j/Y G:i' }}" class="form form-control datepicker" >
</div>
While on the new template I have :
<div>{{ form.Restriction_Start_Date.label_tag }}</div>
<div>
{{ form.Restriction_Start_Date.errors }}
{{ form.Restriction_Start_Date }}
</div>
Solution found, I used the CDN and the following :
<link href="https://cdn.jsdelivr.net/npm/flatpickr#4.5.2/dist/flatpickr.min.css"type="text/css" media="all" rel="stylesheet">
<div>
<input type="hidden" name="Restriction_Start_Date" required="" id="Restriction_Start_Date" fp_config="{"id": "fp_14", "picker_type": "DATETIME", "linked_to": "fp_13", "options": {"mode": "single", "dateFormat": "Y-m-d H:i:S", "altInput": true, "enableTime": true}}"class="flatpickr-input" value="{{ restricted_name_obj.Restriction_Start_Date|date:'n/j/Y G:i' }}">
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/flatpickr#4.5.2/dist/flatpickr.min.js"></script>
<script type="text/javascript"src="https://cdn.jsdelivr.net/gh/monim67/django-flatpickr#1.0.0/static/js/django-flatpickr.js"></script>
(Not beautiful but it will do the job for now.
Related
i have this template on my Django
{% for car in cars%}
<div class="form-row">
<label for="detail-{{ detail.id }}"> <b>{{ detail.rejected_field.title }}</b> :
<img id="car-image" src="{{ car_manager_image_ + car.id }}">
</label>
</div>
{%endfor%}
car_manager_image is another image url sent via extra_context['car_manager_image_'+car.id] on the backend
my question is, how do i concate the data on Django Template?
im expecting result like 'car_manager_image_1'
You can use django build in add filter to concat both strings. Your code should be changed to
<img id="car-image" src="{{ car_manager_image_|add:car.id }}">
I have several dropdowns in my form, which I am looking to populate using Ajax from backend. Given below are the relevant code segments:
HTML:
<div class="row">
<div class="col-xs-6">
<div class="col-xs-6">
<label name="start_date" class="control-label" style="width:35%">Start date</label>
<input type="date" style="color:black;width:100px" ></input>
</div>
</div>
<div class="col-xs-6">
<label name="end_date" class="control-label" style="width:35%">End Date(Default: Current Date)</label>
<input style="color:black;width:100px" type="date"></input>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label name="fruit" class="control-label" style="width:35%; padding-left:15px">Select a Fruit</label>
<select style="width:150px;height:30px">
{% for option in options.fruit %}
<option value="{{ option }}">{{ option }}</option>
{% endfor %}
</select>
</div>
<div class="col-xs-6">
<label name="vendor" class="control-label" style="width:35%">Select a vendor</label>
<select style="width:150px;height:30px">
{% for option in options.vendor %}
{{ option }}
<option value="{{ option }}">{{ option }}</option>
{% endfor %}
</select>
</div>
</div>
{% block script %}
<script>
document.onload = function(){
$.ajax({
url : window.location.href,
type:'GET',
cache:false,
data:{type:'formdata'},
success:function(res){
if(typeof res.options == 'undefined'){
self.options = res.options;
}
if(typeof res.options.start_date == 'undefined'){
self.form.start_date = res.options.start_date;
}
if(typeof res.options.end_date == 'undefined'){
self.form.end_date = res.options.end_date;
}
if(typeof res.options.fruit == 'undefined'){
window.fruit = res.options.fruit;
}
if(typeof res.options.vendor == 'undefined'){
window.vendor = res.options.vendor;
}
},
error : function(err){
self.message = "Error getting data for the form";
}
});
}
</script>
{% endblock %}
Both the drop downs are independent of each other. The data is being given at the front end through this view:
class Search(View):
def get(self, request):
if request.GET.get('type') == 'formdata':
options = {'fruit': [], 'vendor': []}
try:
cursor = connections['RDB'].cursor()
options['end_date'] = today.strftime('%Y-%m-%d')
last_week_date = today - timedelta(days=7)
options['start_date'] = last_week_date.strftime('%Y-%m-%d')
options['fruit'] = [a[0] for a in cursor.fetchall()]
options['vendor'] = [a[0] for a in cursor.fetchall()]
return JsonResponse({'options': options})
The back end is working perfectly fine, the options dictionary is getting populated as I expected it to. However the drop down options are not showing up on the front end. Where am I going wrong? Any help is greatly appreciated.
Maybe try using select2 it's a pretty good utility for populating select boxes through Ajax, even has a search functionality in built. Here's a simple example.
html -
<html>
<head>
<title>Using Select2</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div class="jumbotron">
<div class="container bg-danger">
<div class="col-md-6">
<label>Single Select2</label>
<select class="js-data-example-ajax"></select>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$('.js-data-example-ajax').select2({
ajax: {
url: 'https://api.github.com/search/repositories',
dataType: 'json'
// Additional AJAX parameters go here; see the end of this chapter for the full code of this example
}
});
</script>
</body>
</html>
Don't forget to import the relative JS and CSS CDN's.
I put this layer on all pages on my website(layout) and I want to hide this layer when user type password(hello) using cookie.
I tried to mix two sources but it doesn't work :(
Can you guys help me? thanks :)
--- HTML ---
<div class="popPass">
<div class="passcode aligncenter">
<form name="loginpage" action="javascript:;" method="post" onsubmit="return LogIn( this );">
<div class="input nobottomborder">
<div class="inputcontent">
<input type="password" id="password" /><br />
</div>
</div>
<div class="buttons">
<input name="Submit" type="submit" value="Login">
</div>
</form>
</div>
</div>
I think I missed something.
From your fiddle, you defined your LogIn function inside the jQuery ready callback, which is not in the global scope. So the onsubmit handler can't access it. Try to lift it to the global scope.
I would like to set an icon in front of the selectable items in a multiple choice field I'm rendering with django-select2.
Per the documentation, it looks like I'll need to use templateResult, but not sure how in my case.
My HTML (simplified below) is rendered with django-crispy-forms and django-select2 as follows:
<form class="form-horizontal" method="post" >
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" type="text/css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript" src="/static/django_select2/django_select2.js"></script>
<label for="id_recipients" class="control-label col-lg-2 requiredField">Recipient(s)<span class="asteriskField">*</span> </label>
<select multiple="multiple" class="select2multiplewidget form-control django-select2" data-allow-clear="false" data-minimum-input-length="0" data-placeholder="Select one or more recipients" id="id_recipients" name="recipients">
<optgroup label="Groups">
<option value="group_6">Group 6</option>
<option value="group_2">Group 2</option>
<option value="group_8">Group 8</option>
</optgroup>
</select>
</form>
I thought I'd be able to use JS like on the Example page, with the below, but the function is never called.
$(".select2multiplewidget").select2({
templateResult: formatState
});
First time creating a webapp in django. please bear with me.
So I have this code in my html:
<h1><font color="Orange" face="Borda">{{ template_title }}</h1>
<form method='POST' action=''>{% csrf_token %}
<font color="Orange" face="Borda" style="background-color: transparent;">{{ form }}</font>>
<input type='submit' value='SUBMIT'>
</form>
now inside {{ form }} is all the views and forms. now what I want to do is to specifically call it individually (with style).
for example if I have:
email=CharField()
username=CharField()
and I wanted to call them in my html as:
<label class="sr-only" for="r-form-first-name">**EMAIL/USERNAME**</label>
<input type="text" name="r-form-first-name" placeholder="First name..." class="r-form-first-name form-control" id="r-form-first-name">
How do I do that? I already have a bootstrap template prepared for my login but other documentation suggest I use crispy forms, which I dont want to. Please tell me how if there is other ways of calling it.
Since it's your first time building a django app, i suggest you take your time building it, try reading relative doc pages for the parts you're working with.
Here's an example from the docs (tailored for your case):
<div class="fieldWrapper">
{{ form.username.errors }}
<label for="{{ form.username.id_for_label }}">Your message:</label>
{{ form.username }}
</div>
https://docs.djangoproject.com/en/1.10/topics/forms/#rendering-fields-manually