Jquery div not working in AJAX success function

Question

Unable to show the entire Div code in Ajax success function call

I have a button called RequestQuestions and on click of this button, i should be able to display all the questions. I have delayed the response by 10 secs but still the table doesn't load with content. When I write a regular function without ajax, the table shows with content but I need to make a ajax call. The table earlier used to load on page load but now it should happen on button click.

Below is the code I have tried

$("[id='Questions']").on("click", function(e) {
  $.ajax({
    type: "GET",
    url: "${pageContext.request.contextPath}" + "/security/Questions",
    async: false,
    cache: false,
    contentType: "application/json",
    timeout: "10000",
    success: function(response) {
     alert("json name==="+response.questions.challengeQuestions[0].questionName);
 alert("json ==="+response.questions.challengeQuestions[0].question);

     // $('#formQuestSection').show();
     // $('#Questions').hide();

    },
    failure: function(response) {
      return;
    },
    error: function(response) {
      return;
    }
  });
});

<input type="button" id="Questions" style="float: left;" name="Request Questions" value="Request Questions">
</input>
<div id="formQuestSection" class="sec-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>

right now $('#Questions').hide() works fine but $('#formQuestSection').show() doesn't show up. I am thinking the page is loading without displaying the content. Also I can see the table only but no content. Any help on this? I am now able to get the response when I alert, can anyone help me with appending the content in the table in the ajax call? I'm pretty new to this.

 <div id="formQuestSection" class="sec-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>

I have to remove this part of the code and put it in ajax success call.

maybe `securityVO.questions.challengeQuestions` is empty so nothing to display in the div — Below the Radar, Sep 03 '19 at 20:03
Not sure if this matters for your issue, but an `input` tag does not need a closing tag. It should close itself like so `.` have you debugged to see if `$('#formQuestSection').length>0`? — daddygames, Sep 03 '19 at 20:06
Actually it doesn't even need to close itself, @daddygames, in HTML5 anyway. It's optional in that standard, for void elements like `input`. See [this answer](https://stackoverflow.com/a/7854998/215552). You are correct that it should not have a closing tag -- that's invalid HTML. — Heretic Monkey, Sep 03 '19 at 20:34
Does the AJAX call return the security questions? You need to display them in the DIV when you show it. — Barmar, Sep 03 '19 at 20:42

tkore · Answer 1 · 2019-09-03T23:48:29.707

You're trying to use template literals (``) but instead you're using regular string double quotes (""), and you're using the substitution syntax inside of them (${}), which doesn't work because the surrounding quotes aren't template literals.

This means that you're practically using the url ${pageContext.request.contextPath}/security/Questions, which is of course an invalid url. Check your network tab in the Chrome/Firefox devtools to see it for yourself.

As for the solution, try changing your url line to -

url: `${pageContext.request.contextPath}/security/Questions`,

This should substitute ${pageContext.request.contextPath} to the correct variable set in your code.

Jquery div not working in AJAX success function

1 Answers1