On my jsp page I have a loop that loops elements in a collection, which create dynamic fields. Each iteration creates a field type called editType and names it as editType1, editType2…
There are 3 possible options for editType. Based on what the user choosese for editType, I need to hide the irrelevant fields and only show the fields that pertain to the editType that they have chosen. For each editType option there is a cooresponding tbody named editTypeA, editTypeB and editTypeC. An example is if editType = A then tbody name EditTypeA should show and EditType B and EditTypeC should be hidden. Since the tbody for each edity type will be created each time in the loop, how can I have the jquery function display the appropriate tbody for just the clicked editType field and not for all the editType fields on the page.
The jsp page looks like:
<c:forEach items="${surveyInfo.allSurveyEdits}" var="surveyEdits" varStatus="status">
<tr class="altrow" align="left">
<td height="19">Type:</td>
<td width="17%" colspan="3">
<sf:select path="allSurveyEdits[${status.index}].editType" id="editType${status.count}" cssClass="inputbox-survey">
<sf:option value="" label="Select" />
<sf:option value="A" label="A" />
<sf:option value="B" label="B" />
<sf:option value="C" label="C" />
</sf:select>
</td>
</tr>
<tbody id="editTypeA">
<tr align="left">
<td>Edit Description:</td>
<td colspan="3">
<sf:select path="allSurveyEdits[${status.index}].editFormatDesc" id="editFormatDesc${status.count}" cssClass="inputbox-survey">
<sf:option value="" label="Select" />
<sf:option value="Data is entered in correct format" label="Data is entered in correct format" />
<sf:option value="Correct decimal precision is entered" label="Correct decimal precision is entered" />
</sf:select>
</td>
</tr>
</tbody>
<tbody id="editTypeB">
<tr align="left">
<td>Edit Description:</td>
<td colspan="3">
<sf:select path="allSurveyEdits[${status.index}].editRangeDesc" id="editRangeDesc${status.count}" cssClass="inputbox-survey">
<sf:option value="" label="Select" />
<sf:option value="PCT Diff" label="PCT Diff" />
<sf:option value="Defined Range" label="Defined Range" />
</sf:select>
</td>
</tr>
</tbody>
<tbody id="editTypeC">
<tr align="left">
<td>Edit Description:</td>
<td colspan="3">
<sf:select path="allSurveyEdits[${status.index}].editIntegrityDesc" id="editIntegrityDesc${status.count}" cssClass="inputbox-survey">
<sf:option value="" label="Select" />
<sf:option value="Required Field Validation" label="Required Field Validation" />
<sf:option value="Data Type Validation" label="Data Type Validation" />
<sf:option value="Calculation Validation" label="Calculation Validation" />
</sf:select>
</td>
</tr>
</tbody>
</c:forEach>
The jquery function that I have come up with but works only if the page doesn’t have multiple items in the collection:
$(document).ready(function() {
$("#editTypeA").hide();
$("#editTypeB").hide();
$("#editTypeC").hide();
if($("#editType").find("option:selected").val() == "A") {
$("#editTypeA").toggle();
}
if($("#editType").find("option:selected").val() == "B") {
$("#editTypeB").toggle();
}
if($("#editType").find("option:selected").val() == "C") {
$("#editTypeC").toggle();
}
$("#editType").change(function() {
if($(this).find("option:selected").val() == "") {
$("#editTypeA").hide();
$("#editTypeB").hide();
$("#editTypeC").hide();
}
if($(this).find("option:selected").val() == "A") {
$("#editTypeA").toggle();
$("#editTypeB").hide();
$("#editTypeC").hide();
$("#editTypeB").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
$("#editTypeC").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
if($(this).find("option:selected").val() == "B") {
$("#editTypeB").toggle();
$("#editTypeA").hide();
$("#editTypeC").hide();
$("#editTypeA").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
$("#editTypeC").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
if($(this).find("option:selected").val() == "C") {
$("#editTypeC").toggle();
$("#editTypeA").hide();
$("#editTypeB").hide();
$("#editTypeA").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
$("#editTypeB").find(':input').each(function() {
switch(this.type) {
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
});
});
I resolved this by making the tbody name to contain the name of the editType element, this enabled me to use *= selector to get elements that contained the name.
Thanks for all the help.