Advanced jQuery and
Lasso Integration
By Steffan Cline
steffan@execuchoice.net
Advanced jQuery and Lasso Integration
Lasso 9 Progress Bar
Advanced jQuery and Lasso Integration
1.
Real time status
2.
No Flash or Java
3.
Flexible methods – AJAX or standard for submission
4.
Upload multiple files AND form data all at the same time
5.
Relies on the new L9 Upload Tracker and jQuery
Advanced jQuery and Lasso Integration
History
Initially under LP8 this was not achievable with one solution. I wrote an entire proxy server in Lasso 8 which
emulated the built in file uploads for the purpose of reporting status back to the browser in virtually the same
fashion as is now achievable in Lasso 9. Now, this is all built in thanks to the mod_lasso9 and Upload Tracker
with far less overhead.
The upload tracker was added in Lasso 9.1 in conjunction with mod_lasso9 for the purpose of offering real time
updates on the form submission with file uploads. Previously, people have used many different hacked methods
but few are as reliable and effective as Lasso’s built in upload tracker. Documentation has not yet been
formalized for this new tool. In this presentation, you will be given a demonstration of how it is used along with
explanation of the key parts. Code samples will be available.
Lasso 9 Progress Bar
Advanced jQuery and Lasso Integration
The method which will be used most often is upload_tracker->check(ID). The ID is a unique upload ID which you
will generate within your form. An example from the demo would be
<input type="hidden" name="_lasso_upload_tracker_id” value="[lasso_uniqueid]”>
When your form is submitted, Lasso will begin parsing the form data and see the _lasso_upload_tracker_id
parameter and will use that as the key to the status of the form submission/file upload.
So, when the source is viewed, you will see the following.
<input type="hidden" name="_lasso_upload_tracker_id” value="a9a5d209-24ac-4ae4-b373-3b90f26b19fc”>
Subsequent calls to upload_tracker->check(‘a9a5d209-24ac-4ae4-b373-3b90f26b19fc’) after the form is
submitted will return the current amount received, total and current file at the given moment it is called each time.
This can be done many different ways but for the purpose of the demo, JSON data will be sent back to the
browser to ensure a light load and responsive server.
Time to see the demo in action!
Lasso 9 Progress Bar
Advanced jQuery and Lasso Integration
To Do
•
Convert the Javascript to a jQuery plugin.
•
Change the way the time remaining is calculated.
Lasso 9 Progress Bar
Advanced jQuery and Lasso Integration
USPS Address Validation
Advanced jQuery and Lasso Integration
•
•
•
•
•
Available for Lasso Professional 8 and Lasso 9
Fast and Lightweight
Free!
Sign up with USPS (can be tedious as they employ morons)
Can be used to simply validate or get a correctly formatted address
USPS Address Validation
Advanced jQuery and Lasso Integration
Examples
Validate an address and get a true or false
usps_validate(-userid=’xxxx’,
-address1='6406 Ivy Lane',
-city='Greenbelt’,
-state='MD’
)->validate
Result => true
Validate an address and get the results. If the result is true, it will return the corrected results if it is able
to match the address. If not, the corrected address data members will be an empty string.
usps_validate(-userid=’xxxx’,
-address1='6406 Ivy Lane',
-city='Greenbelt’,
-state='MD’
)->validate & getAttributes
Result => map(address1 = 6406 Ivy Lane, address2 = , city = Greenbelt, corrected_address1 = 6406 IVY LN,
corrected_address2 = , corrected_city = GREENBELT, corrected_state = MD, corrected_zip = 20770,
corrected_zip4 = 1440, state = MD, zip = , zip4 = )
Demo
Check out the demo in action.
USPS Address Validation
Advanced jQuery and Lasso Integration
Using JSON data with
Lasso and jQuery
Advanced jQuery and Lasso Integration
There are needs to dynamically load data via AJAX to simplify and lighten
code. Pages can load what is needed as it’s needed rather than loading the
page on load with mass arrays of data.
In Lasso 8, JSON data is handled via the encode_json and decode_json tags.
In L9 the native versions are the json_serialize and json_deserialize. These do
all the hard part of encoding data to and from the format for the ease and
speed of exchange. If you do not need the complexity of XML, then utilize
JSON data.
Using JSON data with Lasso and jQuery
Advanced jQuery and Lasso Integration
In this example, you will see how use an autocomplete widget from the jQuery
UI.
Download the latest jQuery UI and place the script and link tags into your head
section accordingly.
$(document).ready(function() {
$(“input[name=animals]”).autocomplete({
source: “animals.lasso”,
minLength: 2
});
});
<input type=“text” name=“animals” size=“20”>
The lasso side to this is just as simple. jQuery UI has done all the heavy lifting
for you on within the library.
Using JSON data with Lasso and jQuery
Advanced jQuery and Lasso Integration
Lasso Professional 8 Code Example
if( action_param('term')->size > 1 );
var(
'results' = array,
'term'
= string_replace(encode_sql(action_param('term')),-find='*',-replace='%’)
);
inline(-database=’somedb',-table=’animals',-maxrecords=all,
-sql='select id, name, value from animals where name like "%' + $term + '%" order by name;');
records;
$results->insert( map('id'=field(’id'),'label’=field(’name’),'value'=field(’value')) );
/records;
/inline;
content_type(client_browser >> 'MSIE' ? 'text/javascript' | 'application/json');
content_body(encode_json($results));
/if;
Lasso 9 Code Example
if( action_param('term')->size > 1 ) => {
local(
results = array,
term = string_replace(encode_sql(action_param('term')),-find='*',-replace='%’)
);
inline(-database='simplesolutions',-table='animals',-maxrecords=all,
-sql='select `id`,`name`,`value` from animals where `name` like "%' + #term + '%" order by name;') => {
records => {
#results->insert(map('id'=field('id'),'label'=field('name'),'value'=field('value')));
}
}
content_type(client_browser >> 'MSIE' ? 'text/javascript' | 'application/json');
content_body(json_serialize(#results));
}
Using JSON data with Lasso and jQuery
Advanced jQuery and Lasso Integration
Data Returned
•“id”
is used on the client side should you need it for any co-dependent selection.
•“label”
is what is displayed like a description. Can be anything you want.
•“value”
is what will be placed in the text input when complete.
•The
reason for the toggle on the content_type is because of hard research and lost revenue, I discovered that some versions of
Internet Explorer choke on the application/json data by not knowing how to properly handle the data even thought he core of the
browser is able to interpret the data. Ensure you have this on all pages with JSON data being served. Perhaps one day when IE5,
6,7 and some versions of 8 are gone, this hack will not be needed.
•Content_body
is used to ensure that the only data returned is the JSON data. This will remove any surrounding whitespace and
ensure that any accidental output from your script above or below the section is not returned.
Demo
Check out the demo in action.
Using JSON data with Lasso and jQuery
Advanced jQuery and Lasso Integration
In this demo, you will see how to build simple dependent selects using jQuery and Lasso 9 code. Have
you needed to have a <select> that was dependent upon another <select> value? For this example, we
will use a simple table of data containing autos with a year, make and model. Same as before, include
the jQuery library. This demo is not reliant on the jQuery UI.
The javascript:
$(document).ready(function() {
$("select[name=year]").change(function(){
$.get('auto-finder.lasso',{x:this.value},function(response) {
$("select[name=make]").html(response);
$("select[name=model]").empty();
});
});
$("select[name=make]").change(function(){
$.get('auto-finder.lasso',{y:this.value},function(response) {
$("select[name=model]").html(response);
});
});
});
The HTML:
<select name="year”>
<option value=""></option>
[
loop(-from=2012,-to=1965,-by=-1)
]
<option value="[loop_count]">[loop_count]</option>
[
/loop
]</select>&nbsp;
<select name="make"></select>&nbsp;
<select name="model"></select>
Using JSON data with Lasso and jQuery
Advanced jQuery and Lasso Integration
Now, the moment you’ve been waiting for… Lasso 9 Code!
local( out::string='' )
if( action_param('x')->size ) => {
inline(-database='simplesolutions',-table='vehicles',-maxrecords=all,
-sql='select distinct make from vehicles where `year` = "' + encode_sql(action_param('x')) + '" order by make;') => {
records => {
#out += ('<option value="' + field('make') + '">' + field('make') + '</option>')
}
}
}
if( action_param('y')->size ) => {
inline(-database='simplesolutions',-table='vehicles',-maxrecords=all,
-sql='select distinct model from vehicles where make = "' + encode_sql(action_param('y')) + '" order by model;') => {
records => {
#out += ('<option value="' + field('model') + '">' + field('model') + '</option>')
}
}
}
content_body(#out);
Demo
Check out the demo in action.
Using JSON data with Lasso and jQuery
Advanced jQuery and Lasso Integration
Q&A
Advanced jQuery and Lasso Integration
Demo of HD Ticket If
Time Permits