Changes between Version 2 and Version 3 of DeveloperGuidelines/Popup


Ignore:
Timestamp:
08/13/10 12:11:39 (11 years ago)
Author:
Fran Boon
Comment:

Discuss use of 'child' var

Legend:

Unmodified
Added
Removed
Modified
  • DeveloperGuidelines/Popup

    v2 v3  
    11== Popups for Form reference data ==
    22When adding items, the opened window should be a popup, Submit should close that window & pre-populate the main form with the result.
    3 
    4 !ToDo:
    5  * Make work for nested popups (currently all share the name 'popupWin')
    6  * Don't lose existing populated fields in main form (Read into JS & re-populate?)
    73
    84We use Progressive Enhancement to allow non-Javascript browsers to access via a new tab (with manual refresh of parent window & then manual selection of new item).
     
    106Model should include a comment like this:
    117{{{
    12 db.table.field.comment = DIV(A(T('Add Contact'),_class='popup',_href=URL(r=request, c='pr', f='person', args='create', vars=dict(format='plain')), _target='top'), A(SPAN("[Help]"), _class="tooltip", _title=T("Contact|The Person to contact for this.")))
     8db.table.field.comment = A(T("Add Contact"), _class="colorbox", _href=URL(r=request, c="pr", f="person", args="create", vars=dict(format="popup")), _target="top"))
    139}}}
    1410
    15 We use jQuery to catch the click for the class=popup (in {{{static/scripts/S3.js}}}):
    16 {{{
    17 $('a.popup').click(function(){
    18     var url=$(this).attr('href');
    19     var caller=$(this).parents('tr').attr('id').replace(/__row/,'');
    20     openPopup(url.replace(/format=plain/,'format=popup')+'&caller='+caller);
    21     return false;
    22 });
    23 }}}
    24 This triggers the popup defined in the same file:
    25 {{{
    26 var popupWin = null;
    27 function openPopup(url) {
    28         if ( !popupWin || popupWin.closed ) {
    29                 popupWin = window.open( url, "popupWin", "width=640,height=480" );
    30         } else popupWin.focus();
    31 }
    32 }}}
    33 There is a special format=popup added to the RESTlike CRUD controller in {{{00_db.py}}}:
    34 {{{
    35 elif representation == "popup":
    36     form = crud.create(table, onvalidation=onvalidation)
    37     response.view = 'popup.html'
    38     return dict(module_name=module_name, form=form, module=module, resource=resource, main=main, caller=request.vars.caller)
    39 }}}
    40 This uses it's own view: {{{views/popup.html}}}:
    41 {{{
    42 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    43 <html xmlns="http://www.w3.org/1999/xhtml">
    44 <head>
    45 {{if session.s3.debug:}}
    46   {{include 'sahana_scripts_debug.html'}}
    47   {{include 'sahana_styles_debug.html'}}
    48 {{else:}}
    49   {{include 'sahana_scripts_min.html'}}
    50   <link href="/{{=request.application}}/static/styles/S3/sahana.min.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8" />
    51 {{pass}}
    52 <script type="text/javascript">
    53 $(function() {
    54     // bind form and provide a simple callback function
    55     $('form').ajaxForm(function() {
    56         // refresh lookup list in parent window
    57         // FIXME: How to get it to keep the rest of the form fields? (Read them in & re-populate?)
    58         self.opener.location.reload(true);
    59         // find which ID we need to make active
    60         {{field='%s_%s_%s' % (module,resource,main)}}
    61         value=$('input#{{=field}}').val();
    62         $.getJSON("{{=URL(r=request,c=module,f=resource,args=['search'],vars=dict(format='json',field=main,filter='='))}}"+"&value="+value,
    63         function(data){
    64             // set the caller's lookup list to the new ID
    65             self.opener.$('select#{{=caller}}').val(data[0].id);
    66             // close the popup
    67             self.close();
    68         });
    69     });
    70 });
    71 </script>
    72 </head>
    73 <body>
    74 <div id="popup" class="clearfix">
    75  {{include 'key.html'}}
    76  <div class='form-container'>
    77   {{=form}}
    78  </div>
    79 </div>
    80 </body>
    81 </html>
    82 }}}
     11We use jQuery to catch the click for the class=colorbox (in {{{static/scripts/S3/S3.js}}}).
     12
     13There is a special format=popup added to the CRUD controller in {{{01_crud.py}}}.
     14
     15This uses it's own view: {{{views/popup.html}}}, the intelligence for which is in {{{views/layout_popup.html}}}.
     16
     17Refresh of the calling dropdown is handled via the 'caller' var (which is added automatically).[[BR]]
     18This works automatically for reusable fields such as 'location_id', however if creating additional fields in your table with alternate names, then also need to pass a 'child' variable (in the vars dict in your .comment) which refers to the fieldname that needs refreshing.
    8319----
    8420DeveloperGuidelines