Loading the content of a PanelBar using Ajax

In the previous recipe, we looked at how a PanelBar widget can be created using the markup present in the page. In this recipe, we will look at how the content of each list item in the PanelBar can be loaded by fetching the same from the server using Ajax.

As observed in the previous recipe, the content for each list item was wrapped inside a div element. By doing so, the size of the page had increased, which in turn would have affected the performance of the application. A workaround to this is to load the content of each list item when it is requested using Ajax.

How to do it…

Let's consider the same example; here, the list headings are specified in the markup and the div elements are used as placeholders. These placeholders will contain the data fetched from the server at runtime:

<ul id="panelBar" style="width: 400px">
   <li>
      Destinations
      <div></div>
   </li>
   <li>
      Flights            
 ...