Using jQuery and Lasso to Automatically Populate a Form
This article will show you how to create an AJAX-based autolookup that is triggered from making a selection on a dropdown. It gets the records via an AJAX request and populates a form based on the values in the database.
If you would like to get an idea how an AJAX request works, this article is for you. The example is modifying configuration settings for two different slider types (NivoSlider or SudoSlider), and is part of the itPage content management system. This article’s intended audience is web developers.
You will also need a working installation of MySQL and Lasso Professional. This code doesn’t use any custom tags, so you should be able to run it fairly easily. This code is tested on Lasso version 8.5.
How Autolookup Works – Code Walkthrough
The calling page (line 71 of auto1.lasso) contains this code:
The result of the AJAX request updates the HTML ID “SliderConfigs”, and this results in the configuration records being displayed. The utility of this is when (in this example) loading default configuration settings from upon adding a record. If no records are found a ghosted error message will display.
On initial page load there will be no value from the dropdown, so this bit of code sets the value:
// Process the request from the select Var('SliderTypeIDSubmit' = Action_Param('SliderTypeID')); If($SliderTypeIDSubmit != ''); // 'SliderTypeID selected: '+($SliderTypeIDSubmit)+'<br>\n'; Else; $SliderTypeIDSubmit = '1'; // 'SliderTypeID NOT selected, setting to '+($SliderTypeIDSubmit)+'<br>\n'; /If;
Installing the Examples
- Download the example files from the Resources link at the bottom of this article.
- Copy everything to the root of your webserver.
- Create a database named “jquery_demo”, then load the jquery_demo.sql file. You should see two tables created (cms_sliderconfig and cms_slidertype).
- Enable Lasso Security for the new database.
Autocomplete Database Lookup Example (Lasso Code)
Run the example by loading “auto1.lasso” file. Optionally, with Firebug running, check the response page. You should see an external call to “autolookup_p.lasso” which is the page that fetches records from the database and builds the output that is then displayed by the original (calling) page.
HINT: You can actually hit autolookup_p.lasso in a browser to see the partial HTML that is created. This is a pretty useful for debugging. Direct access to AJAS-based pages is also a security risk and should considered as a page to be protected.
See the screenshot (at the top of this article) for an example of what correct data should look like.
Autolookup is a great feature that can be added to your website to enhance the user experience, and can be used in quite a variety of ways. Hopefully you find these working examples helpful.
1. Download the Using jQuery Autocomplete with Lasso code for these examples. This should have all the files you need to run the examples.