Is there an easy way to popup forms?

2,782 views
Skip to first unread message

frocco

unread,
Feb 13, 2013, 11:12:44 AM2/13/13
to django...@googlegroups.com
I have a form I want to popup and am having trouble getting this to work.
This is not in the admin page.

Can someone give me an example?

Thanks

Tom Evans

unread,
Feb 13, 2013, 11:41:59 AM2/13/13
to django...@googlegroups.com
An easy way to do a pop up form is to use a jqueryui dialog¹

http://api.jqueryui.com/dialog/

Cheers

Tom

¹ Other dialogs are available, consult your local google

frocco

unread,
Feb 13, 2013, 2:35:36 PM2/13/13
to django...@googlegroups.com, teva...@googlemail.com
Thanks Tom,

Do you know how I would have a form display using this?

jirka.v...@gmail.com

unread,
Feb 13, 2013, 2:48:15 PM2/13/13
to django...@googlegroups.com
Probably the easiest way is to use a JS/CSS framework that has a good support for popups and forms. There are a lot out there. I have personal experience with Bootstrap (one of the most popular these days) - check its documentation (look for both "popup" and "modal"), also search for available bootstrap plugins - plenty exist.

If you wanted to stick with jQuery, check out jQuery UI - a set of reusable components that might suit your needs.

HTH

Jirka

From: frocco <far...@gmail.com>
Date: Wed, 13 Feb 2013 11:35:36 -0800 (PST)
Subject: Re: Is there an easy way to popup forms?
--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Felipe Prenholato

unread,
Feb 14, 2013, 8:30:27 AM2/14/13
to django...@googlegroups.com
I use bootstrap modal with some jquery code.

jQuery code isnt hard, on Django side what you need is special treatment for ajax call so you can render template for form (and only form), so you can load it into modal.

Fortunately I wrote a AjaxUpdateView yesterday. It is in beta, but check at https://github.com/chronossc/django-cbv-utils/blob/4d992533925e4bc2e215cbfa8e98d07853d65784/cbv_utils/views.py#L152 ... you will see in form_valid and form_invalid methods that I render the form and return with JSON in response to ajax request.

Here is html files and jquery code used with this view: https://gist.github.com/chronossc/4952775 ... consider it a example :)



Felipe 'chronos' Prenholato.
Linux User nº 405489
Home page: http://devwithpassion.com | http://chronosbox.org/blog
GitHub: http://github.com/chronossc/ | Twitter: http://twitter.com/chronossc


frocco

unread,
Feb 14, 2013, 10:11:25 AM2/14/13
to django...@googlegroups.com
I tried to get this working, but I can only display one box.
How do I do this if I am displaying a list of products?

<button id="opener">open the dialog</button>
            <div id="dialog"{{ row.sku  }} title="Product Description">
                This is a test
            </div>
 <script>
                    $( "#dialog"{{ row.sku  }} ).dialog({ autoOpen: false });
                    $( "#opener" ).click(function() {
                        $( "#dialog"{{ row.sku  }} ).dialog( "open" );
                    });
                </script>
The above is not working

Felipe Prenholato

unread,
Feb 14, 2013, 11:41:05 AM2/14/13
to django...@googlegroups.com
You can't put {{ row.sku }} out of id. Try this:

<button id="opener">open the dialog</button>
<div id="dialog{{ row.sku  }}" title="Product Description">
    This is a test
</div>
 <script>
    $( "#dialog{{ row.sku  }}" ).dialog({ autoOpen: false });
    $( "#opener" ).click(function() {
        $( "#dialog{{ row.sku  }}" ).dialog( "open" );
    });
</script>

2013/2/14 frocco <far...@gmail.com>

<button id="opener">open the dialog</button>
            <div id="dialog"{{ row.sku  }} title="Product Description">
                This is a test
            </div>
 <script>
                    $( "#dialog"{{ row.sku  }} ).dialog({ autoOpen: false });
                    $( "#opener" ).click(function() {
                        $( "#dialog"{{ row.sku  }} ).dialog( "open" );
                    });
                </script>

frocco

unread,
Feb 14, 2013, 1:23:58 PM2/14/13
to django...@googlegroups.com
I get a popup for the first row only and it will not allow me to close the window.


On Wednesday, February 13, 2013 11:12:44 AM UTC-5, frocco wrote:

Kelly Nicholes

unread,
Feb 14, 2013, 5:05:10 PM2/14/13
to django...@googlegroups.com
I was looking for something like this for CBVs about a week ago!  I'm glad this guy posted this question more clearly than mine to get this response.  I might try this out!  Thanks.  This is a very common pattern, I've found, and wasn't sure why it wasn't included in django's core!

Felipe Prenholato

unread,
Feb 14, 2013, 9:02:30 PM2/14/13
to django...@googlegroups.com
This can't be included in Django core because does not have a really generic solution. AjaxViews like I posted can handle only POST or can also handle GET and POST, so instead of only reply form with errors also render initial form on GET. Also, is hard to define a standard for responses... I like JSON, someone may need WSDL, pure XML, etc. We maybe handle this kind of issue in some django-ajax-views package better than in core :)

Felipe 'chronos' Prenholato.
Linux User nº 405489
Home page: http://devwithpassion.com | http://chronosbox.org/blog
GitHub: http://github.com/chronossc/ | Twitter: http://twitter.com/chronossc


2013/2/14 Kelly Nicholes <kelbol...@gmail.com>
Reply all
Reply to author
Forward
0 new messages