Initial page load should display the "Slidertype Settings" information
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 user calls the page auto1.lasso, which is a standalone example here but actually is part of a content management system for administering jQuery-based NivoSlider or SudoSlider data.
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';
$SliderTypeIDSubmit = '1';
// 'SliderTypeID NOT selected, setting to '+($SliderTypeIDSubmit)+'<br>\n';
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.
2. Files used here are part of the jQuery UI. See especially the jQuery.ajax() command. All the files you need are included in the demo; this link is included as a learning resource.