Manipulating Tiggzi Components with jQuery Mobile

Do you know how to take advantage of custom JavaScript when working with Tiggzi visual components? You can easily access any Tiggzi component in JavaScript via the Tiggzi JavaScript API and manipulate it with the jQuery Mobile API. Here is an example of how to dynamically add items to a list using JavaScript.

On the page, we have the following components: a list named platformsList, a text input named newPlatformField, and a button.

We are going to execute custom JavaScript code on the button click event. Select the button first, go to Events tab in the right panel, and then add a Click event with an action called Run Custom JavaScript.

Paste in the following code:

var list = Tiggr("platformsList");
var newPlatform = Tiggr("newPlatformField").val();
list.append("<li><a>" + newPlatform + "</a></li>").listview("refresh");
Tiggr("newPlatformField").val("");

Note the way we address Tiggzi components using the Tiggzi API. In order to get the reference to the component with a particular name for use in JavaScript we use the following API call:

Tiggr("<component name>")

In the code above, we put a reference for a list component into a list variable and put the value of the text input into a newPlatform variable using the jQuery val function. Then, we use the append method to add a new item with the text we’ve entered in the field and refresh the view using the listview method. Finally, we clear the value of the input field.

Let’s test the project in the browser. As you might already know, we are working on Blackberry and Windows Phone support for Tiggzi, so let’s add them into our list.

You can try it yourself.

Updated 3/29/2012

The post was changed to reflect use of the Tiggzi JavaScript API.