CODEWITHSUNDEEP
javascriptjqueryajaxjspspring-mvc
Nazneen
Nazneen

Reputation: 789

How to update a specific div from an ajax response object returns a form in javascript

An ajax request is sent to Spring MVC controller when a particular drop down is selected. Form page created in JSP. Controller response object returns the full form to JSP. So, when I use the updateHTML, it returns another form under the form loaded previously.

I need to update only a particular div which contains another drop down list. I think I have got two solutions. Sending data only for that select box from controller. Or else I can try to update only the div which I want to change from the response.

Two drop downs in the JSP page

   <b>Country:</b>
  <spring:bind path="company.country">
    <font color="red">
      <b><c:out value="${status.errorMessage}"/></b>
    </font>
    <br/>
    <select id="countryNameField" name="countryNameField" onchange="getStates();">
        <option value="">--</option>
        <c:forEach var="country" items="${countryList}">
            <option value='<c:out value="${country}"/>'
                <c:if test="${status.value == country}">selected</c:if>>
                   <c:out value="${country}"/>
            </option>
        </c:forEach>
    </select>
  </spring:bind>
  <p/>

<div id="statesManager" name="statesManager" style="display:none">
   <b>Manager:</b>
     <spring:bind path="company.manager">
       <font color="red">
         <b><c:out value="${status.errorMessage}"/></b>
       </font>
    <br/>
    <select name="manager">
        <option value="">--</option>
        <c:forEach var="manager" items="${managerList}">
            <option value='<c:out value="${manager}"/>'
                <c:if test="${status.value == manager}">selected</c:if>> 
                  <c:out value="${manager}"/>
            </option>
        </c:forEach>
    </select>
  </spring:bind>
  <p/>
</div>

Response object returned from controller contains the full form. I want to update only the div

<div id="statesManager" name="statesManager" style="display:none">

Java script code handles the Ajax part

var response = httpRequest.responseText;
                alert(response);
                document.getElementById("statesManager").innerHTML = response;
                document.getElementById("statesManager").style.display="block";

Upvotes: 0

Views: 2519

Answers (1)

Nazneen
Nazneen

Reputation: 789

Finally I found out the answer. Thanks a lot for your support on jQuery. This is the line worked for me.

    $('#statesManager').load('yoururl #manager', 
{ 'parameterName': $('#countryNameField option:selected').val() });

Upvotes: 1

Related Questions