RESPONSIVE JSON TABS

A jQueryUI tabbed panel getting JSON data

The previous example achieved many goals: a tabbed page, responsive, filled with some fake Ajax data (fetched by HTML static pages).
Now we want to improve that solution by fetching actual Ajax data, writing a real RESTful client application. This means that we must read data from a backend JSON page (see here), instead of reading them from static HTML pages. In this example we'll use the json_example_2.php backend page (see output).

To easy the porting process from this example page from an actual production page, the main JavaScript/jQuery script has been written into a library file: this file (available here) MUST BE included in the final page.

KNOWN ISSUE: there is a jQueryUI issue regarding the accordion menu: when the page was loaded on a small device, the accordion presented some weird behavior, since the odd numbered elements aside from the first (i.e. the elements 3, 5, 7 and so on) were not displayed correctly. To solve this we must consider the scenario "the page is opened on a small device, rather then resized". In other words we should load correct data into the accordion menu if the page is opened on a small device.

For details have a look to HTML code of this page.

Remark: the best practices concerning RESTful architecture suggest to use only plain HTTP endpoint, such as:

http://localhost/backend/json_example_2.php/title/1

and DO NOT use endpoints containing a query string, i.e.:

http://localhost/backend/json_example_2.php?title=1

However, in this example, we used a query string approach, because this allows to keep the server side (the json_example_2.php page) as simple as possible, without the need to use a REST framework allowing to create a "real" RESTful interface. This choice helps us to focus only on the client code (this very page).