SplineTech AJAX Combo Table
Control is an AJAX multiple field database search drop-down table control (AJAX
combobox).
Start typing and table appears. Hit enter and values are pasted!
Simple. Effective. Gets the job done.
Use it on your site today!
Just set parameters!
Does it use javascript libraries like JQuery or prototype.js?
No, it's completely free of third party code and does not require any libraries
Which browsers are supported?
All of them: Safari, Safari Mobile, Opera, IE, Firefox, Chrome.
How could it be?
By not using XML transformation and by providing a simple <table> element as an output to AJAX request we eliminated the source of incompatibility issues between browsers.
Why do you not use XML, when everybody else is using it?
We saw that it's possible to send a ready HTML pieces of code and paste them into the page unaltered, therefore there was absolutely no need in XML and in fact in our view using XML is dangerously redundant and will introduce lots of compatility issues down the read.
But what about styling?
The styling is completely controlled by CSS.
How do you style the resulting table if it contains just plain HTML?
The table tag is inserted into a <div> tag that was already there hidden. By setting the class attribute of that div tag we turn on CSS for the table and our style sheet defines the styles of each td element under the div with that style. In fact that style sheet is in a separate file name dan_ajax_look.css. So we don't need XML to style things, we just use CSS. We believe it's a much simpler and smarter way of achieving this goal.
What is the advantage of your approach of sending pure <table> as a result versus sending an XML?
Major advantage is transparency. Now you can view exactly what is sent and customize it if you like, the way you like. As opposed to sending an XML which is then somehow translated into HTML by some strange logic usually embedded into another monster XSL, which is essentially a programming language in itself, so when you need to change something or just understand what it does, you are completely lost. Transparency is achieved with our design. You can adapt our ASP server side sample to any technology, because it's transparent.
How does it all work together?
Easy! When you type anything in our <input> tag, onkeyUp is called on the input box. It calls ajax_key_up. By passing the parameters you make it do what you want. Notable you pass a parameter of a URL to call, which Recordset Fields to show in the resulting table, the Titles of each those fields, which input box in HTML corresponds to which Field in recordset, etc. So you tell it to put the value of this Field from recordset into this <input> box, or a <select> tag. You also specify how many letters should be entered before it starts searching, what's the pageup/pagedown size, if several input boxes should be linked, then what are their IDs and which one is the leftmost one to which the resulting table should be aligned.
It looks like a lot of things to remember
Once you will see it in action you will see it clearly, because the design is very simple.
What happens next?
When ajax_key_up calls your URL it passes several of those parameters to it through query string. Among which you will get the values of the input boxes you specified. Take those values, make a SQL statement and generate a Recordset. That's your job. Pass that recordset to gen_ajax_table function that we provide and it generates a properly formatted <table>. It takes all the parameters it needs itself from QueryString.
The beauty of our design is that this function gen_ajax_table is the same for everybody, it's the parameters that make it do different things. They tell it how many columns in the resulting tables, which fields go where and what are their titles.
If I want to put value in a hidden input box from a field that's not displayed, can I do that?
Yes. You don't have to display all fields you use.
I need to call a my own javascript function when user selects a row in your table, can I do that?
Yes, ajax_key_up has a string parameter that is a javascript that is executed when you select a row.
Could you show sample code pieces and explain how this demo works?
Sure.This is an ASP page. It includes our server-side part of the control:
<!-- #include file="spline_ajax_asp.inc" -->
It contains a function that generates proper <input> tag with onkeyup call to ajax_key_up and all parameters.
As you can see each row contains 4 input boxes all connected to each other. This code generates an ajax input box
<%
s = insert_ajax_input_gen(_
input_name,_
the name and ID of the <input> tag
input_value,_
initial value
input_style,_
css style of the input box
ajax_combo_width,_
width of the popup table
url,_
URL which to call
min_chars,_
minimum number of letters before the URL is called
a list of recordset filed names that will be shown in the resulting table: "fn,ln,title,comp"
field_titles,_
"First Name,Last Name,Title,Company"
onclick_additional_call,_
"your_javascript_function(...);" that will be called onclick of the row
title_widths,_
"100px,100px,.." or "", the widths of each column in resulting table
align_to_id,_
the ID of <input> tag that the resulting table is aligned under.
asp_parameter_names,_
the names of asp parameters: "first_name,last_name,..."
asp_parameter_input_id_values)
the corresponding <input> ids:"input_first_name,input_last_name,..." where the values are
%>
<td><%=s%></td>
What about the server-side?
The ASP that processes the URL is much simpler.
First it includes the same include file
<!-- #include file="spline_ajax_asp.inc" -->
Then you take the values of parameters, the names of which you specified in asp_parameter_names.
Prepare your SQL request and get a recordset with data.
And call gen_ajax_table(Recordset)
And that's it.
<!-- #include file="spline_ajax_asp.inc"-->
<%
dim RecordSet
fn =
replace(cstr(Request.QueryString("fn")),"'","''") & "%" 'search value keyed by user
ln =
replace(cstr(Request.QueryString("ln")),"'","''") & "%" 'search value keyed by user
company =
replace(cstr(Request.QueryString("company")),"'","''") & "%" 'search value keyed by user
title =
replace(cstr(Request.QueryString("title")),"'","''") & "%" 'search value keyed by user
session("CurrentStrSQL") = "select top 200 * from full_names where (first_name like '" & fn &"') and (last_name like '"&ln&"') and (company like '"&company&"') and (title like '"&title&"') order by first_name ASC, last_name ASC, company ASC"
set RecordSet =
DataConn.Execute(session("CurrentStrSQL"))
call gen_ajax_table(RecordSet)
%>
gen_ajax_table reads all additional parameters like show_fields and titles, etc and generates the <table> element only.
Our javascript in your HTML receives the <table>..</table> tag and displays it.
How easy is it to adapt to other server-side technology like PHP?
It's very easy. The source code you will get for ASP is straightforward and has a comment on every line of code.
Your order is secure.
Instant product download. No tax for US, EU and Worldwide. Pricing in effect for limited time only. Customization available upon request.
Product
Cost
US Dollars
Cost
EUR
SplineTech Ajax Control with FULL SOURCE code
$90
Please click PayPal's Return to Seller button
right after ordering for full retail product download links.
We securely accept all major worldwide credit and debit cards which are processed
instantly, with all product download links available on our order
confirmation page (click PayPal's Return to Seller button
after ordering to return to our site for download links).
We proudly accept payments with PayPal and are a long-time PayPal Verified Merchant. We do not collect sales
taxes
for US customers, no VAT for EU residents, and no PayPal account
required.
