Changes between Initial Version and Version 1 of DeveloperGuidelines/Popup


Ignore:
Timestamp:
03/02/09 23:27:44 (14 years ago)
Author:
Fran Boon
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • DeveloperGuidelines/Popup

    v1 v1  
     1== Popups for Form reference data ==
     2When 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?)
     7
     8We 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).
     9
     10Model should include a comment like this:
     11{{{
     12db.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.")))
     13}}}
     14
     15We 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}}}
     24This triggers the popup defined in the same file:
     25{{{
     26var popupWin = null;
     27function openPopup(url) {
     28        if ( !popupWin || popupWin.closed ) {
     29                popupWin = window.open( url, "popupWin", "width=640,height=480" );
     30        } else popupWin.focus();
     31}
     32}}}
     33There is a special format=popup added to the RESTlike CRUD controller in {{{__db.py}}}:
     34{{{
     35elif 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}}}
     40This 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}}}
     83----
     84DeveloperGuidelines