FIXED
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.
Solution
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
Background
- I have a form that I fill in to create a website user login information.
- 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.
- It is getting the data ( i can see via console) and retrieving the list.
Problem
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.
jQuery function
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');
});
}
Create_User.jsp
<script type="text/javascript" src="/javascript/ajax_functions.js"></script>
<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/javascript/create_web_user.js"></script>
<%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<style type="text/css">
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;
}
<h2> Create Website User Login</h2>
<!--   is a non break line space needed to offset for the asterisk in the required fields-->
<div id="reserve_form"><form name="myform" method="post" action="/Admin?page=create_user_confirm" onsubmit="return validateform(this.form)" >
<div id="User_name"><p><label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> User Name: </label><input type="text" class="textbox" id="uname" name="user_name" />
<label class="form"><sup style="color:red; font-style:bold, italic;;">*</sup> First Name: </label><input type="text" class="textbox" id="fname" name="first_name" /></p></div>
<div id="User_pword"><p><label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> Password: </label><input type="text" class="textbox" id="pword" name="user_pword" />
<label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> Last Name: </label><input type="text" class="textbox" id="lname" name="last_name" /></p></div>
<div id="Plant_no"><p><label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> Plant or Prod #: </label><input type="text" class="textbox" id="plantNo" name="plant_no" />
<label class="form"> Farm Name: </label><input type="text" class="textbox" id="farnname" name="farm_name" /></p></div>
<div id="Acct_type"><p><label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> Account Type: </label>
<select name="acct_type" id="acct_type_select" onchange = "ShowHideDiv2(this.value)" style="height: 25px;">
<option value=""> </option>
<option value=5>Producer</option>
<option value=15>Field Man</option>
<option value=2>Admin</option>
</select>
<label class="form"> Email Address: </label><input type="text" class="textbox" id="emailaddress" name="email_address" /></p></div>
<div id="cntrl"><p><label class="form"><sup style="color:red; font-style:bold, italic;">*</sup> Control #: </label><input type="text" class="textbox" id="cntrlno" name="cntrl_no" />
</div>
<table id="pi" style="display: block" >
<tr id="header">
<td>Control Number</td>
<td>Producer ID</td>
<td>Producer Name</td>
<td>Producer Name 2</td>
<td>Producer Name 3</td>
<td>Plant</td>
<td>Coop</td>
<td>Federal Order</td>
</tr>
<c:forEach items="${prod_ctl_sel}" var="pt" varStatus="i">
<c:set var="background_color" value="#fff"/>
<c:set var="border_color" value="black"/>
<c:set var="v" value=""/>
<tr class="producer_data" id="<c:out value="${i.count}_row"/>" >
<td style="text-align:center;"><c:out value="${pt.prodCtlNum}"/></div></td>
<td><c:out value="${pt.prodIdNum}"/></td>
<td><c:out value="${pt.prodName1}"/></td>
<td><c:out value="${pt.prodName2}"/></td>
<td><c:out value="${pt.prodName3}"/></td>
<td><c:out value="${pt.prodPlant}"/></td>
<td><c:out value="${pt.prodCoop}"/></td>
<td><c:out value="${pt.prodOrder}"/></td>
</tr>
</c:forEach>
finally servlet/controller
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//_LOTS_OF_CODE_IN_BETWEEN
if(request.getParameter("page")!=null && !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);
}
Since a picture is worth a 1k words here is a screen grab.
Screen Grab of the webpage after (removed some database info)
