Win a copy of Murach's Python Programming this week in the Jython/Python forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

How to add autocomplete to dynamically generated textboxes fetched from database in jsp  RSS feed

 
Waseem Akram
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi, I am new to jsp, i am trying to create dynamic text boxes with incrementing their id's so that each text box have different id using javascript.
I want to autocomplete each text box with value fetched from data base.
this facility is like adding more items to purchase(which are available in database)
i am using mysql database
please help me out
thanks in advance
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65832
134
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Where is your code? What problems are you having with it?
 
Waseem Akram
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi sir, thank you for the reply.
m sorry for not posing my code,
i am using jquery for creating dynamic text boxes, and autocomplete is filled with jquery code itself
i am unable to get autocomplete list, also the value which i try to enter that value is unable to pass in the next page
here is my code:

1. index.jsp

<html>
<head>
<style type="text/css" title="currentStyle">
@import "css/layout-styles.css";
@import "css/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="js/jq-ac-script.js"></script>
</head>
<body>
<div class="content inpad">
<div id="messageBox" style="margin-left:15px; padding-left:20px; padding-bottom:5px; border:1px #ccc solid; display:none;"></div>
<form action="" id="itemsForm">
<table id="itemsTable" class="general-table">
<thead>
<tr>
<th></th>
<th>Item Code</th>
<th>Item Description</th>
<th>Item Qty</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr class="item-row">
<td></td>
<td><input name="itemCode[]" value="" class="tInput" id="itemCode" tabindex="1"/> </td>
<td><input name="itemDesc[]" value="" class="tInput" id="itemDesc" readonly="readonly" /></td>
<td><input name="itemQty[]" value="" class="tInput" id="itemQty" tabindex="2"/></td>
<td><input name="itemPrice[]" value="" class="tInput" id="itemPrice" readonly="readonly" /> </td>
</tr>
</tbody>
</table>
</form>
<a href="#" id="addRow" class="button-clean large"><span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Add Item</span></a>
</body>
</html>

2. jq-ac-script.js

$(document).ready(function(){

// Use the .autocomplete() method to compile the list based on input from user
$('#itemCode').autocomplete({
source: 'data/item-data.jsp',
minLength: 1,
select: function(event, ui) {
var $itemrow = $(this).closest('tr');
// Populate the input fields from the returned values
$itemrow.find('#itemCode').val(ui.item.itemCode);
$itemrow.find('#itemDesc').val(ui.item.itemDesc);
$itemrow.find('#itemPrice').val(ui.item.itemPrice);

// Give focus to the next input field to recieve input from user
$('#itemQty').focus();

return false;
}
// Format the list menu output of the autocomplete
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
.appendTo( ul );
};

// Get the table object to use for adding a row at the end of the table
var $itemsTable = $('#itemsTable');

// Create an Array to for the table row. ** Just to make things a bit easier to read.
var rowTemp = [
'<tr class="item-row">',
'<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
'<td><input name="itemCode[]" class="tInput" value="" id="itemCode" /> </td>',
'<td><input name="itemDesc[]" class="tInput" value="" id="itemDesc" readonly="readonly" /></td>',
'<td><input name="itemQty[]" class="tInput" value="" id="itemQty" /></td>',
'<td><input name="itemPrice[]" class="tInput" value="" id="itemPrice" /></td>',
'</tr>'
].join('');

// Add row to list and allow user to use autocomplete to find items.
$("#addRow").bind('click',function(){

var $row = $(rowTemp);

// save reference to inputs within row
var $itemCode = $row.find('#itemCode');
var $itemDesc = $row.find('#itemDesc');
var $itemPrice = $row.find('#itemPrice');
var $itemQty = $row.find('#itemQty');

if ( $('#itemCode:last').val() !== '' ) {

// apply autocomplete widget to newly created row
$row.find('#itemCode').autocomplete({
source: 'data/item-data.jsp',
minLength: 1,
select: function(event, ui) {
$itemCode.val(ui.item.itemCode);
$itemDesc.val(ui.item.itemDesc);
$itemPrice.val(ui.item.itemPrice);

// Give focus to the next input field to recieve input from user
$itemQty.focus();

return false;
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
.appendTo( ul );
};
// Add row after the first row in table
$('.item-row:last', $itemsTable).after($row);
$($itemCode).focus();

} // End if last itemCode input is empty
return false;
});

$('#itemCode').focus(function(){
window.onbeforeunload = function(){ return "You haven't saved your data. Are you sure you want to leave this page without saving first?"; };
});

}); // End DOM

// Remove row when clicked
$("#deleteRow").live('click',function(){
$(this).parents('.item-row').remove();
// Hide delete Icon if we only have one row in the list.
if ($(".item-row").length < 2) $("#deleteRow").hide();
});

3. item-data.jsp


<%@page import="com.sun.org.apache.bcel.internal.generic.ARRAYLENGTH"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.sql.Connection" %>
<%@page import="java.sql.DriverManager" %>
<%@page import="java.sql.SQLException" %>
<%@page import="java.sql.*" %>
<%@page session="true" %>
<%@ page language="java" import="net.sf.json.JSONArray" %>

<%

String input = request.getParameter("term");

Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con=DriverManager.getConnection("jdbc:mysql//localhost:3306/itemsdb","root","root");
ArrayList return_arr =new ArrayList();
//String return_arr[] = new String[10];
try
{
Statement st = con.createStatement();
ResultSet rs = st.executeQuery("select * from items where itemCode LIKe %'"+input+"' % limit 5");
while(rs.next())
{
ArrayList row_arr = new ArrayList();
row_arr.add(rs.getString(2));
row_arr.add(rs.getString(3));
row_arr.add(rs.getString(4));
return_arr.add(row_arr);
//out.println(return_arr);
}
JSONArray json_encode=new JSONArray();
json_encode.add(return_arr);
%>
<%
}
catch(Exception e)
{
out.println(e.getMessage());
}
%>

thanks in advance.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!