Before or after performing a view transition, sometimes you may want to create a new target view content dynamically using an ajax call. There are several ways to lazy-load contents to update or create a view.

The _ItemBase class has a “url” property that allows you to specify an html fragment page or a JSON data that will become the new view content after performing the view transition. The content is loaded either with a sync XHR call or an async XHR call according to the value of the “sync” property. The _ItemBase class is a base class of ListItem, IconItem, TabBarButton, ToolBarButton, and IconMenuItem. You can use the url property from those subclasses.

If you perform a transition, a new view is created as a sibling of the current view by default. If you want to add it into another node, you can specify its node id with the urlTarget property.

Below is an example of an html fragment that represents a view. A parser (dojo.parser or dojox.mobile.parser) is called to parse the html fragment. The top level widget must be dojox.mobile.View or its subclass, because the entire html fragment will become a new transition target view. The new view will be created as a sibling of the current view. <script> tags cannot be included in the html fragment.

Below is an example of JSON data that represents a view. It is equivalent to the above html fragment example, and thus you will get the same view. However, note that an html fragment cannot always be converted to JSON, because when some items are placed into a hash, the order information is lost. No such information loss occurs with the html format.

ListItem can have an action handler by simply adding an onclick event handler as follows. You can control a view transition programmatically in your action handler. In that case, specify moveTo=”#” to disable the default view transition while displaying the arrow icon at the right of the list item. (If you omit the moveTo attribute here, the default view transition is disabled, and the arrow icon disappears to indicate that this item does not perform a view transition.)

In the action handler, you can update the transition target view, and then programmatically perform a transition to it as follows. The ListItem widget that initiated the action can be accessed via dijit.byNode(li). The transition can be performed by calling the transitionTo method of the source view.

In this example, the view content is loaded asynchronously, the destination view is updated with the loaded content, and then a transition is performed. The ProgressIndicator is used since the loading is async.

In this example, there is a dojox.mobile.ContentPane widget in the transition target view. dojox.mobile.ContentPane is a very simple container widget, so it can be thought of as a <div> with the “href” attribute. This example updates the ContentPane with an external html fragment, and then performs a transition.

myAction6=function(){varpane1=registry.byId("pane1");if(!pane1.domNode.innerHTML){// nothing has been loaded yetconnect.connect(pane1,"onLoad",this,function(){// onLoad fires when the content is readythis.transitionTo("view6");});pane1.set("href","fragment1.html");}else{this.transitionTo("view6");}}