Can I update (not replace content) contents inside the jsp div tag from ajax call

I have a scenario where in my JSP , under a div tag , I have some contents inside scriptlet which reads data from database everytime I get request back from server. Previously with every update I was refreshing the entire page which loads the resources as well and it was increasing the page size, so I thought of why not only updating the div tag-

My div tag sample is like -

 <div id="container">
    <%
            StudentLogin name = (StudentLogin)request.getAttribute("name");
            List<Cube> personList = (List)request.getAttribute("message");

            for(Cube cube: personList){
                String usedBy =  cube.getUsedby().trim();
                boolean alreadyUsed = (usedBy.length()>0);
                String ipAddress = cube.getIp();
                String cubeName = cube.getCubename();
                String details = cube.getDetails();
                String since = "Not Busy  ";        
                String cubeCirle = "pricemid";
        %>
            <div class="<%= mainClass%> ">
            <h1> <%= ipAddress%> </h1>
            <div class="<%= cubeCirle%>"> 
                <h2> <%= cubeName%> </h2> 
             </div>
                 <div class="infos">  
                 <h3>  <%= details%> </h3>               
                 <h2>  <%= usedBody%> </h2>
                 <h3>  <%= since%> </h3>
             </div>
              <div class="<%= priceFooterClass%> ">
                <div class="<%= buttonclass%> ">
                  <a href="#" onClick="suc('<%=userName%>','<%=Password%>','<%=usedBody%>','<%=cubeName%>')"> <%= buttonName%> </a>
                </div>
              </div>
            </div>
        <% } %>
</div>

So with every ajax call , I am expecting new value of name and message and based on that I want to update my div tag.

Following is the sample of my ajax call-

  $.ajax({
        url: '${pageContext.request.contextPath}/usercontroller/success.json',
        data: JSON.stringify(datamodel),
        type: "POST",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Accept", "application/json");
            xhr.setRequestHeader("Content-Type", "application/json");
        },
        success: function(resp) {           
            $("#container").html(resp); 
        },
        error: function(e){  
         alert('Error121212: ' + e);  
        } 
    });

With the ajax call , I realized it just replaced the entire contents inside my div tag , not updating or simply calling it. It tried using load method as well but that updated the entire page, so what exactly I should do to refresh the content inside the specific div tag with update value , nothing more than that.

Goal-

I am getting different values each time from server with name and messages and based on that the content under div tag must get changed so should I replace the entire div command and create an inner html to replace the div tag to do that or what ..

Solution

You have to remember that JSP is completely handled on the server and the result sent to the browser is plain HTML. You can not just pass a JSON object on the browser side to your div and expect the JSP rendering to take place.

A quick and dirty solution would be to just rebuild the markup by hand in the success callback $("#container").html("<h1>" + resp.name + "</h1>"); etc.

A more sophisticated solution would be to retrieve the whole markup for the part you try to update from the server instead of just the data as JSON. Or you could include a client side templateing solution.