title: jQuery Ajax load table not whole page
body: <h1>FIXED</h1>
  
  <p>My problem is resolved. My issue was not the jQuery command as much as i was using the same template as when first loading the page and the table included in that jsp page. </p>
  
  <h2>Solution</h2>
  
  <p>MY solution:
  Create a new template to be called on new page load name ControlTable. 
  Create a new jsp file with only the table. Have it loaded with both templates.
  when jquery is triggered call only the new template via the controller -> template -> jstl core </p>
  
  <p><strong>Background</strong></p>
  
  <ol>
  <li>I have a form that I fill in to create a website user login information. </li>
  <li>When i enter the text into 'plantNo' and select producer from my Drop Down   list. i want it to load a table into after querying the servlet to get the data. </li>
  <li>It is getting the data ( i can see via console) and retrieving the list. </li>
  </ol>
  
  <p><strong>Problem</strong></p>
  
  <p>The problem is the reloading of the table. It is reloading the whole webpage into the table. What am i doing wrong? I am new to jQuery and AJAX.</p>
  
  <p><strong>jQuery function</strong></p>
  
  <pre><code>function getProdInfoData(variableIn){
  
  var plantnumber=document.myform.plantNo.value.trim();
  alert(plantnumber);
  
      $.post('Admin?page=createUser', {"plant_no": plantnumber },function(data){
           $('#pi').html(data).hide().slideDown('slow');
      });
  
  }
  </code></pre>
  
  <p><strong>Create_User.jsp</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="/javascript/ajax_functions.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/javascript/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/javascript/create_web_user.js"&gt;&lt;/script&gt;
  &lt;%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%&gt;  
  
  
  &lt;style type="text/css"&gt;
  label{display: inline-block; width:120px; font-weight: bold;}
  input{width:250px; height: 25px; font-size: 18px; margin-right:25px;}
  select{width:250px; height: 25px; font-size: 18px; margin-right:25px;}
  #pi tr:nth-child(odd){
      background: #dae5f4;
  }
  #pi tr:nth-child(even){
      background: #ccccc;
  }
  
  &lt;h2&gt; Create Website User Login&lt;/h2&gt;
  &lt;!-- &amp;nbsp is a non break line space  needed to offset for the asterisk in the required fields--&gt;
  &lt;div id="reserve_form"&gt;&lt;form name="myform" method="post" action="/Admin?page=create_user_confirm" onsubmit="return validateform(this.form)" &gt; 
  
  &lt;div id="User_name"&gt;&lt;p&gt;&lt;label class="form"&gt;&lt;sup style="color:red; font-style:bold, italic;"&gt;*&lt;/sup&gt; User Name: &lt;/label&gt;&lt;input type="text" class="textbox" id="uname" name="user_name" /&gt;
      &lt;label class="form"&gt;&lt;sup style="color:red; font-style:bold, italic;;"&gt;*&lt;/sup&gt; First Name: &lt;/label&gt;&lt;input type="text" class="textbox" id="fname" name="first_name" /&gt;&lt;/p&gt;&lt;/div&gt;
  
  &lt;div id="User_pword"&gt;&lt;p&gt;&lt;label class="form"&gt;&lt;sup style="color:red; font-style:bold, italic;"&gt;*&lt;/sup&gt; Password: &lt;/label&gt;&lt;input type="text" class="textbox" id="pword" name="user_pword" /&gt;
      &lt;label class="form"&gt;&lt;sup style="color:red; font-style:bold, italic;"&gt;*&lt;/sup&gt; Last Name: &lt;/label&gt;&lt;input type="text" class="textbox" id="lname" name="last_name" /&gt;&lt;/p&gt;&lt;/div&gt;
  
  &lt;div id="Plant_no"&gt;&lt;p&gt;&lt;label class="form"&gt;&lt;sup style="color:red; font-style:bold, italic;"&gt;*&lt;/sup&gt; Plant or Prod #: &lt;/label&gt;&lt;input type="text" class="textbox" id="plantNo" name="plant_no" /&gt;
      &lt;label class="form"&gt;&amp;nbsp; Farm Name: &lt;/label&gt;&lt;input type="text" class="textbox" id="farnname" name="farm_name" /&gt;&lt;/p&gt;&lt;/div&gt;
  
  
  
  
  &lt;div id="Acct_type"&gt;&lt;p&gt;&lt;label class="form"&gt;&lt;sup style="color:red; font-style:bold, italic;"&gt;*&lt;/sup&gt; Account Type: &lt;/label&gt;
                       &lt;select name="acct_type" id="acct_type_select"  onchange = "ShowHideDiv2(this.value)"  style="height: 25px;"&gt;
                          &lt;option value=""&gt; &lt;/option&gt;
                          &lt;option value=5&gt;Producer&lt;/option&gt;
                          &lt;option value=15&gt;Field Man&lt;/option&gt;
                          &lt;option value=2&gt;Admin&lt;/option&gt;
                       &lt;/select&gt;
  
                       &lt;label class="form"&gt;&amp;nbsp; Email Address: &lt;/label&gt;&lt;input type="text" class="textbox" id="emailaddress" name="email_address" /&gt;&lt;/p&gt;&lt;/div&gt;
  
                       &lt;div id="cntrl"&gt;&lt;p&gt;&lt;label class="form"&gt;&lt;sup style="color:red; font-style:bold, italic;"&gt;*&lt;/sup&gt; Control #: &lt;/label&gt;&lt;input type="text" class="textbox" id="cntrlno" name="cntrl_no" /&gt;
                       &lt;/div&gt;
  
  &lt;table id="pi" style="display: block" &gt;
  &lt;tr id="header"&gt;
      &lt;td&gt;Control Number&lt;/td&gt;
      &lt;td&gt;Producer ID&lt;/td&gt;
      &lt;td&gt;Producer Name&lt;/td&gt;
      &lt;td&gt;Producer Name 2&lt;/td&gt;
      &lt;td&gt;Producer Name 3&lt;/td&gt;
      &lt;td&gt;Plant&lt;/td&gt;
      &lt;td&gt;Coop&lt;/td&gt;
      &lt;td&gt;Federal Order&lt;/td&gt;
  &lt;/tr&gt;
      &lt;c:forEach items="${prod_ctl_sel}" var="pt" varStatus="i"&gt;
          &lt;c:set var="background_color" value="#fff"/&gt;
          &lt;c:set var="border_color" value="black"/&gt;
          &lt;c:set var="v" value=""/&gt;
      &lt;tr class="producer_data" id="&lt;c:out value="${i.count}_row"/&gt;" &gt;
          &lt;td style="text-align:center;"&gt;&lt;c:out value="${pt.prodCtlNum}"/&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;c:out value="${pt.prodIdNum}"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;c:out value="${pt.prodName1}"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;c:out value="${pt.prodName2}"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;c:out value="${pt.prodName3}"/&gt;&lt;/td&gt;       
          &lt;td&gt;&lt;c:out value="${pt.prodPlant}"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;c:out value="${pt.prodCoop}"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;c:out value="${pt.prodOrder}"/&gt;&lt;/td&gt; 
      &lt;/tr&gt;
      &lt;/c:forEach&gt;
  </code></pre>
  
  <p></p>
  
  <p>finally <strong>servlet/controller</strong></p>
  
  <pre><code>public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  
  //_LOTS_OF_CODE_IN_BETWEEN
  if(request.getParameter("page")!=null &amp;&amp; !request.getParameter("page").equals("")){ 
              if(request.getParameter("page").equalsIgnoreCase("createUser")){ 
                  /* NEW CODE to create  user */
  
                  String updateID = info.getUserid();
                  String prod_number_in = request.getParameter("plant_no");   
                  AdminFunctions af = new AdminFunctions();
                  ArrayList prod_control_select = new ArrayList();
                  System.out.println("prond_num_in"+ prod_number_in);
                  if(prod_number_in != null || prod_number_in != ""){
                      prod_control_select = af.getProdCtlNum(prod_number_in);
                      request.setAttribute("prod_ctl_sel",prod_control_select);
                   }
  </code></pre>
  
  <p>Since a picture is worth a 1k words here is a screen grab. </p>
  
  <p><a href="http://i.stack.imgur.com/pEDSw.png" rel="nofollow">Screen Grab of the webpage after (removed some database info)</a></p>