django,twitter-bootstrap,bootstrap-modal , Django: form validation errors are not being displayed when form is in a modal


Django: form validation errors are not being displayed when form is in a modal

Question:

Tag: django,twitter-bootstrap,bootstrap-modal

I am trying to make a Django web app that will be able to add and display certain information in a database (the Agent model seen below) I have a form in a twitter bootstrap modal. When I enter valid data and submit, everything works as expected and the modal redirects to the view page. However, when I enter invalid information, instead of redisplaying the modal with the validation errors displayed, it redirects to an empty page. I have the view printing out the validation errors and everything is there, it just isn't showing on the page. When I remove the modal class from the template (so it displays on the page instead of in a modal), the error information is displayed. How do I get it to display in the modal?

View:

class AgentAddView(CreateView):
    model = Agent
    template_name = "agent_form.html"
    success_url = '/ui/all_agents'
    form_class = NewAgentForm

    def form_valid(self, form):
        form.save()
        print('hererererer')
        return redirect('/ui/all_agents')

    def form_invalid(self, form):
        return self.render_to_response(self.get_context_data())

Form:

class NewAgentForm(forms.ModelForm):
    class Meta:
        model = Agent
        fields = ['hostname', 'ip_address', 'domain', 'username', 'password', 'password', 'encrypted']

    hostname = forms.CharField(required=True, widget=forms.TextInput(attrs={'placeholder': 'Hostname'}))
    ip_address = forms.GenericIPAddressField(required=True, widget=forms.TextInput(
    attrs={'placeholder': 'IP Address'}), label="IP Address")
    domain = forms.CharField(required=False, widget=forms.TextInput(attrs={'placeholder': 'Domain'}))
    username = forms.CharField(required=False, widget=forms.TextInput(attrs={'placeholder': 'Username'}))
    password = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Password'}), required=False)
    confirm_password = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Confirm Password'}), required=False)
    is_encrypted = forms.BooleanField(required=False)

Template:

{% extends 'base_page.html' %}
{% block content %}
<div class="modal fade" id="add-agent-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>Add Agent</h3>
            </div>
            <form method="post" action="{% url 'add_agent' %}">
                <div class="modal-body">
                    {% csrf_token %}
                    {{ form.as_p }}
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success" >Add</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

Answer:

You need to write some javascript to sense whether the form has been submitted and found invalid, and if so display the modal.

You can set a javascript global variable in your template based on the error state:

<script>
    document.formHasErrors = {% if form.errors %}true{% else %}false{% endif %};
</script>

Then you can use javascript to tell the modal to open.

<script>
    $( document ).ready(function() {
       if (document.formHasErrors) {
           $('#add-agent-modal').modal('toggle');
       }
    });
</script>

It's not particularly beautiful, but it should be effective.


Related:


DRF Update Existing Objects


django,django-rest-framework
I'm new to DRF and python so go easy on me... I can successfully get the RoadSegment objects, but I cannot figure out how to update an existing object I have the following model: class RoadSegment(models.Model): location = models.CharField(max_length=100) entryline = models.CharField(unique=True, max_length=100) trafficstate = models.CharField(max_length=100) With the following serializer:...

Django: html without CSS and the right text


python,html,css,django,url
First of all, this website that I'm trying to build is my first, so take it easy. Thanks. Anyway, I have my home page, home.html, that extends from base.html, and joke.html, that also extends base.html. The home page works just fine, but not the joke page. Here are some parts...

Calling AngularJS function from a remote page loaded by Bootstrap modal


javascript,angularjs,twitter-bootstrap
I use Bootstrap 3 modal component to load a remote form, in which I define an Angular controller and several functions. But the browser said "Tried to Load Angular More Than Once". Main page: (omitted: ng-app="manageAppCollections", ng-controller="manageAppController") <button type="button" class="btn btn-success" ng-href="./appConfForm" data-toggle="modal" data-target="#saveModal">Add an App</button> <div id="saveModal" class="modal inmodal...

How to prevent bootstrap from making font bold?


javascript,jquery,html,css,twitter-bootstrap
Without including the bootstrap link in this simple example, the following code performs as expected: Hovering over any word turns the word red, and hovering away returns it to black. With the bootstrap link included, the change from red/black still works fine, but for some reason, the font becomes bold...

How can I resolve my variable's unexpected output?


django,python-2.7
I have a variable in django named optional_message. If I debug the variable then it says Swenskt but when I try to print the variable on my page the following comes out: (u'Swenskt',) and the variable can't be tested for its length etc. What should I do if I only...

Django: Handling several page parameters


python,django,list,parameters,httprequest
I have several possible parameter to process in a page. Assume x0, x1, x2,..., x1000. It seems awkward to get and process them one by one by request.GET.get('x0'), request.GET.get('x1'), ... Any idea to put them in a list, so that they can be processed in a loop....

How can i hook into django migrations for django 1.8


python,django,migration
I am using django 1.8. Now i need to add some custom fields based permisions so i have created a YML file from python models like this description: permissions: ['ADMIN'] award: permissions: ['USER'] Its working fine but my issue if some chnages the field names or reomves some field then...

How to fit the title to the entire page


html,css,twitter-bootstrap
I'm trying to fit this title to the entire page. For some reason, there is a padding around the text that's not allowing me to fit it. I set the padding of the column (Bootstrap) to 0, but that doesn't seem to help. As soon as I increase the font-size...

Bootstrap 'form-group has-error' not working with php codes [closed]


php,html,twitter-bootstrap
Inputs don't turn red and does not print the error messages when I'm submitting empty fields. How can I show the error messages and make the input boxes turn red when I'm sending empty fields with this code. <?php if ( !empty($_POST)) { require 'db.php'; // validation errors $fnameError =...

End to end alignment of 3 Columns using Bootstrap


twitter-bootstrap
I am new to bootstrap. I tried aligning three sections end to end (horizontal manner) with equal space. (1st column should be aligned to extreme left of the container and last should be aligned to extreme right.) There is extra space at the third column. I have added bootstrap css...

django and python manage.py runserver execution error


python,django,manage.py
When I execute python manage.py runserver command for my django_test projects I get following error: System check identified no issues (0 silenced). June 14, 2015 - 20:43:03 Django version 1.8.2, using settings 'django_test.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C. Traceback (most recent call last): File "manage.py",...

Django add an attribute class form in __init__.py


python,django,forms,django-forms
My form class from django import forms class Form(forms.Form): your_name = forms.CharField(label='Your name ', max_length=100) My app file __init__.py from django import forms from my_app.forms import Form from captcha.fields import ReCaptchaField def register(form): form.captcha=CaptchaField() register(Form) Code in __init__.py add an attribute captcha but it is not on the page. I...

Owl Carousel implementation


jquery,twitter-bootstrap,carousel,owl
I can't use the Owl Carousel 2 I would like to use. I think it has something to do witht the files I have connected to my html but there might be a another problem. Do I even have the right files? This is my HTML so far. I already...

AngularJS & Bootstrap Modal - loading template outside controller


angularjs,twitter-bootstrap,angular-bootstrap
I have a dialog which is being used in 3 scenarios within the same page. I have created a controller similar to the below: var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: size, resolve: { items: function () { return $scope.items; } } }); <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header">...

Display django runserver output from Vagrant guest VM in host Mac notifications?


python,django,osx,notifications,vagrant
I can think of many ways to skin this cat, and Googling hasn't shown an elegant solution either. Does anyone have an easy / elegant way to forward the output from Django's runserver command in a terminal connected to a guest Vagrant VM to the host to display to Mac's...

django 1.8 CreateView Error


python,django
I'm using django 1.8 to create a login form. But the template containing registration form does not render properly. my views.py class SignUpView(CreateView): RegistrationForm = UserCreationForm fields = ['username','password1','password2'] model = User template_name = 'accounts/signup.html' my forms.py from django.contrib.auth.forms import UserCreationForm from django.contrib.auth.forms import AuthenticationForm from crispy_forms.helper import FormHelper from...

Django block inclusion not working. What did I miss?


django,django-templates
In my base.html file I have this: {% block menu %}{% endblock menu %} and in base_menu.html I have this: {% extends "base.html" %} {% block menu %} <nav class="navbar navbar-inverse navbar-fixed-top"> ... stuff ... </div> {% endblock menu %} I would expect the menu html to show where the...

Django: show newlines from admin site?


python,html,django,newline,textfield
This is probably very simple. My database objects have a TextField. Now, when I add the contents of the TextFields to an html paragraph, there are no new lines. How can I make Django show those newlines? Thank you!

Border spacing between the columns


html,css,twitter-bootstrap
I have 3 columns in a row, each of which has the class col-xs-4 and so they cover up the entire row. Now I need to add border for each of these columns and I don't want them to overlap. Currently, am using border but there's no spacing between the...

sorl-thumbnail: Creating a thumbnail inside a for loop in a template


django,sorl-thumbnail
I am trying to create a thumbnail with the size of 100x100 px from an image. I am using a for loop, and the for loops works and the image is rendered but for some reason when I am trying to create a thumbnail it doesn't work. Here is my...

Upload to absolute path in Django


django
I am trying to get upload_to of FileField to be an absolute path rather than relative to MEDIA_ROOT. If I make the path absolute I get a 400 error on post of file. If no leading / it stores under MEDIA_ROOT. The uploaded document needs to be held securely and...

How to work with django-rest-framework in the templates


json,django,django-templates,django-rest-framework
Please bear with me. I am just learning django-rest-framework. And I really can't seem to grab it. model: class Day(models.Model): date = models.DateField(default=date.today) class ToDo(models.Model): date = models.ForeignKey(Day) name = models.CharField(max_length=100) very_important = models.BooleanField(default=False) finished = models.BooleanField(default=False) normal view: def home(request): days = Day.objects.all() return render(request, 'test.html', { 'days':days })...

Setting up the page grid using push and pull


html,twitter-bootstrap,css3,twitter-bootstrap-3
I'm using Bootstrap and I'm having issues setting up my grid. How do I use bootstrap's push/pull to setup my columns as below? This is what I've got so far, <div class="row"> <div class="col-xs-5 col-sm-3 col-md-3">A</div> <div class="col-xs-7 col-sm-9 col-md-2 .col-md-push-7">B</div> <div class="col-xs-12 col-sm-12 col-md-7 .col-md-pull-9">C</div> </div> ...

Modal from inside Bootstrap Tabs using Knockout foreach


jquery,twitter-bootstrap,knockout.js,twitter-bootstrap-3
I have Bootstrap tabs bound to a KnockoutJS observable array using a foreach binding, which is working fine. I now want to launch a Bootstrap modal from inside the active tab. <div class="tab-content"> <!-- ko foreach: trueData --> <div class="tab-pane fade in" data-bind="css:{active: $index() == 0}, attr :{'id': 'tab' +...

Using .update with nested Serializer to post Image


django,rest,django-models,django-rest-framework,imagefield
I have an ImageField. When I update it with the .update command, it does not properly save. It validates, returns a successful save, and says it is good. However, the image is never saved (I don't see it in my /media like I do my other pictures), and when it...

Bootstrap Modal popup not scrolling with keyboard


jquery,twitter-bootstrap
I'm using bootstrap modal, I added a scroll bar and it works fine with the mouse, but when I use the keyboard only the background page scrolls. What can I do to solve this. This is the css code that I'm using. .modal .modal-body { height: 520px; overflow-y: auto; }...

Content section overlap footer


html,css,twitter-bootstrap,css3,twitter-bootstrap-3
I have a a page as following that works fine in big screens but in small screens the mainsection overlap the footer. How can I have the footer always at the bottom of the page. Also in small screens the location of the footer should be based on content of...

Centering navbar pills vertically within the navbar using flexbox


html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

Bootstrap 3 DatePicker - How to reset selected date without resetting the picker configuration?


jquery,twitter-bootstrap,datepicker
I'm trying to reset the selected date on button click, but so far I'm only able to clear the input element, without the actual date on the picker. The following code resets everything, including the configuration and the date, so its obviously not what I need. $('#datepicker').datepicker('update',''); //resets everything To...

How can I fill the table? (Python, Django)


python,django
I faced with a problem: I have 4 lists with data. And I need to fill the table with this data. It is the example of table: So, as you already understood, at first column must be data from a first list, at second - second list, ... I tried...

Create angular page in Django to consume data from JSON


angularjs,django,django-templates
In an angular controller I have a list of items: app.controller('MainController', ['$scope', function($scope) { $scope.items = [ {"foo":"bar 1"}, {"foo":"bar 2"}, {"foo":"bar n"} ] }]); The following html page, based on angular, displays a list of item: <!DOCTYPE html> <html> <head> <title>list</title> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body data-ng-app="myApp"> <div data-ng-controller="MainController">...

Django listview clone selected record


django
From an existing LISTVIEW is there a simple way to create a new record based on existing previos record? 1) select the record 2) call the CREATEVIEW 3) set as initail the data from point 1) would this be possible and which is best? A) Get data from 1) by...

Show message when there's no excerpt - Django templates


python,django,django-templates,django-template-filters
I have this field on a Django template: <p class="border_dotted_bottom"> {{ expert.description|slice:":300" }} <a href="{% url 'profile' expert.username %}">{% trans "read more" %}</a>.... </p> If this object (user) has no 'decription' (a text field) it shows the word 'None', I need to get rid of that, maybe if he doesn't...

Django MySQLClient pip compile failure on Linux


python,linux,django,gcc,pip
Django documentation as of v1.8 recommends using mysqlclient connector for the framework. I'm attempting to pip install the package on Ubuntu 14.04 with Python 3.4 and running into a GCC error that I'm unable to find reference to. I'm not an expert on compiling software, so was hoping somebody can...

MvcSiteMapProvider - Enhanced bootstrap dropdown menu


c#,twitter-bootstrap,asp.net-mvc-5,mvcsitemapprovider,mvcsitemap
I'm trying to build a menu like this: For reference I'm using this library https://github.com/behigh/bootstrap_dropdowns_enhancement @Html.MvcSiteMap().Menu("BootstrapMenuHelperModel") @model MenuHelperModel <nav class="navbar" role="navigation"> <div class="container-fluid menu-container"> <div class="collapse navbar-collapse"> <div class="navbar-header"> <span class="navbar-brand">FAR BACKOFFICE</span> </div> <ul class="nav nav-pills"> @foreach (var node in Model.Nodes) { if...

change icon on collapse in Bootstrap 2.3 not in bootstrap 3


javascript,jquery,css,html5,twitter-bootstrap
I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...

Use django to expose python functions on the web


python,django
I have not worked with Django seriously and my only experience is the tutorials on their site. I am trying to write my own application now, and what I want is to have some sort of API. My idea is that I will later be able to use it with...

after puttin php syntax, my website get stuck at preloader


php,twitter-bootstrap,session
I have this code on my php file for navbar: <?php if(!$session->is_logged_in()) { echo ' <a href="login.php" role="button" aria-expanded="false"> Login <span class="label"> login to system</span> </a> </li>';} else { echo ' <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false"> ' . $session->user_name; . '<span class="badge bg-default">2</span> <span class="caret"></span> <span class="label">it is you</span> </a>';...

Bootstrap toggle doesn't display well when added dynamically


javascript,jquery,twitter-bootstrap
I'm trying to add bootstrap toggle switch dynamically but it does not display well after adding it. Thanks for your help! <input id="TheCheckBox" type="checkbox" data-off-text="Yes" data-on-text="No" checked="false" class="BSswitch"> <p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p> $('.btn').on('click', function () { $('p').after( '<input id="TheCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="BSswitch">' ); });...

Django template not found in main project directory error


python,django,templates
I am getting a 'template not found' error, although I've set up a correct template hierarchy (or so I thought) . ├── manage.py ├── twinja │   ├── admin.py │   ├── admin.pyc │   ├── __init__.py │   ├── __init__.pyc │   ├── migrations │   │   ├── __init__.py │   │   └── __init__.pyc │   ├──...

Callable in model field not called upon adding new object through Django admin


django,django-models,django-admin
In https://docs.djangoproject.com/en/1.8/ref/models/fields/#django.db.models.Field.default we read that the callable of a default field value is called, every time a new object is created. In my model I have: when_first_upload = models.DateTimeField(default=datetime.datetime.now()) When in the admin page I create a new object I always get the same datetime, as if the callable is...

Left and Right Carousel Controls not Working when Smooth Scroll for Anchor Tags Used


javascript,jquery,twitter-bootstrap,carousel
I am using the following script for smooth scroll effect for anchor tags: $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false;...

Django test RequestFactory vs Client


django,unit-testing,django-views,django-rest-framework,django-testing
I am trying to decide whether I should use Django's Client or RequestFactory to test my views. I am creating my server using DjangoRESTFramework and it's really simple, so far: class SimpleModelList(generics.ListCreateAPIView): """ Retrieve list of all route_areas or create a new one. """ queryset = SimpleModel.objects.all() serializer_class = SimpleModelSerializer...

Why is Django widgets for TimeInput not showing


django,django-forms,django-templates,django-views
I'm trying to create a TimeInput field in a form and noticed that the widget isn't showing correctly. But when I check the localhost:8000/admin, I see the widget showing up correctly. My code is as follows. For models.py, class TimeLimit(models.Model): before = models.TimeField(blank=True, default=time(7, 0)) # 7AM after = models.TimeField(blank=True,...

RequiredFieldValidator not working in my ASp site


c#,css,asp.net,twitter-bootstrap
I'm trying to learn some C# & asp, while creating a booking page in Visual Studio. I have faced a little problem with the RequiredFieldValidator, because when i click the button, nothing happens. I'm using the bootstrap css files to make in a little more shiny. Some code of the...

Is there a way to install django with pip to point to a specific version of python in virtualenv


python,django,pip,virtualenv
I have a system with CentOS installed. It currently runs python2.6, but python2.7 is also installed. I want to run django 1.7, which is also currently installed. If I run django outside of a virtualenv, it is using python2.6 by default. I didn't install it myself. What I assume is...

Django REST tutorial DEBUG=FALSE error


python,django,django-rest-framework
I'm trying to learn to use the django REST framework via the tutorial. I've gotten to the section "Testing our first attempt at a Web API". When I start the server, I get: System check identified no issues (0 silenced). June 15, 2015 - 00:34:49 Django version 1.8, using settings...

How to use template within Django template?


python,html,django,templates,django-1.4
I have the django template like below: <a href="https://example.com/url{{ mylist.0.id }}" target="_blank"><h1 class="title">{{ mylist.0.title }}</h1></a> <p> {{ mylist.0.text|truncatewords:50 }}<br> ... (the actual template is quite big) It should be used 10 times on the same page, but 'external' html elements are different: <div class="row"> <div class="col-md-12 col-lg-12 block block-color-1"> *django...

How to make background body overlay when use twitter-bootstrap popover?


html,css,twitter-bootstrap
Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

Bootstrap Grid on the screen


twitter-bootstrap
I am new to Bootstrap. I just created a sample web app using layoutit.com. When I do the preview on the website, the columns are aligned properly. I used md-2 and md-10, thereby dividing the screen into 2 layouts with 2 and 10. The first column with 2 grids, starts...