PDA

View Full Version : Choice fields in grid with shared header


ABC123

Steve Wood
12-11-2012, 01:59 PM
How did I achieve this look where the five choice fields share a common header and are equally spaced in cells (obviously a table)? The layout is pretty easy, but how do I get each radio selection to feed back to the table upon Submit? This is in a web application in a Dialog component and using Data Binding.

Peter.Greulich
12-13-2012, 12:39 AM
Repeating section

kkfin
12-16-2012, 03:20 PM
I don't use any components in my development with Alpha at the moment, but wanted to try this anyway.
Here is my solution (without any style).



<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascript/A5jQuery.js"></script>
<meta name="generator" content="Alpha Five HTML Editor Version 11 Build 3119-4055">
<!-- must use in order to make XP Themes render -->
<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Alpha1</title>
<%a5
jsarr = <<%a%
one;0
two;1
three;2
four;3
five;4
%a%
dim answ as u
answ.initialize("1;2","1","2",jsarr)
dim req as P
dim req.one as C = ""
dim req.two as C = ""
dim req.three as C = ""
dim req.four as C = ""
if variable_exists("request.variables.one") then
req.one = request.variables.one
end if
if variable_exists("request.variables.two") then
req.two = request.variables.two
end if
if variable_exists("request.variables.three") then
req.three = request.variables.three
end if
if variable_exists("request.variables.four") then
req.four = request.variables.four
end if
%>
</head>
<body>
<%a5
dim jstxt as C = <<%txt%
<script type="text/javascript">
jQuery(document).ready(function() {
$('input:radio[name=one]:nth({answ.get(req.one)})').attr('checked',true);
$('input:radio[name=two]:nth({answ.get(req.two)})').attr('checked',true);
$('input:radio[name=three]:nth({answ.get(req.three)})').attr('checked',true);
$('input:radio[name=four]:nth({answ.get(req.four)})').attr('checked',true);
});
</script>
%txt%
dim finaljs as P
finaljs = compilestringtemplate(jstxt)
response.write(finaljs.output())
dim header[0] as P
header[] = {"Question":"Question","None":"None","Minimal":"Minimal","Medium":"Medium","Heavy":"Heavy","Almost All":"Almost All"}
dim row[0] as P
row[] = {"rname":"one","Question":"Building Desktop \"Window GUI\" applications","None":"one","Minimal":"two","Medium":"three","Heavy":"four","Almost All":"five"}
row[] = {"rname":"two","Question":"Building Web applications","None":"one","Minimal":"two","Medium":"three","Heavy":"four","Almost All":"five"}
row[] = {"rname":"three","Question":"Building Mobile applications","None":"one","Minimal":"two","Medium":"three","Heavy":"four","Almost All":"five"}
row[] = {"rname":"four","Question":"Providing Traing/Mentoring as an Alpha expert","None":"one","Minimal":"two","Medium":"three","Heavy":"four","Almost All":"five"}
%>
<form id="form1" method="POST" >
<table width="90%" border="1" bordercolor="" bordercolorlight="" bordercolordark="" bgcolor="" cellpadding="0" cellspacing="0">
<%a5
dim htmlheader as C = <<%html%
<tr>
<td>{ds.data("Question")}</td>
<td align="center">{ds.data("None")}</td>
<td align="center">{ds.data("Minimal")}</td>
<td align="center">{ds.data("Medium")}</td>
<td align="center">{ds.data("Heavy")}</td>
<td align="center">{ds.data("Almost All")}</td>
</tr>
<tr>
%html%
response.write(a5_mergedataintotemplate(htmlheader,header))
dim htmlrows as C = <<%html%
<td>{ds.data("Question")}</td>
<td align="center"><input type="radio" id="c1" name="{ds.data("rname")}" value="{urlencode(ds.data("None"))}"></td>
<td align="center"><input type="radio" id="c2" name="{ds.data("rname")}" value="{urlencode(ds.data("Minimal"))}"></td>
<td align="center"><input type="radio" id="c3" name="{ds.data("rname")}" value="{urlencode(ds.data("Medium"))}"></td>
<td align="center"><input type="radio" id="c4" name="{ds.data("rname")}" value="{urlencode(ds.data("Heavy"))}"></td>
<td align="center"><input type="radio" id="c5" name="{ds.data("rname")}" value="{urlencode(ds.data("Almost All"))}"></td>
</tr>
%html%
response.write(a5_mergedataintotemplate(htmlrows,row))
%>
</table>
<input id="alpha" type="submit" value="Submit"><input type="reset" value="Reset">
</form>
</body></html>


Edit: This has been done v11 alpha 3119-4055 and those who wonder why row array has properties like "none":"one" and not "none":"1" this is because this syntax was not possible in this build.

Steve Wood
12-16-2012, 04:03 PM
Ken, does that actually save the form-entries to a database table?

Alpha does not have the ability to use common header for multiple choice fields, like in my original post image. I wanted the dialog to save the results to table but wanted the common header rather than repeating the titles for each and every choice field. So I built a normal dialog with normal choice field, but made all of them hidden. Then I added a Free-form container with the same choice fields reorganized the way I wanted. I was happy to see that even though my choice fields were hidden, they took the user-entered value from the Free-form container, and applied the entry to the database. The dialog is attached.

kkfin
12-16-2012, 04:35 PM
The form entries are posted back so they can saved easily. And you can reuse result afterwords to show situation in original table (like I do in post(back)).