Ajax And Spring MVC

Question

Hey Guys Am trying to update the jsp page by using ajax response here my issue is

i have one dropdown ,It contains some values ,each value is associated with the some certain data,if i select one value from dropdown then i'll get the corresponding data on the jsp page ,If i try to select Another value from dropdown ,then jsp page contains the old as well as new data ,But actually i want new data ,once new data comes old data on jsp page shouls vanishes out from the page

here my ajax call code is

function getSubjects(sectionId) {




        $.ajax({

            type : 'get',
            url : approoturl+'/admin/section/subjects?sectionId='+sectionId,

            success : function(response) {



                      var table = $('<table class="table table-bordered"/>').appendTo($('#somediv'))
                                                                            .append($('<th/>').text("Subject Name"))
                                                                            .append($('<th/>').text("Language"))
                                                                            .append($('<th/>').text("Subject ID"))
                       $(response).each(function(i, response) {
                                    $('<tr/>').appendTo(table)
                                              .append($('<td/>').text(response.name))
                                              .append($('<td/>').text(response.language))
                                              .append($('<td/>').text(response.id));
                       }); 


            }
        });


    }

</script>

and my jsp page is

<div id="form-group-section-id"
                        class="form-group col-md-4 col-md-offset-4">
                        <label class="control-label">Choose Class</label>
                        <form:select cssClass="form-control" path="section.id"
                            onchange="getSubjects(value);">
                            <form:option value="${-1}">Select Class</form:option>
                            <c:forEach items="${sections}" var="section">
                                <form:option value="${section.id}">${section.name}</form:option>
                            </c:forEach>
                        </form:select>
                        <div class="text-danger">
                            <form:errors path="section.id" />
                        </div>
                    </div>


                    <div id="somediv"></div>

Please give me some tips to remove old data and populate new data to particular div "somediv" any help would be greatfull

Answer 1

You can clear the div before appending.

$('#somediv').empty();

Or

$('#somediv').html("");