Hi Guys I’m trying to create a postback on a JSP page. I have a combobox (clientID) and two textboxes (address and city). I have been trying for some time without any success to make the address and city fill automatically once the combobox value changes. I have looked all over for some code which I could adapt for my system without any success. Please can someone help me?
This is not a complete answer.
But if you go to youtube there are several videos on using jquery to
accomplish this. View and learn some of this.
Below are some code fragments one of a jquery ajax call using a
table instead of dropdown (I search from tables), and the servlet it is
getting the info from.
jquery:
$("#myTable td:nth-child(1)").click(function(event)
{
//Prevent the hyperlink to perform default behavior
event.preventDefault();
var $td= $(this).closest('tr').children('td');
var currentCellText = $td.eq(0).text();
$.ajax({
url: 'getowner',
type: 'GET',
data: { getownerID:currentCellText },
//data: 'getownerID='+currentCellText,
success: function(result) {
alert(result);
jQuery.globalEval(result)
window.close();
}
});
});
servlet getowner:
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;
import java.lang.String.*;
public class getowner extends HttpServlet{
Connection theConnection;
private ServletConfig config;
@Override
public void init(ServletConfig config)
throws ServletException{
this.config=config;
}
@Override
public void service (HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
HttpSession session = req.getSession(true);
res.setContentType("text/html");
PrintWriter out = res.getWriter();
//OwnerBean.ownerbean cb = new OwnerBean.ownerbean();
OwnerBean.ownerbean cb = new OwnerBean.ownerbean();
try{
Class.forName("com.mysql.jdbc.Driver");
theConnection = DriverManager.getConnection("jdbc:mysql:///petback2", "root", "***********");
String sownerid;
sownerid = req.getParameter("getownerID");
int vownerid;
vownerid = Integer.parseInt((String)sownerid);
String query = "";
query = "select * from powners WHERE ownerid = '" + sownerid + "'";
// query = "select * from powners WHERE oname like '" + t11 + "%" + "' ORDER BY oname LIMIT "+ offset +",5";
Statement theStatement=theConnection.createStatement();
ResultSet rs=theStatement.executeQuery(query); //Select all records from emaillists table.
String vostreet;
//int kount = 0;
while (rs.next())
{ // begin while
//kount = kount + 1;
//if (kount < 2)
//{ //begin k if
//echo "formObj.ownerid.value = '".$inf["ownerid"]."';\
";
//document.forms['petsedit']
//echo "window.opener.$('input#ownerid').val('" . $fowners_Row["ownerid"] ."');\
";
out.println("window.opener.$('input#ownerid').val('" + rs.getString(1) + "');\
");
//out.println("document.forms['petsedit'].ownerid.value = '" + rs.getString(1) + "';\
");
out.println("window.opener.$('input#petowner').val('" + cb.convJS(rs.getString(2)) + "');\
");
//out.println("document.forms['petsedit'].petowner.value = '" + rs.getString(2) + "';\
");
if (rs.getString(3) != null && rs.getString(3).length() > 0)
{
vostreet = rs.getString(3);
//out.println("formObj.ostreet.value = '" + rs.getString(3) + "';\
");
}
else
{
vostreet = "";
}
out.println("window.opener.$('input#ostreet').val('" + cb.convJS(vostreet) + "');\
");
//out.println("document.forms['petsedit'].ostreet.value = '" + cb.convJS(vostreet) + "';\
");
//} // end k
} //end while
//t1 = convJS(t1)
rs.close();//Close the result set
theStatement.close();//Close statement
theConnection.close(); //Close database Connection
}catch(Exception e){
out.println(e.getMessage());//Print trapped error.
}
}
@Override
public void destroy(){
}
}
From a jsp page, I have an onclick to bring up a lookup table to autofill
several fields:
<tr><td>ownerid</td>
<td><input type="Text" name="ownerid" id="ownerid" size="20" value="${row.ownerid}"/>
<!--<a href="#" onclick="getowner('1','zoooz','0');" id="idlookup1">find</a>-->
<a href="#" onclick="WriteBack();"> find </a>
<%--<a id="fsearch" href="#"> [find ] </a>--%>
</td></tr>
Theres a lot to all of this, I believe if you learn some basic ajax calls with jquery you will get it.
I have no words to express my gratitude!! thanks a lot u made my day 
Hi, I Have managed to create the post back using simple AJAX and Jsp.
Basically the onchange event calls the AJAX coe which calls an external JSP which fetches the values returns them to AJAX and posts them on the original JSP page. I was wondering if it was possible to either trigger two JSP pages with AJAX to produce a jobs table apart from filling in the two textboxes… I have tried to fiddle around with the code but I have managed to go nowhere.
Any help would be much apreciated. I haven’t used jQuery yet and if I can go without that would be a bit better …
What do you mean exactly by, “trigger two JSP pages with AJAX to produce a jobs table apart from filling in the two textboxes?”
If you want to grab data from two different methods or sources (a mash-up) and trying to fill a single data grid then you probably need to implement an OpenAjax hub.
OpenAjax Hub 2.0 Specification Publish Subscribe Overview - MemberWiki
PageBus 2.0 is a decent opensource OA 2.0 implementation from Tibco.
You can accomplish the same thing using jquery properly but if you want to use straight forward js then you could do worse than reading up on OpenAjax if nothing more to understand basic MVC ideas in javascript.
Hey Sorry for not being clear in my explanation.
Basically what I need at this point is having a combo box and 2 textboxes + 1 div area. When I select a value from a combo box with Client IDs, Textbox 1 will fill itself with address and text box 2 with city while the div area will generate a table of jobs pending. So far I have managed to create the autofill text boxes. I am not sure though of how should I tackle the part of getting the table to the div area …
Well you just need multiple ajax calls import the data into the page.
var DruAPP = {
clients: [],
addresses: [],
jobsPending: [],
combo: null,
input1: null,
input2: null,
div: null,
init: function() {
var self = this;
self.combo = self.getByID("combo-box");
self.input1 = self.getByID("input1");
self.input2 = self.getByID("input2");
self.div = self.getByID("div");
self.getClients();
self.getAddresses();
self.getJobsPending();
//call your bindings here as well like self.bindListenderCombo(self);
},
getByID: function(el) {
return document.getElementById(el);
},
getClients: function() {
//do Ajax here and assign the json data to clients
},
getAddresses: function() {
//do Ajax here and assign the json data to addresses
},
getJobsPending: function() {
//do Ajax here and assign the json data to jobsPending
},
//Add your binding listener logic and mash-up logic under here
//if you need to use jQuery or Prototype inside a member function
//you'll want to probably pass self into the function because scope
//may change this to something else. see comment in init function.
}
}
However you handle document loading like onLoad (yuck) or a document.ready you’ll want to call DruAPP.init() and it will initialize your singleton object. Your listeners will just work if done this way. I suggest you use a javascript framework like jQuery or Dojo.
Also, I would rethink your application data and do your data load lifting via SQL. Essentially you could have a single Ajax call to populate a single json object (DruAPP.data instead of DruAPP.clients, DruAPP.addresses and DruAPP.jobsPending).