title: Ajax replace new arraylist without refresh page
body: <p>I am new ajax, how can i replace ${phList} with new arraylist so that ajax can help me update the content without refresh whole page.</p>
  
  <p>The ajax will trigger controller to retrieve data and store in arraylist then pass the arraylist to ajax. Ajax will update the content in jsp. Next step forEach loop will generate the column and checkbox with value if there have record retrieve from database. </p>
  
  <p>Any solution and hope this solution can help others. Thanks!</p>
  
  <p><strong>myJsp.jsp</strong></p>
  
  <pre><code>&lt;select id="selected_year" name="selected_year" class="form-control"&gt;
      &lt;c:forEach var="line" items="${yearlist}"&gt;
          &lt;c:choose&gt;
              &lt;c:when test="${refreshInd ge 0 and line eq refreshInd}"&gt;
                  &lt;option selected="selected"&gt;&lt;c:out value="${line}" /&gt;
                  &lt;/option&gt;
              &lt;/c:when&gt;
              &lt;c:otherwise&gt;
                  &lt;option&gt;&lt;c:out value="${line}" /&gt;&lt;/option&gt;
              &lt;/c:otherwise&gt;
          &lt;/c:choose&gt;
  
      &lt;/c:forEach&gt;
  &lt;/select&gt;
  
  &lt;c:forEach var="ph" items="${phList}" varStatus="PHstatus"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-4"&gt;
            &lt;form:input path="phList[${PHstatus.index}].holidayDesc" class="form-control col-md-5" value="${ph.holidayDesc}" /&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-3"&gt;
            &lt;form:input path="phList[${PHstatus.index}].startDate" class="form-control" value="${ph.startDate}" id="calendar1" placeholder="dd/mm/yyyy" onkeypress="return noAlphabet(event)" /&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-3"&gt;
            &lt;form:input path="phList[${PHstatus.index}].endDate" class="form-control" value="${ph.endDate}" id="calendar2" placeholder="dd/mm/yyyy" onkeypress="return noAlphabet(event)" /&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-2"&gt;
            &lt;form:checkbox path="phList[${PHstatus.index}].checkboxDel" value="" class="cbposition" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;br&gt;
      &lt;/c:forEach&gt;
  </code></pre>
  
  <p>After i change selected_year to  trigger the ajax, it work well but :success function(response) cannot work. I want to remove the existing ${phList} and update with new arraylist by replace ${phList} show at above jsp.</p>
  
  <p><strong>myJavascript.js</strong></p>
  
  <pre><code>$(function($) {
      $("#selected_year").change(function(){
          var selectedText = $(this).find("option:selected").text();
          var $form = $(this);
          var action = $form.find('.send').val();
  
          var list[];
          var array[];
  
          $.ajax("holiday/pubholiday.json?" , {
              method: "GET",
              accepts: "application/json",
              dataType: "json",
              data: $form.serialize() + '&amp;selectedText=' + selectedText,
              success: function(response) {
                  $("#phList").remove()
                  $(JSON.stringify(response))
      //how to pass the response which is my new arraylist to replace the ${phList}
                },
          }).done(function(data) {
              console.log(data)
              alert("Data Sent" + selectedText)
          })
          .fail(function(jqXHR, textStatus, errorThrown) {
              var errorMessage = "";
              if (jqXHR.status == 401) {
                  errorMessage = "Your session has expired. Please &lt;a href=\"&lt;spring:url value='/login'/&gt;\"&gt;login&lt;/a&gt; again.";
              }else if(jqXHR.status == 500){
                  console.log(jqXHR.status);
                     console.log(jqXHR.responseText);
                     console.log(thrownError);
              }else {
                  try {
                      var errorJson = JSON.parse(jqXHR.responseText);
                      errorMessage = errorJson.error;
  
                  } catch (e) {
                  errorMessage = errorThrown || textStatus;
              }
              }
              });
      })
  });
  </code></pre>
  
  <p>This is object model store in the arraylist. Each record will contain object model data.</p>
  
  <p><strong>model.java</strong></p>
  
  <pre><code>    public class PubHoliday {
      private int year;
      private String holidayID;
      private String holidayDesc;
      private String startDate;
      private String endDate;
      private boolean checkboxDel;
      private String selected_year;
      private int refreshInd;
  
      public int getYear() {
          return year;
      }
      public void setYear(int year) {
          this.year = year;
      }
      public String getHolidayID() {
          return holidayID;
      }
      public void setHolidayID(String holidayID) {
          this.holidayID = holidayID;
      }
      public String getHolidayDesc() {
          return holidayDesc;
      }
      public void setHolidayDesc(String holidayDesc) {
          this.holidayDesc = holidayDesc;
      }
      public String getStartDate() {
          return startDate;
      }
      public String getEndDate() {
          return endDate;
      }
      public void setStartDate(String startDate) {
          this.startDate = startDate;
      }
      public void setEndDate(String endDate) {
          this.endDate = endDate;
      }
      public boolean getCheckboxDel() {
          return checkboxDel;
      }
      public void setCheckboxDel(boolean checkboxDel) {
          this.checkboxDel = checkboxDel;
      }
      public String getSelected_year() {
          return selected_year;
      }
      public void setSelected_year(String selected_year) {
          this.selected_year = selected_year;
      }
      public int getRefreshInd() {
          return refreshInd;
      }
      public void setRefreshInd(int refreshInd) {
          this.refreshInd = refreshInd;
      }
  }
  </code></pre>