Download
1 / 18
180 likes | 189 Views
Learn how to integrate Lasso 9 Progress Bar with jQuery for real-time status updates, multiple file uploads, and form data submission.
E N D
Advanced jQuery and Lasso Integration • By Steffan Clinesteffan@execuchoice.net
Real time status No Flash or Java Flexible methods – AJAX or standard for submission Upload multiple files AND form data all at the same time Relies on the new L9 Upload Tracker and jQuery
Lasso 9 Progress Bar 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.
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
To Do Convert the Javascript to a jQuery plugin. Change the way the time remaining is calculated. Lasso 9 Progress Bar
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
USPS Address Validation Examples Validate an address and get a true or falseusps_validate(-userid=’xxxx’, -address1='6406 Ivy Lane', -city='Greenbelt’, -state='MD’ )->validate Result => trueValidate 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.
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.
Using 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.
Using JSON data with Lasso and jQuery 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 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. DemoCheck out the demo in action.
Using JSON data with Lasso and jQuery 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>
Using JSON data with Lasso and jQuery 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); DemoCheck out the demo in action.
