Advanced jQuery and Lasso Integration By Steffan Cline [email protected]

Advanced jQuery and Lasso

Integration

Advanced jQuery and Lasso

IntegrationBy Steffan Cline

[email protected] Steffan Cline

[email protected]

Advanced jQuery and Lasso IntegrationAdvanced jQuery and Lasso Integration

Lasso 9 Progress BarLasso 9 Progress Bar


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

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



HistoryInitially 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.

HistoryInitially 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.


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!

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!



To Do•Convert the Javascript to a jQuery plugin.

•Change the way the time remaining is calculated.

To Do•Convert the Javascript to a jQuery plugin.

•Change the way the time remaining is calculated.



USPS Address ValidationUSPS Address Validation


• 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

• 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




Examples

Validate an address and get a true or falseusps_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 = )

DemoCheck out the demo in action.

Examples

Validate an address and get a true or falseusps_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 = )



Using JSON data with Lasso and jQuery

Using JSON data with Lasso and jQuery


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.

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 jQueryUsing JSON data with Lasso and jQuery


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.

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.


Advanced jQuery and Lasso IntegrationAdvanced jQuery and Lasso IntegrationLasso 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));}

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));}



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.


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.



Advanced jQuery and Lasso IntegrationAdvanced jQuery and Lasso IntegrationIn 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> <select name="make"></select> <select name="model"></select>

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> <select name="make"></select> <select name="model"></select>



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);


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);




Q&AQ&A


Demo of HD Ticket If Time Permits

Demo of HD Ticket If Time Permits

Documents

Advanced jQuery and Lasso Integration By Steffan Cline [email protected]