I have a table that I used to display on page load but now I need to display on click of a button 'Request Questions'.
[<tr id="displayQuestions">
<td>
<div style="width: 100%; ">
<fieldset class="panelBorder">
<legend class="panelTitle">Identity Information</legend>
<form:label class="panelLabel" path="" style="width: 30%;">Credit History Questions</form:label>
<form:input id="formChallengeResponse" class="panelValueDisabled" path="challengeResponse" style="width: 70%;" readonly="true"/>
<form:label class="panelLabel" path="" style="width: 30%;">One-time Passcode</form:label>
<br><br><br>
<input type="button" id="creditQuestions" style="float: left;" name="creditQuestions" value="Request Credit History Questions"></input>
<br>
<form:input id="formOTPResponse" class="panelValueDisabled" path="otp" readonly="true"/>
<div id="formTuAuthFailed" class="sectionErrorFull" style="color: #666666; text-align: center; font-weight: bold;">Insufficient data available for credit history questions. <br> Please validate borrower's identity using an alternative method.<br><br><br><br></div>
<div id="challengeQuestionsReponseFailed" class="sectionErrorFull" style="color: #666666; text-align: center; font-weight: bold;">Please validate borrower's identity using an alternative method.<br><br><br><br><br></div>
<div id="formSecurityQuestSection" class="security-question">
<%int index = 0;%>
<c:forEach items="${securityVO.questions.challengeQuestions}" var="quest">
<div class="squestion"><c:out value="${quest.question}"></c:out></div>
<%String questPath = "answers.challengeAnswers\[" + index + "\].questionName";%>
<form:input class="panelValue, hidden-form-field" path="<%=questPath%>" value="${quest.questionName}"/>
<c:forEach items="${quest.answers}" var="ans">
<%String indexName = "qOption" + index;%>
<%String idName = "formQOption" + index;%>
<%String ansPath = "answers.challengeAnswers\[" + index + "\].answerKey";%>
<div class="sanswer"><form:radiobutton name="<%=indexName%>" id="<%=idName%>" path="<%=ansPath%>" value="${ans.answerKey}" label="${ans.answer}"/></div><br/>
</c:forEach>
<%index = index + 1; %>
</c:forEach>
</div>
<form:input id="formNoQuestion" class="panelValue, hidden-form-field" path="isNoQuestion" />
<form:input id="challengeQuestionFailure" class="panelValue, hidden-form-field" path="responseFailure" />
</fieldset>
</div>
</td>
</tr>][1]
$("[id='creditQuestions']").on("click", function(e)
{
alert("testing security==");
$.ajax({
type: "GET",
url: "${pageContext.request.contextPath}" + "/security/creditQuestions",
contentType: "application/json",
success: function (response) {
alert("testing security after succes==");
alert("json name==="+response.questions.challengeQuestions[0].questionName);
alert("json ==="+response.questions.challengeQuestions[0].question);
$.each(response, function(value, key) {
alert("response"+ response);
//how do i include my table code (attached above) here
},
failure: function (response) {
return;
},
error: function (response) {
return;
}
});
});
I put an alert to make sure I am getting questions and answers in the ajax response. I should now display both questions and answers in the table on button click like its happening on page load. This has to be done in Ajax call after success response. I am new to Ajax, can anyone help me on this? How can I loop my repsonse and display in a format attached.