A guide to using Lasso 9 and jQuery

The article describes how to communicate between an HTML page on a client browser and Lasso 9 on the server using jQuery AJAX.

The scenario used is a select form element with grocery item categories, with an onChange requirement to load the grocery items assigned to that category and display in a target div.

Full working files referenced in this article can be downloaded here: lasso-ajax-jquery.zip

Demo

Choose a value from the select list below and the contents of the DIV below it will change accordingly.

Select a grocery category:VegetablesJuicesBread

The client side HTML (a.k.a. browser)

The first requirement is to add the reference to the jQuery library. Include the following HTML in your document to load the jQuery library.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

The form select and target DIV would look like this:

<!-- The select list used to trigger the jQuery -->
<select id="groceryCategory" name="groceryCategory">
     <option value="">Select a grocery category:</option>
     <option value="vegetables">Vegetables</option>
     <option value="juices">Juices</option>
     <option value="bread">Bread</option>
</select>

<!-- The target DIV to send information to -->
<div id="groceryItems"></div>

Now create some jQuery to watch for the change. This script watches for the onChange event on the select object in HTML, and if the value is not empty (as the first option is) then it will trigger an alert.

<script type="text/javascript">
	$(document).ready(function(){
		$('#groceryCategory').change(function(){
			if($(this).val().length > 0){
				alert($(this).val())
			}
		});
	});	
</script>

 

Adding jQuery AJAX functionality

The next step is to extend this action by attaching the AJAX integration. This script will now take a select item's selected value and send it via jQuery's AJAX functionality to 'jq.lasso' It will expect a JSON formatted result to be returned. It will look for "items" value in the return and replace the contents of our target div with the HTML in the "items" pair.

Note that it is creating a javascript object to contain the parameters that need to be passed to Lasso in this request. It is possible to add as many items to this object as needed and each is read by Lasso as an action_param name/value pair.

<script type="text/javascript">
	$(document).ready(function(){
		$('#groceryCategory').change(function(){
			if($(this).val().length > 0){
				var thisObj = new Object();
				thisObj.groceryCategory = $(this).val();
				$.ajax({
					url:		"jq.lasso",
					data:		thisObj,
					async:		true,
					type:		'post',
					cache:		false,
					dataType:	'json',
				
					success: function(xhr) {
						$('#groceryItems').html(xhr.items);
						
					}
				});
			}
		});
	});	
</script>

 

The server side

The important things to note from the above script:

• information is submitted to jq.lasso,
• the single param submitted is 'groceryCategory'
• it is a POST request
• the javascript expects a JSON formatted response
• the javascript variable with the response data is named 'items'

Providing information back to jQuery to complete the request.

The following script is the entire contents of jq.lasso:

// ==================================
/*
	Lasso & jQuery example response script
*/
// ==================================

// set the content type for Lasso to send back 
// so the browser can recognize this as JSON / XHR
content_type('text/javascript')

// create the map that will be used to encode as JSON
local(json = map)

// create the array to load items into to return 
local(itemarray = array)

// assign to a variable the groceryCategory POST param 
// submitted as part of the AJAX POST request
local(category = action_param('groceryCategory'))

// logic to determine what we wish to return
if(#category == 'vegetables') => {

	// add the items to the array
	#itemarray->insert('Carrot')
	#itemarray->insert('Potato')
	#itemarray->insert('Cucumber')
	#itemarray->insert('Tomato')
	#itemarray->insert('Leek')
	#itemarray->insert('Lettuce')
	#itemarray->insert('Peppers')
	#itemarray->insert('Peas')
	#itemarray->insert('Beans')

else(#category == 'juices')
	#itemarray->insert('Pineaple Juice')
	#itemarray->insert('Apple Juice')
	#itemarray->insert('Pear Juice')
	#itemarray->insert('Carrot Juice')
	#itemarray->insert('Grape Juice')
	#itemarray->insert('Mango Juice')

else(#category == 'bread')
	#itemarray->insert('Rye Bread')
	#itemarray->insert('White Bread')
	#itemarray->insert('Wholegrain Bread')
	#itemarray->insert('Sourdough')
	#itemarray->insert('French Bread')
	#itemarray->insert('Paninni')

else
	#itemarray->insert('No results.')
}

// insert the data to return into a map 
// ready to be converted to JSON
#json->insert('items'= #itemarray->join('<br />'))

// convert the map to a JSON string
local(xout = json_serialize(#json))

// It's a good practice to always trim whitespace 
// from the return string
#xout->trim

// output the JSON string to the document 
// to be returned to the browser
#xout

 

The return can be simulated by the following url for testing purposes: http://www.example.com/pathtoyourfile/jq.lasso?groceryCategory=bread

The return would look something like the following:

{"items": "Rye Bread<br />White Bread<br />Wholegrain Bread<br />Sourdough<br />French Bread<br />Paninni"}

 

Tip: If you use a browser with a web inspector such as Safari  you can view the actual requests being made and the responses from Lasso. This can be of significant assistance in debugging responses and viewing generated errors.

Addendum

It has been noted that the above jQuery could be simplified to the following:

$(document).ready(function(){
	$('#groceryCategory').change(function(){
		category = $(this).val()
		if(category != "")
			$.getJSON("jq.lasso?category="+category,function(xhr){
			$('#groceryItems').html(xhr.items);
		})
	});
});

(Thank you Ke Carlton)

Resources

• Using jQuery autocomplete with Lasso by Eric Landmann http://blog.landmanninteractive.com/2011/03/using-jquery-autocomplete-with-lasso/
• jQuery Fundamentals by Rebecca Murphey: http://jqfundamentals.com/legacy
• Essential JavaScript And jQuery Design Patterns by Addy Osmani: http://addyosmani.com/blog/essentialjsdesignpatterns/

Author: Jonathan Guthrie
Created: 4 Aug 2011
Last Modified: 5 Aug 2011