add jQuery magic for input

- display fields depending on whether a DD email address is entered or
  not
- make automatically determined fields readonly
- don't hide fields with errors
This commit is contained in:
Jan Dittberner 2009-01-23 18:03:39 +01:00
parent 7208b390c5
commit b132be1f67
6 changed files with 176 additions and 13 deletions

View file

@ -1,7 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%doc>
Template for the data input form.
Base template for XHTML templates.
Copyright (c) 2009 Jan Dittberner <jan@dittberner.info>
This file is part of DDPortfolio service.

View file

@ -22,11 +22,17 @@ License along with this program. If not, see
<%def name="titleaddon()">
- ${_('Enter your personal information')}
</%def>
<%def name="extrahead()">${h.javascript_link('/javascript/jquery/jquery.js')}</%def>
<%def name="extrahead()">${h.javascript_link('/javascript/jquery/jquery.js',
h.url_for(controller='showformscripts',
action='index'))}</%def>
${h.form(h.url_for(action='urllist'), method='get')}
<fieldset id="ddportfolio">
<legend>${_('Debian Developer Portfolio')}</legend>
<div id="emailfield">
<div id="emailfield" \
% if 'email' in c.messages['errors']:
class="witherrors" \
% endif
>
<label for="email">${_('Email address:')}
% if 'email' in c.messages['errors']:
<br />
@ -35,7 +41,11 @@ ${h.form(h.url_for(action='urllist'), method='get')}
</label><br />
${h.text('email', request.params.get('email', None), id='email')}<br />
</div>
<div id="namefield">
<div id="namefield" \
% if 'name' in c.messages['errors']:
class="witherrors" \
% endif
>
<label for="name">${_('Name:')}
% if 'name' in c.messages['errors']:
<br />
@ -54,7 +64,11 @@ ${h.form(h.url_for(action='urllist'), method='get')}
${h.text('gpgfp', request.params.get('gpgfp', None),
id='gpgfp', readonly='readonly')}<br />
</div>
<div id="usernamefield">
<div id="usernamefield" \
% if 'username' in c.messages['errors']:
class="witherrors" \
% endif
>
<label for="username">${_('Debian user name:')}
% if 'username' in c.messages['errors']:
<br />
@ -64,7 +78,11 @@ ${h.form(h.url_for(action='urllist'), method='get')}
${h.text('username', request.params.get('username', None),
id='username')}<br />
</div>
<div id="nonddemailfield">
<div id="nonddemailfield" \
% if 'nonddemail' in c.messages['errors']:
class="witherrors" \
% endif
>
<label for="nonddemail">${_('Non DD email address:')}
% if 'nonddemail' in c.messages['errors']:
<br />
@ -74,7 +92,11 @@ ${h.form(h.url_for(action='urllist'), method='get')}
${h.text('nonddemail', request.params.get('nonddemail', None),
id='nonddemail')}<br />
</div>
<div id="aliothusernamefield">
<div id="aliothusernamefield" \
% if 'aliothusername' in c.messages['errors']:
class="witherrors"
% endif
>
<label for="aliothusername">${_('Alioth user name:')}
% if 'aliothusername' in c.messages['errors']:
<br />

View file

@ -0,0 +1,78 @@
## -*- coding: utf-8 -*-
<%doc>
Helper JavaScript for the data input form.
Copyright (c) 2009 Jan Dittberner <jan@dittberner.info>
This file is part of DDPortfolio service.
DDPortfolio service is free software: you can redistribute it and/or
modify it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
DDPortfolio service is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public
License along with this program. If not, see
<http://www.gnu.org/licenses/>.
</%doc>
function updateFields(data, textStatus) {
if (data.isdd == 1) {
$('#name').attr('value', data.name).attr('readonly', 'readonly');
$('#gpgfp').attr('value', data.gpgfp);
$('#username').attr('value', data.username).attr(
'readonly', 'readonly');
$('#nonddemail').attr('value', data.email).focus();
$('#aliothusername').attr('value', data.username);
$('#namefield').show();
$('#gpgfpfield').show();
$('#usernamefield').show();
$('#nonddemailfield').show();
$('#aliothusernamefield').show();
$('#nonddemail').focus().select();
} else {
$('#nonddemail').attr('value', data.email);
$('#name').removeAttr('readonly');
$('#username').removeAttr('readonly').attr('value', '');
$('#gpgfp').attr('value', '');
$('#usernamefield').hide();
$('#gpgfpfield').hide();
$('#nonddemailfield').hide();
$('#namefield').show();
$('#aliothusernamefield').show();
$('#name').focus().select();
}
}
function onBlurEmail() {
$.ajax({
'url' : '${h.url_for(action='fetchdddata')}',
'data' : {'email' : $('#email').attr('value')},
'dataType' : 'json',
'success' : updateFields,
'error' : function(request, textStatus, errorThrown) {
$('#email').focus();
}
});
}
$(document).ready(function() {
var fields = new Array(
'#namefield', '#usernamefield',
'#nonddemailfield', '#aliothusernamefield');
for (var index in fields) {
if (!$(fields[index]).hasClass('witherrors')) {
$(fields[index]).hide();
}
}
$('#email').blur(onBlurEmail).focus();
});