title: Why is my session attribute stale after AJAX call
body: <p>What I'm trying to do is </p>
  
  <ol>
  <li>When a button is clicked, make a request to a servlet to get the records from the database</li>
  <li>Then set these records to the session</li>
  <li>After this request is done, load the modal to show the records</li>
  </ol>
  
  <p>And I have the following codes:</p>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$("#currentItem").focus(loadPlantilla);
  function loadPlantilla() {
      var code = $("#code").val();
      $.ajax({
          url: './profile/ViewPlantillaPicker?code=' + code,
          type: 'POST',
      }).done(function() {                    
          $('#modal').modal('show');
      });
  }
  </code></pre>
  
  <p><strong>SERVLET</strong></p>
  
  <pre><code>int code = Integer.parseInt(request.getParameter("code"));
  
  ...
  
  List&lt;PlantillaView&gt; plantilla = dao.read(...);
  
  HttpSession session = request.getSession();
  session.setAttribute("plantilla", plantilla);
  </code></pre>
  
  <p><strong>MARKUP</strong></p>
  
  <pre><code>&lt;div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
  
              ...    
  
              &lt;div class="modal-body"&gt;
                  &lt;table class="table table-striped table-bordered table-hover"&gt;
                      &lt;thead&gt; ... &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;c:forEach var="plantilla" items="${sessionScope.plantilla}"&gt;                                     
                              &lt;tr&gt;  
                                  &lt;td&gt;&lt;c:out value="${plantilla.getItemCode()}"/&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;c:out value="${plantilla.getNewItemCode()}"/&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;c:out value="${plantilla.getPosition()}"/&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;c:out value="${plantilla.getStation()}"/&gt;&lt;/td&gt;                                                                        
                                  &lt;td class="tools"&gt;                                    
                                      &lt;form action="PickPlantilla" method="post" class="tool-options"&gt;
                                          &lt;input type="hidden" name="itemCode" value="${plantilla.getItemCode()}"&gt;
                                          &lt;button type="submit" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Select"&gt;
                                              &lt;span class="glyphicon glyphicon-hand-up"&gt;&lt;/span&gt;                                     
                                          &lt;/button&gt;
                                      &lt;/form&gt;                                                        
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/c:forEach&gt;  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>PROBLEM</strong></p>
  
  <p>After making the request, the modal is shown but it still contains the previous value of the session even though a new value is set. How do I fix this? I tried refreshing the page before showing the modal using <code>location.reload();</code> but apparently it's not the right solution. Please help?</p>
  
  <p><em>If there's a better way to do this (which is most probable) please let me know. Also I'm new to JQuery and AJAX so some explanations to your solution would be greatly appreciated.</em></p>