nested dynaForm issue
Posted: 08 Aug 2012, 20:09
I have a DynaForm that contains backing bean generated DynaForms:
The page is generated correctly but if I have any more than one model in the dynaForm the data is not set in the controls. In other words, only one dynaForm in the mix, works perfectly, can't ask for better. More than one dynaForm in the mix and the data set on the client is not returned to the backing bean. The code that generates the form is:
Is there a better way to do this to allow the ability to have nested dynaForms?
Thanks!
Code: Select all
<p:panel id="pnlEntry" visible="#{incidentController.questionsVisible}" header="#{incidentController.questionSetName}">
<script type="text/javascript">
#{incidentController.conditionals}
</script>
<p:panelGrid id="newSurvey">
<p:row>
<p:column colspan="2">
<p:messages/>
</p:column>
</p:row>
<p:row>
<p:column colspan="2">
<h:outputText value="#{msgs['incidents.new.description']}" style="font-weight: bold"/>
<br/>
<p:inputTextarea value="#{incidentController.survey.description}" id="surveyDescription"
title="#{msgs['incidents.new.description.title']}" style="width: 95%;" />
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="#{msgs['incidents.new.dateOccurred']}" style="font-weight: bold"/>
<br/>
<p:calendar value="#{incidentController.survey.dateOccurred}" id="DateOccurred" showOn="button" pattern="MM/dd/yyyy hh:mm a">
<f:converter converterId="DateToCalendarConverter" />
</p:calendar>
</p:column>
<p:column>
<h:outputText value="#{msgs['incidents.new.location']}" style="font-weight: bold"/>
<br/>
<p:selectOneMenu id="ddlLocation" value="#{incidentController.selectedLocationId}">
<f:selectItems value="#{incidentController.locations}" var="location"
itemValue="#{location.id}" itemLabel="#{location.name}"/>
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column colspan="2">
<pe:dynaForm widgetVar="formGroup" value="#{incidentController.groupPanel}" var="groupModel">
<pe:dynaFormControl type="panel" for="questionGroupPanel">
<p:panel id="questionGroupPanel" header="#{groupModel.group.name}">
<pe:dynaForm widgetVar="formQuestion" value="#{groupModel.model}" var="questionResponse">
<pe:dynaFormControl type="inInt" for="txtInt">
<p:inputText id="txtInt" value="#{questionResponse.response}"/>
</pe:dynaFormControl>
<pe:dynaFormControl type="inDec" for="txtDec">
<p:inputText id="txtDec" value="#{questionResponse.response}"/>
</pe:dynaFormControl>
<pe:dynaFormControl type="select" for="sel" styleClass="select">
<p:selectManyCheckbox value="#{questionResponse.multiResponses}" id="sel">
<f:selectItems value="#{questionResponse.question.responseOptions}"
var="option" itemLabel="#{option.response}" itemValue="#{option.id}"
itemDescription="#{option.description}"/>
</p:selectManyCheckbox>
</pe:dynaFormControl>
<pe:dynaFormControl type="calendar" for="cal" styleClass="calendar">
<p:calendar value="#{questionResponse.calendar}" id="cal" showOn="button" pattern="MM/dd/yyyy hh:mm a">
<f:converter converterId="DateToCalendarConverter" />
</p:calendar>
</pe:dynaFormControl>
<pe:dynaFormControl type="area" for="tarea">
<p:inputTextarea id="tarea" value="#{questionResponse.response}" style="width: 95%"/>
</pe:dynaFormControl>
<pe:dynaFormControl type="radio" for="rselect">
<p:selectOneRadio value="#{questionResponse.response}" id="rselect">
<f:selectItems value="#{questionResponse.question.responseOptions}"
var="option" itemLabel="#{option.response}" itemValue="#{option.id}"
itemDescription="#{option.description}"/>
</p:selectOneRadio>
</pe:dynaFormControl>
</pe:dynaForm>
</p:panel>
</pe:dynaFormControl>
</pe:dynaForm>
</p:column>
</p:row>
<p:row>
<p:column style="text-align: right;" colspan="2">
<p:commandButton action="#{incidentController.addSurvey}" value="#{msgs['common.button.save']}"
title="#{msgs['incidents.new.submit']}" style="font-weight: bold;"
update=":incidentNew:pnlEntry :incidentNew:pnlComplete"/>
</p:column>
</p:row>
</p:panelGrid>
</p:panel>
Code: Select all
List<QuestionSetGroup_LinkDTO> questionGroups = (List<QuestionSetGroup_LinkDTO>)questionSet.getQuestionGroups();
Collections.sort(questionGroups, QUESTIONSETGROUP_COMPARE_ORDINAL);
for (QuestionSetGroup_LinkDTO groupLink : questionGroups)
{
QuestionGroupDTO group = groupLink.getQuestionGroup();
//add panel for group
DynamicGroupModel groupModel = new DynamicGroupModel(group, new DynaFormModel());
DynaFormRow row = groupPanel.createRegularRow();
DynaFormControl gPanel = row.addControl(groupModel, "panel", 1, 1);
gPanel.setKey(group.getInternalCode());
//set conditionals, if applicable
if (group.getConditionals() != null && group.getConditionals().size() > 0)
{
//initial hiding of controls as default
hideConditionals = hideConditionals +
("$('div[id*=\"" + group.getInternalCode() + "\"]').closest('tr').hide(); ");
//begin building of function to show control
//INDEPENDENT VISIBILITY CHECKING FUNCTION, CALLED BY CHANGE FUNCTIONS ON SELECT ELEMENTS
String function = "function updateGroup" + group.getId() + "(){ ";
//loop through conditional records adding each value to visibility logic
//for both the independent function and the change event on the element
for (QuestionGroupConditionalDTO con : group.getConditionals())
{
if (con.getQuestionSetId().toString().equalsIgnoreCase(selectedQuestionSetId))
{
//CHANGE FUNCTION, part of hideConditionals
hideConditionals = hideConditionals + " $('input[id*=\"dynaControl-" + con.getQuestionId() +
"\"]').change(function() { updateGroup" + group.getId() + "(); });";
//parse through answer options that cause visibility of question
String[] options = con.getResponseOptionIds().split(",");
for (String option : options)
{
//ADD TO INDEPENDENT VISIBILITY CHECKING FUNCTION
if (!function.contains("if"))
function = function + " if ($('table[id*=\"dynaControl-" + con.getQuestionId() +
"\"]').find('.ui-state-active').siblings('.ui-helper-hidden-accessible').find('input').val() == '" +
option + "' ";
else
function = function + "|| $('table[id*=\"dynaControl-" + con.getQuestionId() +
"\"]').find('.ui-state-active').siblings('.ui-helper-hidden-accessible').find('input').val() == '" +
option + "' ";
}
}
}
//close out the independent visibility function with complete visibility logic and ending syntax
buildConditionals = buildConditionals + function +
(") $('div[id*=\"" + group.getInternalCode() + "\"]').closest('tr').show(); ") +
("else $('div[id*=\"" + group.getInternalCode() + "\"]').closest('tr').hide(); }");
}
//generate subForm
groupQuestions.clear();
groupQuestions.addAll(questionSetModel.QuestionsByGroup(group.getId()));
Collections.sort(groupQuestions, QUESTION_COMPARE_ORDINAL);
buildConditionals = buildConditionals + (generateDisplayPanel(groupQuestions, groupModel.getModel()));
}
private String generateDisplayPanel(List<QuestionDTO> groupQuestions, DynaFormModel displayPanel)
{
QuestionResponse questionResponse;
String function = "";
for (QuestionDTO question : groupQuestions)
{
//create questionResponse object to hold all the data in one place
DynaFormRow row = displayPanel.createRegularRow();
//question label
DynaFormLabel labelQuestion = row.addLabel(question.getOrdinal() + ". " + question.getText(), 1, 1);
//create controls based on question type
QuestionType questionType = QuestionType.values()[Integer.parseInt(question.getQuestionType().getId().toString())];
switch (questionType)
{
case Multiple_Select:
questionResponse = new QuestionResponse(question, new ArrayList<String>());
DynaFormControl selectManyCheckbox = row.addControl(questionResponse, "select", 1, 1);
selectManyCheckbox.setKey("dynaControl-" + question.getId().toString());
labelQuestion.setForControl(selectManyCheckbox);
break;
case Single_Select:
questionResponse = new QuestionResponse(question, "");
DynaFormControl selectOneRadio = row.addControl(questionResponse, "radio", 1, 1);
selectOneRadio.setKey("dynaControl-" + question.getId().toString());
labelQuestion.setForControl(selectOneRadio);
break;
case Text:
questionResponse = new QuestionResponse(question, "");
DynaFormControl textArea = row.addControl(questionResponse, "area", 1, 1);
textArea.setKey("dynaControl-" + question.getId().toString());
labelQuestion.setForControl(textArea);
break;
case Date:
questionResponse = new QuestionResponse(question, new ArrayList<String>());
DynaFormControl calendar = row.addControl(questionResponse, "calendar", 1, 1);
calendar.setKey("dynaControl-" + question.getId().toString());
labelQuestion.setForControl(calendar);
break;
case Integer:
questionResponse = new QuestionResponse(question, "");
DynaFormControl intBox = row.addControl(questionResponse, "inInt", 1, 1);
intBox.setKey("dynaControl-" + question.getId().toString());
labelQuestion.setForControl(intBox);
break;
case Decimal:
questionResponse = new QuestionResponse(question, "");
DynaFormControl decBox = row.addControl(questionResponse, "inDec", 1, 1);
decBox.setKey("dynaControl-" + question.getId().toString());
labelQuestion.setForControl(decBox);
break;
}
if (question.getConditionals() != null && question.getConditionals().size() > 0)
{
//Set row to display:none as default. Row will appear when selection is made, if applicable.
hideConditionals = hideConditionals + ("$('label[for*=\"dynaControl-" + question.getId() +
"\"]').closest('tr').hide(); ");
//INDEPENDENT VISIBILITY CHECKING FUNCTION, CALLED BY CHANGE FUNCTIONS ON SELECT ELEMENTS
String buildConditionals = "function updateQuestion" + question.getId() + "(){ ";
//loop through conditional records adding each value to visibility logic
//for both the independent function and the change event on the element
for (QuestionConditionalDTO con : question.getConditionals())
{
if (con.getQuestionSetId().toString().equalsIgnoreCase(selectedQuestionSetId))
{
//CHANGE FUNCTION, part of hideConditionals
hideConditionals = hideConditionals + "$('input[id*=\"dynaControl-" + con.getQuestionId() +
"\"]').change(function() { updateQuestion" + question.getId() + "(); });";
//parse through answer options that cause visibility of question
String[] options = con.getResponseOptionIds().split(",");
for (String option : options)
{
//ADD TO INDEPENDENT VISIBILITY CHECKING FUNCTION
if (!buildConditionals.contains("if"))
buildConditionals = buildConditionals + " if ($('table[id*=\"dynaControl-" + con.getQuestionId() +
"\"]').find('.ui-state-active').siblings('.ui-helper-hidden-accessible').find('input').val() == '" +
option + "' ";
else
buildConditionals = buildConditionals + "|| $('table[id*=\"dynaControl-" + con.getQuestionId() +
"\"]').find('.ui-state-active').siblings('.ui-helper-hidden-accessible').find('input').val() == '" +
option + "' ";
}
}
}
//close out the independent visibility function with complete visibility logic and ending syntax
buildConditionals = buildConditionals +
(") $('label[for*=\"dynaControl-" + question.getId() + "\"]').closest('tr').show(); ") +
("else $('label[for*=\"dynaControl-" + question.getId() + "\"]').closest('tr').hide(); }");
//add new conditional to entire conditional statement
function = function + buildConditionals;
}
}
return function;
}
Thanks!