Skip to main content

Field and widget can render bootstrap dialog window with content from django view

Project description


Latest PyPI version Travis CI Requirements Status

Field and widget can render bootstrap dialog with content from django view. You can create normal django View and load this view in dialog for form field.

  • Support:

    • Python: 2.7, 3.6

    • Django: 1.8, 1.9, 1.10, 1.11, 2.0, 2.1

    • django-crispy-forms

    • django-bootstrap3

  • Require:

    • Django

    • bootstrap3

    • JQuery

  • Recommended:

    • django-bootstrap3 or

    • django-crispy-forms

  • Locale:

    • EN - (english)

    • PL - (polish)

  • Tested on browsers:

    • OK - Google Chrome 70.0 - Fedora 28

    • OK - Firefox 62.0.3 - Fedora 28

    • OK - Firefox 50.1.0 - Ubuntu 14.04

    • OK - Firefox 31.1 - CentOS 6.4

    • OK - Chromium 53.0 - Ubuntu 14.04

    • OK - Microsoft Edge 38 - Windows 10

    • OK - Internet Explorer 11.0 - Windows 10

    • OK - Internet Explorer 10.0 - Windows 7

    • OK - Internet Explorer 9.0 - Windows 7

    • ER - Internet Explorer <= 8 (no support “html()” for data-popup-view-value)


  • Example: Form with several popup-view-fields

Form with django-popup-view-fields
  • Example: Dialog for select sex

Dialog for select sex
  • Example: Dialog for select color

Dialog for select color
  • Example: Dialog with form

Dialog with form

Run demo

  1. Clone or download repository:

    git clone
  2. Create virtualenv or not (red more:

  3. Install requirements for demo:

    cd django-popup-view-field/demo
    pip install -r requirements.txt
  4. Run developing web server:

    python runserver
  5. Run your browser and call url:



Install package - There are several solutions, choose your own

  1. Install using pypi repository:

    pip install django-popup-view-field
  2. Install using pip + github repository url:

    pip install git+
  3. Install using pip + zip archive:

    pip install
  4. Clone or download application to your django project directory:

    wget -O /tmp/
    unzip /tmp/ -d /tmp/
    cd my_project_dir
    cp -r /tmp/django-popup-view-field-master/django_popup_view_field/ ./

Add django_popup_view_field to your INSTALLED_APPS setting

    'bootstrap3',    # If you use django-bootstrap3
    'crispy_forms',  # If you user django-crispy-forms


Is recommended use django-bootstrap3 or django-crispy-forms to render forms and fields, but this is not necessary. You can still write django templates using pure CSS from bootstrap3. More information about bootstrap forms in here:

Add the django_popup_view_field urls to your root url patterns

urlpatterns = [
        include('django_popup_view_field.urls', namespace="django_popup_view_field")

The URL path can be whatever you want, but you must include ‘django_popup_view_field.urls’ with the ‘django_popup_view_field’ namespace. You may leave out the namespace in Django >= 1.9

In your base template, add django_popup_view_field_javascript tag

django_popup_view_field_javascript template tag load all required javascripts and template-scripts for application. Tag should be append before body close </body> tag and after jQuery and Bootstrap scripts.


<!DOCTYPE html>
{% load django_popup_view_field_tags %}

        <!-- Bootstrap CSS should be here -->

        <!-- jQuery script should be here -->
        <!-- Bootstrap javascripts should be here -->
        {% django_popup_view_field_javascript %}

Simple Example

Simple Example - screenshot

Create PopupView

Html content rendered by this view will be loaded into bootstrap dialog. Create your popup view same as normal django view.

Your popup view must be subclass of django.views.generic.View


    <li data-popup-view-value="red" style="background:red;"> red hat </li>
    <li data-popup-view-value="blue" style="background:blue;"> blue sky </li>
    <li data-popup-view-value="green" style="background:green;"> green planet </li>
    <li data-popup-view-value="pink" style="background:pink;"> pink car </li>

If user click on the element with the attribute data-popup-view-value, the value of this attribute will be set in form field and dialog will close.

If you want set content of element as value in form field, use html() for attribute:

<li data-popup-view-value="html()"> This text will be use :) </li>

from django.views.generic import TemplateView
from django_popup_view_field.registry import registry_popup_view

class ColorsPopupView(TemplateView):
    template_name = 'myapp/popups/colors.html'


Remember that you must register your popup view. After register you can run your popup view by call url:


In template you can get url to popup view using url tag:

{% url "django_popup_view_field:get_popup_view" 'ColorsPopupView' %}

After register you can unregister your popup view:


# or unregister by view name


You can also get popup view class by name:

view_class = registry_popup_view.get('ColorsPopupView')

Create Form with PopupViewField

from django import forms
from django_popup_view_field.fields import PopupViewField
from myapp.popups import ColorsPopupView

class ColorForm(forms.Form):

    color = PopupViewField(
        popup_dialog_title='What is your favorite color',
        attrs={'readonly': True},
        help_text='be honest'

class PopupViewField(view_class, popup_dialog_title, *args, **kwargs)

  • view_class - required - popup view class, view to render dialog content, must be subclass of django.views.generic.View

  • popup_dialog_title - not required - Title for dialog, default Popup Dialog: Select value

  • attrs - not required - provides attributes for Widget

  • args and kwargs are default for CharField

Create typical FormView

from django.views.generic import FormView
from myapp.forms import ColorForm
from django.http import HttpResponse

class ColorFormView(FormView):
    template_name = "myapp/color_form.html"
    form_class = ColorForm

    def form_valid(self, form):
        color = form.cleaned_data.get("color")
        return HttpResponse("Your color: {0}".format(color))

Template using django-crispy-forms


{% extends "base.html" %}
{% load crispy_forms_tags %}
{% crispy form %}

Template using django-bootstrap3


{% extends "base.html" %}
{% load bootstrap3 %}

<form action="." method="post" class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
    {% buttons %}
        <button type="submit" class="btn btn-primary">Submit</button>
    {% endbuttons %}

Template with pure bootstrap3 css (without django-bootstrap3 and crispy)


{% extends "base.html" %}
<form action="." method="post" class="form">
    <div class="form-group">
        <label class="control-label"> {{ form.color.label }} </label>
        {{ form.color }}
    <button type="submit" class="btn btn-primary">Submit</button>

callback_data attribute

If you want pass extra parameters to your popup view, you should use callback_data attribute for PopupViewField. This argument should be dictionary or OrderedDict. This dictionary containing yours parameters will be encoded to ASCII text string and added to url address. In your popup view You can take this parameters from request.GET.

from django.views.generic import View
from django_popup_view_field.registry import registry_popup_view

class FooPopupView(View):
    def get(self, request):
        print(request.GET['extra_param'])  # --> will be "Foo Bar"
        print(request.GET['my_pk'])        # --> will be 666


from django import forms
from django_popup_view_field.fields import PopupViewField

class FooForm(forms.Form):

    some_field = PopupViewField(
            'extra_param': 'Foo Bar',
            'my_pk': 666

Advanced Example

Advanced Example use django-bootstrap3. Dialog is interactive, all links and forms will be send via Ajax and response will be loaded in dialog.

Advanced Example - screenshot



<h4> Select the first letter of your name </h4>

{% for char in alphabet %}
    <div class="btn btn-xs btn-info" data-popup-view-value="html()">
        {{ char }}
    {% if forloop.counter|divisibleby:"13" and forloop.counter > 0 %}
    {% endif %}
{% endfor %}

{# Button to change order #}
<a class="btn btn-xs btn-primary" style="margin-top:20px;"
          href="{% url "django_popup_view_field:get_popup_view" 'AlphabetPopupView' %}?direction={{direction}}">
    Reverse order

from django.views.generic import TemplateView
from django_popup_view_field.registry import registry_popup_view
from string import ascii_uppercase

class AlphabetPopupView(TemplateView):
    template_name = 'myapp/popups/alphabet.html'
    direction = 1

    def get_context_data(self, **kwargs):
        self.direction = int(self.request.GET.get("direction") or self.direction)
        alphabet = ascii_uppercase[::self.direction]
        ctx = super(AlphabetPopupView, self).get_context_data(**kwargs)
        ctx['alphabet'] = alphabet
        ctx['direction'] = self.direction * -1
        return ctx


Form with PopupViewField

from django import forms
from django_popup_view_field.fields import PopupViewField
from myapp.popups import AlphabetPopupView

class AlphabetForm(forms.Form):

    char = PopupViewField(view_class=AlphabetPopupView, required=True)



{% extends "base.html" %}
{% load bootstrap3 %}

<form action="." method="post" class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
    {% buttons %}
        <button type="submit" class="btn btn-primary">Submit</button>
    {% endbuttons %}

from django.views.generic import FormView
from myapp.forms import AlphabetForm
from django.http import HttpResponse

class AlphabetFormView(FormView):
    template_name = "myapp/alphabet.html"
    form_class = AlphabetForm

    def form_valid(self, form):
        char = form.cleaned_data.get("char")
        return HttpResponse("First letter of your name : {0}".format(char))

PopupViewModelField Example

PopupViewModelField allows you to send model objects through the form inheriting from ModelForm.

PopupViewModelField Example - screenshot


from django.db import models

class Country(models.Model):
    code = models.CharField(max_length=2, primary_key=True)
    name = models.CharField(max_length=256)

class ExampleUser(models.Model):
    first_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30)
    country_code = models.ForeignKey(Country, on_delete=models.PROTECT)



    {% for country in countries %}
        <li style="cursor:pointer" data-popup-view-value="{{ country.code }}">
            <strong>{{ country.code }}</strong> - {{ }}
    {% endfor %}

data-popup-view-value attribute should return the primary key value of the model object.

class CountryPopupView(TemplateView):

template_name = "myapp/popups/country.html"
countries = None

def get(self, request, *args, **kwargs):
    self.countries = Country.objects.all()
    return super(CountryPopupView, self).get(request, *args, **kwargs)

def get_context_data(self, **kwargs):
    context = super(CountryPopupView, self).get_context_data(**kwargs)
    context['countries'] = self.countries
    return context


Form with PopupViewModelField

from django import forms
from django.forms import ModelForm
from .models import Country, ExampleUser
from django_popup_view_field.fields import PopupViewModelField

class CountryForm(ModelForm):

    country_code = PopupViewModelField(

    class Meta:
        model = ExampleUser
        fields = ('first_name', 'last_name', 'country_code')

PopupViewModelField must have an additional queryset argument in which we pass model objects.



{% extends "base.html" %}
{% load bootstrap3 %}

<form action="." method="post" class="form">
    {% csrf_token %}
    {% bootstrap_form form %}
    {% buttons %}
        <button type="submit" class="btn btn-primary">Submit</button>
    {% endbuttons %}

from django.views.generic import FormView
from myapp.forms import CountryForm
from django.contrib import messages

class CountryFormView(FormView):
    template_name = "myapp/country.html"
    form_class = CountryForm

    def form_valid(self, form):
        ret = super(CountryFormView, self).form_valid(form)
        country_code = form.cleaned_data.get("country_code")
            "Success in create example user with code of country: {0}".format(country_code)
        return ret


Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-popup-view-field-0.5.0.tar.gz (18.5 kB view hashes)

Uploaded Source

Built Distribution

django_popup_view_field-0.5.0-py2.py3-none-any.whl (24.7 kB view hashes)

Uploaded Python 2 Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page