Issue
I have a DateInput() widget that appears fine in Chrome, but does not appear in Firefox or IE. I'm using Django 1.6.5 and the latest Chrome (Version 35.0.1916.153) and FireFox(30.0)
Works Correctly in Chrome (Calendar Selector appears)
Does not work correctly in Firefox or IE (Calendar Selector doesn't appear)
forms.py
class DateInput(forms.DateInput):
input_type = 'date'
class TimeForm(forms.ModelForm):
class Meta:
model = Time
fields = ['date_select']
widgets = {
'date_select': DateInput()
}
html
<form method='POST' action=''>{% csrf_token %}
{{ time_form.as_p }}
{{ program_form.as_p }} {# can ignore this part #}
<input type='submit' class="btn btn-lg btn-danger">
</form>
models.py
class Time(models.Model):
date_select = models.DateField()
def __unicode__(self):
return smart_unicode(self.date_select)
This is my first app since the Polls tutorial so let me know if there's more relevant code that I should post here. Thanks for your time.
EDIT AFTER ANSWERS AND COMMENTS
I wanted to include what I did in response to the great comments and answers. I went with the jQuery UI solution by using the code from http://jqueryui.com/datepicker/ To implement it into my project, I added:
html
<!-- Custom CS for JQuery UI -->
<link rel="stylesheet" href="/static/css/jquery-ui-1.10.4.min.css">
<!-- JQuery UI for things like Calendar Widget -->
<script src="/static/js/jquery-ui-1.10.4.min.js"></script>
<!-- Custom JS -->
<script src="/static/js/custom.js"></script>
custom.js
// For JQuery UI Calendar
$(function() {
$( "#id_date_select" ).datepicker();
});
forms.py
class TimeForm(forms.ModelForm):
class Meta:
model = Time
fields = ['date_select']
date_select = forms.DateField()
Django's default date widget is rendered as <input type="date"> in HTML. Chrome is the only major browser that has built in calendar for date input types. FF and IE read it as default text input.
The solution would be to create custom widget in django, that uses some javascript to generate the datepicker. This should point you to the right direction https://docs.djangoproject.com/en/1.6/ref/forms/widgets/#customizing-widget-instances. You could also use some library like jQueryUI(http://jqueryui.com/datepicker/) so you don't have to code it all by yourself.
Related
I'm pretty new in the Web development world, have been using Django so far.
I've been trying to figure out how to render data back to page after clicking on a submit button, so I see I'll need to use AJAX for that purpose.
I've created a very simple app just to understand the basics of AJAX.
However, googling, I couldn't really find a basic straight-forward implementation so I kinda got lost...
What I'm trying to achieve:
I have a model called Country:
class Country(models.Model):
name = models.CharField(primary_key=True, max_length=35)
continent = models.CharField(max_length=10)
capital = models.CharField(max_length=35)
currency = models.CharField(max_length=10)
And a super simple main page that asks the user to insert some country name.
The idea is to bring to the page all the info from the DB.
So it would look like this:
Main page HTML body:
<body>
<h2><em>Please type a country name:</em></h2><br><br>
<div class="container">
<form id="get_info" method="post">
{{ form }}
{% csrf_token %}
<input id="submit_button" type="submit" name="submit" value="Get info">
</form>
</div>
</body>
views.py:
from django.shortcuts import render
from country_trivia import forms
def main_page(request):
get_info_form = forms.GetInfo()
return render(request, 'country_trivia/index.html', {'form': get_info_form})
forms.py:
from django import forms
class GetInfo(forms.Form):
country_name = forms.CharField(label="")
I've seen some examples using forms, but I'm not even sure if it's needed, as I've seen some other examples that count on 'onclick' even listeners, then "grab" the text in the search field and pass it via AJAX...
How should I build my AJAX object for that simple purpose, and how should I integrate it?
Do I need to use forms at all?
I don't post anything to DB, just query it and print out data...
Thanks!!
I am working on a blog development in Django and there are different categories of posts or articles on category_list.html which have been created using ORM library and to each category i have added some articles using ORM library with the help of category slug which are rendered on category_view.html and problem is that list of categories are shown perfectly on category_list.html after adding from admin panel of django and when I click on any category name(contains get_absolute_url link), it takes me perfectly to category_view.html page but on category_view.html, data is shown in the form of text means renders the complete content of category_view.html in the form of plain text. All other templates are getting rendered by django perfectly but what is the reason that category_view.html is getting rendered as plain text? Please help me
def category_list(request,category_slug=None):
category=None
categories=CategoryList.objects.all()
# article=Article.objects.all()
return render(request,'category_list.html',{'categories':categories})
def category_view(request,category_slug):
category=get_object_or_404(CategoryList,slug=category_slug)
article=Article.objects.filter(category=category)
return render(request,'category_view.html',{'category':category},{'article':article})
My url.py contains the following urls:
path("",views.index),
path('category',views.category_list, name='category_list'),
path('<slug:category_slug>',views.category_view, name='story_by_category'),
This is link in category_list.html which takes me to category_view.html
<div class="row py-3">
{%for c in categories%}
<div class="col-lg col-12 homeimg" id="img1">
<h5>{{c.name}}</h5>
<img class="secimg border-info" src="{{c.image_url|default_if_none:'#'}}" alt="gameplay
videos">
</div>
{%endfor%}
</div>
I'm using django-webtest to automate functional tests for a Django application. One of my ModelForms has multiple submit buttons. The template, using django-crispy-forms, looks like this:
<form action="" method="post">
{% csrf_token %}
<p>
{{ person_form|crispy }}
<br><br>
{{ admin_form|crispy }}
</p>
<button id="SaveButton" type="submit" name="save_data" class="btn btn-lg btn-primary">Save</button>
<button id="VerifyButton" type="submit" name="verify_data" class="btn btn-lg btn-primary">Verify</button>
</form>
When I submit the form manually from the webpage by clicking on the Save button, the request.POST that is passed into the corresponding view method contains the 'save_data' tag that I use to decide what to do in the code.
However, when I create a django-webtest testcase to do the same, the 'save_data' tag is absent, even if I specify it in form.submit() as follows:
def test_schools_app_access_school_admin_record(self):
school_index = self.app.get(reverse('schools:school_index'),
user=self.school_admin)
assert self.school_name in school_index
school_page = school_index.click(self.school_name)
assert 'View School Administrator' in school_page
school_admin_page = school_page.click('View School Administrator')
person_form = school_admin_page.forms[1]
assert person_form['person-name'].value == self.school_admin_name
# TODO: Figure out how to pass name='save_data' while submitting
person_form['person-email'] = self.school_admin_email
response = person_form.submit(name='save_data', value='save')
# Verify that the field has been updated in the database
person = Person.objects.get(name=self.school_admin_name)
assert self.school_admin_email in person.email
How do I get django-webtest to include the name of the submit button in request.POST ?
Also, since I have multiple forms on the same page, I'm currently using response.forms[1] to select the form of interest. But I would like to use the form id instead. I couldn't locate in the Django documentation how to assign the form id (not field id) to a ModelForm. Could someone help me with this?
I'm using Django 1.7, django-webtest 1.7.8, WebTest 2.0.18 and django-crispy-forms 1.4.0.
I figured out that I'd made a typo in my code snippet because of which my code was not working.
In this fragment
person_form['person-email'] = self.school_admin_email
response = person_form.submit(name='save_data', value='save')
I should have value='Save' instead of 'save'.
With this corrected, the response does contain the name 'save_data'.
I have 2 django models:
class Image(models.Model):
name = models.CharField(max_length=100)
photo = models.ImageField(upload_to='upload/', blank=True)
class Preview(models.Model):
photo = models.ImageField(upload_to='preview', blank=True)
Then I create ImageForm with ModelForm and render it in the html template.
I want to do image preview in the page.
I use https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
<script src="/static/js/jquery.ui.widget.js"></script>
<script src="/static/js/jquery.iframe-transport.js"></script>
<script src="/static/js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#id_photo').fileupload({
dataType: 'json',
url: '{% url preview %}',
always: function (e, data) {
$('#preview').css({'visibility': 'visible'});
$('#preview').prepend('<img src=/static/'+data.result.url+' />')
}
});
});
</script>
<form method="POST" action="edit/" enctype="multipart/form-data">
<div class="field">
{{ form.photo.errors }}
<label for="id_photo">Photo:</label>
<input type="file" name="photo" id="id_photo" >
</div>
<div id="preview">
</div>
<input type="submit" name="Change">
So with the help of javascipt I send image to server, resize it (in preview view - it process PreviewForm), save on disk and return the url which is inserted into img tag. It works.
After I press Submit button I can't receive image file in my view (edit which process ImageForm) : request.FILES is empty !!!
When I disable "uploading image with js" 'edit-view works fine: request.FILES contain image, and i can save it..
what causes disappearance request.FILES in second POST request ?
The first thing you need to learn is HTTP is stateless protocol. Every request a client does to a server is unique and independent from the previous one.
In your situation, you submit your form with the image that you want to upload and it makes the upload so that you can see the image in request.FILES and display a preview for it.
However, once you make the upload and show a new page, of course request.POST will be empty because you did not uploaded anything, the file is already in your server, waiting to be approved.
The proper solution will be, when preparing the preview, create some hidden input fields which will help you to identify what photo you want to approve (unique ids are very good in this case, also don't expose file paths directly to your client unless you are the only one who's using the app).
Then in the second request, retrieve those hidden fields, locate the image and do what you are going to do; in your case, approve and make it public somehow.
If I have in forms.py:
birthdate = forms.DateTimeField()
and html:
<fieldset class='birthday-picker'>
<select class='birth-year' name='birth[year]'></select>
<select class='birth-month' name='birth[month]'></select>
<select class='birth-day' name='birth[day]'></select>
<input type='hidden' name='birthdate' />
</fieldset>
Do I need create a new widget or there is an answer for this? If there is no answer i will be grateful for every advice how to do this
There is a built in widget that already does that.
from django.forms import extras
class SomeForm(forms.ModelForm):
birthdate = forms.DateField(widget=extras.SelectDateWidget)
If the html doesn't have to be exactly like this, you might get away easier with a pure javascript solution like the jquery datepicker or use djangos own admin datewidget.
for version >= 1.9
from django import forms
class Some_Form(forms.Form):
birthday = forms.DateField(
widget=forms.SelectDateWidget
)
or
use jquery-ui
$(document).ready(function(){
$('.datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
})