19/11/13

jquery ajax / django - present form in a bootstrap modal and re-show if validation was not successfull - Stack Overflow

Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

Tell me more

jquery ajax / django - present form in a bootstrap modal and re-show if validation was not successfull

my use case is: a) Present a form loaded via ajax in a bootstrap modal, the fancy overlay effect stuff.. . I followed these instructions. This works fine. (see code below) b) Submit this form back to my Django app, try to validate it, and if it does not validate, re-show the form with the errors in the fancy bootstrap modal. I can reload the form via ajax, but I m not able to represent it again in the modal. Note: I did not include the view since it does nothing special. Only instantiating and validating the form. Quite a lot to read below, so just continue if you think the use case sounds interesting... My taskList.html looks like this:

< t a b l ei d = " l i s t I t e m T a b l e "c l a s s = " t a b l et a b l e b o r d e r e d " > < t h e a d > < t r > < t h > N a m e < / t h > < t h > E d i t < / t h > < / t r > < / t h e a d > < t b o d y > < t r > < t d > T a s k1 < / t d > < t d > < ac l a s s = " e d i t I t e m "h r e f = " / u p d a t e / i t e m / 1 / " > e d i t < / a > < / t d > < / t r > < / t b o d y > < / t a b l e > < d i vc l a s s = " m o d a lh i d e "i d = " i t e m F o r m M o d a l " > < / d i v > < d i vi d = " m o d a l E x t r a J s P l a c e h o l d e r " > < / d i v > .js for loading the form + showing the bootstrap modal + binding form to a .jquery submit call:

stackoverflow.com/questions/11944887/jquery-ajax-django-present-form-in-a-bootstrap-modal-and-re-show-if-validati

1/6

19/11/13

jquery ajax / django - present form in a bootstrap modal and re-show if validation was not successfull - Stack Overflow

$ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ){ m o d a l C o n n e c t ( ) ; } ) ; < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > / / c o n n e c t st h em o d a ll o a df o re a c h< a >w i t hc l a s se d i t I t e m / / F u n c t i o n a l i t y1 / / l o a d sa ni t e me d i tf o r mf r o mt h es e r v e ra n dr e p l a c e st h ei t e m F o r m M o d a lw i t ht h ef o r m / / p r e s e n t st h em o d a lw i t h$ ( " # i t e m F o r m M o d a l " ) . m o d a l ( ' s h o w ' ) ; / / F u n c t i o n a l i t y2 / / l o a d ss o m ee x t r aj s" m o d a l E x t r a J s H t m l " / / c a l l st h ef u n c t i o n" s u b m i t I t e m M o d a l F o r m B i n d "w h i c hh a sb e e nl o a d e dv i a" m o d a l E x t r a J s H t m l " f u n c t i o nm o d a l C o n n e c t ( ) { $ ( " . e d i t I t e m " ) . c l i c k ( f u n c t i o n ( e v ){/ /f o re a c he d i ti t e m< a > e v . p r e v e n t D e f a u l t ( ) ;/ /p r e v e n tn a v i g a t i o n u r l=( $ ( t h i s ) [ 0 ] . h r e f ) ;/ / g e tt h eh r e ff r o m< a > $ . g e t ( u r l ,f u n c t i o n ( r e s u l t s ) { v a ri t e m F o r m=$ ( " # a j a x _ f o r m _ m o d a l _ r e s u l t " ,r e s u l t s ) ; v a rm o d a l E x t r a J s=$ ( " # m o d a l E x t r a J s " ,r e s u l t s ) ; / / g e tt h eh t m lc o n t e n t v a rm o d a l E x t r a J s H t m l=m o d a l E x t r a J s . h t m l ( ) ; / / u p d a t et h ed o mw i t ht h er e c e i v e dr e s u l t s $ ( ' # i t e m F o r m M o d a l ' ) . h t m l ( i t e m F o r m ) ; $ ( ' # m o d a l E x t r a J s P l a c e h o l d e r ' ) . h t m l ( m o d a l E x t r a J s H t m l ) ; $ ( " # i t e m F o r m M o d a l " ) . m o d a l ( ' s h o w ' ) ; s u b m i t I t e m M o d a l F o r m B i n d ( ) ;/ / b i n dl o a d e df o r mt oa j a xc a l l } ," h t m l " ) ; r e t u r nf a l s e ;/ /p r e v e n tt h ec l i c kp r o p a g a t i o n } ) } < / s c r i p t > The itemForm returned from the view looks like this:

stackoverflow.com/questions/11944887/jquery-ajax-django-present-form-in-a-bootstrap-modal-and-re-show-if-validati

2/6

19/11/13

jquery ajax / django - present form in a bootstrap modal and re-show if validation was not successfull - Stack Overflow

< f o r mi d = " # a j a x _ f o r m _ m o d a l _ r e s u l t "c l a s s = " w e l l "m e t h o d = " p o s t "a c t i o n = " / u p d a t e / i t e m / { {i t e m . i d} } " > < d i vi d = " a j a x _ f o r m _ m o d a l _ r e s u l t _ d i v " > < d i vc l a s s = " m o d a l h e a d e r " > < b u t t o nt y p e = " b u t t o n "c l a s s = " c l o s e "d a t a d i s m i s s = " m o d a l " > < / b u t t o n > < h 3 > E d i tI t e m < / h 3 > < / d i v > < d i vc l a s s = " m o d a l b o d y " > { %c s r f _ t o k e n% } { { f o r m . a s _ p } } < / d i v > < d i vc l a s s = " m o d a l f o o t e r " > < i n p u tc l a s s = " b t nb t n p r i m a r y "t y p e = " s u b m i t "v a l u e = " S a v e "/ > < i n p u tn a m e = " c a n c e l "c l a s s = " b t n "t y p e = " s u b m i t "v a l u e = " C a n c e l " / > < / d i v > < / d i v > < / f o r m > Loading and showing the modal works fine. But now comes the second part which does not work as expected. The issue is the following. If the form does not validates, the view returns the form. The returned form should be shown again in the bootstrap modal. But the result is that ONLY the form is presented in the browser, everything else is lost. No css, no table, only the form. Quite ugly.. Thus I did not achieve to update the ajax_form_modal_result_div. Can anyone help me out here what I m doing wrong..!? The view returns also the js function 'submitItemModalFormBind' which prevents the form default behavior and sends the form via ajax.

< d i vi d = " m o d a l E x t r a J s " > / / a j a xb i n df o ru p d a t ei t e mf o r mv i s u a l i z e dv i am o d a l f u n c t i o ns u b m i t I t e m M o d a l F o r m B i n d ( ) { v a ru r l=" { %u r lu p d a t e I t e mi t e m . p k% } " ; $ ( ' # a j a x _ f o r m _ m o d a l _ r e s u l t ' ) . s u b m i t ( f u n c t i o n ( ) { $ . a j a x ( { t y p e :" P O S T " , u r l :" { %u r lu p d a t e T a s ki t e m . p k% } " , d a t a :$ ( t h i s ) . s e r i a l i z e ( ) , s u c c e s s : f u n c t i o n ( r e s p o n s e ) { v a rd i v=$ ( " a j a x _ f o r m _ m o d a l _ r e s u l t _ d i v " ,r e s p o n s e ) ; $ ( ' # a j a x _ f o r m _ m o d a l _ r e s u l t _ d i v ' ) . h t m l ( d i v ) ; } , stackoverflow.com/questions/11944887/jquery-ajax-django-present-form-in-a-bootstrap-modal-and-re-show-if-validati

3/6

19/11/13

jquery ajax / django - present form in a bootstrap modal and re-show if validation was not successfull - Stack Overflow
} , e r r o r :f u n c t i o n( r e q u e s t ,s t a t u s ,e r r o r ){ c o n s o l e . l o g ( " f a i l u r e " ) ; c o n s o l e . l o g ( r e q u e s t . r e s p o n s e T e x t ) ; } } ) ; } ) ; r e t u r nf a l s e ; } < / d i v > Would appreciate any help!
jquery django jquery-ajax twitter-bootstrap

edited Aug 15 '12 at 1:49 merv 11.6k 4 32 68

asked Aug 14 '12 at 2:15 Thomas Kremmel 3,182 1 31 70

1 Answer
Found a working approach (based upon this solution - and enhanced it with handling of invalid forms) and will post it for anybody who also want to use the stunning beautiful bootstrap modals with django. Major issue with the code above was that I did not correctly disabled the default behavior of the submit button and the approach for loading additional js was not a good idea. So I changed my strategy. On documentReady or ajaxStop event bind the click event of the hyperlinks to the modalConnect function. Note that you only need the ajaxStop function if you have some kind of ajax which updates the content of your table (which I have):

< s c r i p tt y p e = " t e x t / j a v a s c r i p t " > $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ){ m o d a l C o n n e c t ( ) ; } ) ; < / s c r i p t > < s c r i p tt y p e = " t e x t / j a v a s c r i p t " > $ (d o c u m e n t) . a j a x S t o p (f u n c t i o n ( ){ m o d a l C o n n e c t ( ) ; } ) ; < / s c r i p t > The modalConnect function which loads the form which we want to present in the modal and a formUpdateURLDiv:

< s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o nm o d a l C o n n e c t ( ) { / / u n b i n dt h ec l i c ke v e n t .I fn o td o n ew ew i l le n du pw i t hm u l t i p l ec l i c ke v e n tb i n d i n g s ,s i n c eb i n d i n gi sd o n $ ( " . e d i t I t e m " ) . u n b i n d ( ' c l i c k ' ) ; / / b i n dt h ec l i c ke v e n t $ ( " . e d i t I t e m " ) . c l i c k ( f u n c t i o n ( e v ){/ /f o re a c he d i ti t e m< a > e v . p r e v e n t D e f a u l t ( ) ;/ /p r e v e n tn a v i g a t i o n v a ru r l=t h i s . h r e f ;/ / g e tt h eh r e ff r o mt h e< a >e l e m e n t $ . g e t ( u r l ,f u n c t i o n ( r e s u l t s ) { / / g e tt h ef o r m v a ri t e m F o r m=$ ( " # a j a x _ f o r m _ m o d a l _ r e s u l t " ,r e s u l t s ) ; / / g e tt h eu p d a t eU R L v a rf o r m U p d a t e U R L D i v=$ ( " # f o r m U p d a t e U R L " ,r e s u l t s ) ; / / g e tt h ei n n e rh t m lo ft h ed i v v a rf o r m U p d a t e U R L=f o r m U p d a t e U R L D i v . h t m l ( ) ; / / u p d a t et h ed o mw i t ht h er e c e i v e df o r m $ ( ' # i t e m F o r m M o d a l ' ) . h t m l ( i t e m F o r m ) ; / / s h o wt h eb o o t s t r a pm o d a l stackoverflow.com/questions/11944887/jquery-ajax-django-present-form-in-a-bootstrap-modal-and-re-show-if-validati 4/6

19/11/13

jquery ajax / django - present form in a bootstrap modal and re-show if validation was not successfull - Stack Overflow / / s h o wt h eb o o t s t r a pm o d a l $ ( " # i t e m F o r m M o d a l " ) . m o d a l ( ' s h o w ' ) ; $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n( ){ / / b i n dt h ef o r mt oa na j a xc a l l .a j a xc a l lw i l lb es e tt ot h er e c e i v e du p d a t eu r l s u b m i t I t e m M o d a l F o r m B i n d ( f o r m U p d a t e U R L ) ; } ) ; } ," h t m l " ) ; r e t u r nf a l s e ;/ /p r e v e n tt h ec l i c kp r o p a g a t i o n } )
} < / s c r i p t > the formUpdateURL includes a server generated (see included view below) url to which the loaded form has to make its form submission call. We use this url to "init" the submitItemModalFormBind function:

< s c r i p tt y p e = " t e x t / j a v a s c r i p t " > f u n c t i o ns u b m i t I t e m M o d a l F o r m B i n d ( u r l ) { / / b i n dt h ef o r m .p r e v e n td e f a u l tb e h a v i o ra n ds u b m i tf o r mv i aa j a xi n s t e a d $ ( ' # a j a x _ f o r m _ m o d a l _ r e s u l t ' ) . s u b m i t ( f u n c t i o n ( e v ) { $ . a j a x ( { t y p e :" P O S T " , u r l :u r l , d a t a :$ ( t h i s ) . s e r i a l i z e ( ) , s u c c e s s : f u n c t i o n ( r e s p o n s e ,t e x t S t a t u s ,j q X H R ) { v a rf o r m=$ ( " # a j a x _ f o r m _ m o d a l _ r e s u l t _ d i v " ,r e s p o n s e ) ; / / f o r mi sr e t u r n e di fi ti sn o tv a l i d .u p d a t em o d a lw i t hr e t u r n e df o r m / / c h a n g et h i s" i f "t oc h e c kf o ras p e c i f i cr e t u r nc o d ew h i c hs h o u l db es e ti nt h ev i e w i f( f o r m . h t m l ( ) ){ c o n s o l e . l o g ( ' F o r mw a si n v a l i da n dw a sr e t u r n e d ' ) ; / / u p d a t em o d a ld i v $ ( ' # a j a x _ f o r m _ m o d a l _ r e s u l t _ d i v ' ) . h t m l ( f o r m ) ; $ ( " # i t e m F o r m M o d a l " ) . m o d a l ( ' s h o w ' ) ; } / / f o r mi sn o tr e t u r n e di ff o r ms u b m i s s i o ns u c c e e d e d e l s e { / / u p d a t et h ee n t i r ed o c u m e n tw i t ht h er e s p o n s er e c e i v e ds i n c ew er e c e i v e dae n t i r es u c c e s sp a g ea d o c u m e n t . o p e n ( ) ; d o c u m e n t . w r i t e ( r e s p o n s e ) ; d o c u m e n t . c l o s e ( ) ; / / s o r tb ym o d i f i e dd a t ed e s c e n d i n g / / v a rn o t i f i c a t i o n D i v=$ ( " # n o t i f i c a t i o n " ,r e s p o n s e ) ; / / $ ( ' # n o t i f i c a t i o n ' ) . h t m l ( n o t i f i c a t i o n D i v . h t m l ( ) ) ; c o n s o l e . l o g ( ' F o r mw a sv a l i da n dw a sn o tr e t u r n e d ' ) ; $ ( " # i t e m F o r m M o d a l " ) . m o d a l ( ' h i d e ' ) ; } } , e r r o r :f u n c t i o n( r e q u e s t ,s t a t u s ,e r r o r ){ v a rd i v=$ ( " a j a x _ f o r m _ m o d a l _ r e s u l t _ d i v " ,r e q u e s t . r e s p o n s e T e x t ) ; $ ( ' # a j a x _ f o r m _ m o d a l _ r e s u l t _ d i v ' ) . h t m l ( d i v ) ; ..and to see what is going on at the server see below the view which handles the logic: / / i m p l e m e n tp r o p e re r r o rh a n d l i n g c o n s o l e . l o g ( " f a i l u r e " ) ; c o n s o l e . l o g ( r e q u e s t . r e s p o n s e T e x t ) ; } } ) ; r e t u r nf a l s e ; } ) ; } < / s c r i p t >

c l a s sU p d a t e T a s k M o d a l V i e w ( L o g i n R e q u i r e d M i x i n ,V i e w ) : t e m p l a t e=' l i s t _ m a n a g e m e n t / c r u d / i t e m / u p d a t e _ v i a _ m o d a l . h t m l ' d e fg e t _ l o g i c ( s e l f ,r e q u e s t ,t a s k _ i d ,* * k w a r g s ) : stackoverflow.com/questions/11944887/jquery-ajax-django-present-form-in-a-bootstrap-modal-and-re-show-if-validati

5/6

19/11/13

jquery ajax / django - present form in a bootstrap modal and re-show if validation was not successfull - Stack Overflow d e fg e t _ l o g i c ( s e l f ,r e q u e s t ,t a s k _ i d ,* * k w a r g s ) : t a s k=g e t _ o b j e c t _ o r _ 4 0 4 ( T a s k . o b j e c t s ,p k = t a s k _ i d ) t a s k _ f o r m=T a s k F o r m ( i n s t a n c e = t a s k ) c o n t e x t={ ' m o d e l _ f o r m ' :t a s k _ f o r m , ' i t e m ' :t a s k , } r e t u r nc o n t e x t
d e fp o s t _ l o g i c ( s e l f ,r e q u e s t ,t a s k _ i d ,* * k w a r g s ) : t a s k=g e t _ o b j e c t _ o r _ 4 0 4 ( T a s k . o b j e c t s ,p k = t a s k _ i d ) t a s k _ f o r m=T a s k F o r m ( r e q u e s t . P O S T ,i n s t a n c e = t a s k ) i ft a s k _ f o r m . i s _ v a l i d ( ) : t a s k=t a s k _ f o r m . s a v e ( c o m m i t = F a l s e ) t a s k . m o d i f i e d _ b y=r e q u e s t . u s e r t a s k . s a v e ( ) m e s s a g e s . a d d _ m e s s a g e ( r e q u e s t ,m e s s a g e s . I N F O ,' I t e m" % s "s u c c e s s f u l l yu p d a t e d '%( t a s k . n a m e ) ) r e t u r n( ' r e d i r e c t ' ,H t t p R e s p o n s e R e d i r e c t ( r e v e r s e ( ' s h o w _ l i s t _ a f t e r _ i t e m _ u p d a t e ' ,k w a r g s = { ' l i s t _ i d ' : t a s k . l i s t c o n t e x t={ ' m o d e l _ f o r m ':t a s k _ f o r m , ' l i s t ' :t a s k . l i s t , ' i t e m ' :t a s k , } r e t u r n( ' c o n t e x t ' ,c o n t e x t ) d e fg e t ( s e l f ,r e q u e s t ,t a s k _ i d ,* * k w a r g s ) : c o n t e x t=s e l f . g e t _ l o g i c ( r e q u e s t ,t a s k _ i d ,* * k w a r g s ) r e t u r nr e n d e r _ t o _ r e s p o n s e ( s e l f . t e m p l a t e , c o n t e x t , c o n t e x t _ i n s t a n c e=R e q u e s t C o n t e x t ( r e q u e s t ) , ) template is already included in my question: ajax_form_modal_result_div, you only have to ..the form provide also the formUpdateURL. I did it via the template, which seems quite odd now that I write this d e fcould p o s t ( s e l f ,r e q u e s t , t a s k _ i d , context. * * k w a r g s ) : post. be easily provided via the view p o s t _ l o g i c _ r e t u r n=s e l f . p o s t _ l o g i c ( r e q u e s t ,t a s k _ i d ,* * k w a r g s ) Voila -i Django fp o s t _ Forms l o g i c with _ r e t Bootstrap u r n [ 0 ]= Modals! =' r e d Spice i r e c t up ' : your UI! r e t u r np o s t _ l o g i c _ r e t u r n [ 1 ] I hopei this helps somebody to solve similar problem. fp o s t _ l o g i c _ r e t u r n [ 0 ]a = = ' c o n t e x t ' : c o n t e x t=p o s t _ l o g i c _ r e t u r n [ 1 ] edited Aug 15 '12 at 21:21 answered Aug 15 '12 at 15:54 r e t u r nr e n d e r _ t o _ r e s p o n s e ( Thomas Kremmel s e l f . t e m p l a t e , 3,182 1 31 70 c o n t e x t , c o n t e x t _ i n s t a n c e=R e q u e s t C o n t e x t ( r e q u e s t ) , )

Not the answer you're looking for? Browse other questions tagged jquery django
jquery-ajax twitter-bootstrap or ask your own question.

stackoverflow.com/questions/11944887/jquery-ajax-django-present-form-in-a-bootstrap-modal-and-re-show-if-validati

6/6