The jQuery Library is built as an assynchronous system, in which every request will need one callback to handle the returned data. This is one of the main differences between this and the Java library. You may download the source code or the minified version file here.

Note: These libraries are known to work with Chrome, Safari, Opera, Firefox and Internet Explorer 10.

Documentation

The documentation of the jQuery library can be found here.

Examples

The library is very similar in usage to the Java Library, and like it, it resides in three main objects: TourismVisitor, TourismClient stub and Data Reader. The TourismVisitor is responsible for the creation of the TourismClient stub. Both the last one and the DataReader are equal in nature to the presented Java Library.

Making a TourismClient Stub

To create a TourismClient stub we simply use the TourismVisitor class. Unlike the TourismClientFactory, this class always visits the given URL, as it does not store any previous REST calls or TourismClient stubs. An example is shown below:

<!-- or any jquery lib that you wish -->
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<!-- load the library -->
<script type="text/javascript" src="js/jquery.citysdk-tourism.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
    init("http://some-url.com/");
});
 
// make the call
function init(uri) {
    // handleVisit is the callback for a success call, handleError for error situations
    TourismVisitor.visit(uri, handleVisit, handleError);
}
 
// method to handle the erroneous calls
// its parameters are similar to an Ajax call
function handleError(jqXHR, textStatus, errorThrown) {
    console.log(jqXHR, errorThrown, textStatus);
}
 
// method to handle the data
// in this case it will receive the client as a first parameter
function handleVisit(client, textStatus, jqXHR) {
    var mClient = client;
    // do some work
}
</script>

Using the TourismClient Stub

The TourismClient stub has similar methods to the ones shown in the Java Library, however, and as previously mentioned, a callback is needed since all the requests are made in an assynchronous matter. It will be presented similar examples to the ones shown in the Java Library section.

Getting a List of POI-based Objects

A list of POI-based objects is requested through the use of a parameter array which contains the query parameters to make a given request. The example below shows how to get a list of Events:

<!-- or any jQuery lib that you wish -->
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<!-- load the library -->
<script type="text/javascript" src="js/jquery.citysdk-tourism.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
    init("http://some-url.com/");
});
 
// make the call
function init(uri) {
    // handleVisit is the callback for a success call, handleError for error situations
    TourismVisitor.visit(uri, handleVisit, handleError);
}
 
// method to handle the erroneous calls
// its parameters are similar to an Ajax call
function handleError(jqXHR, textStatus, errorThrown) {
    console.log(jqXHR, errorThrown, textStatus);
}
 
// method to handle the visit
// in this case it will receive the client as a first parameter
function handleVisit(client, textStatus, jqXHR) {
    var mClient = client;
 
    // initialize the wanted parameters
    var mClient = client, 
        categories = ["music", "live"], 
        tags = "rock", 
        parameters = {
            "category" : categories,
            "tag" : tags
        };
 
    mClient.useVersion("1.0");
    try {
        mClient.getEvents(parameters, handleEvents, handleError);
    } catch(e) {
        console.log(e);
    }
}
 
// method to handle the data
// in this case it will receive a list of Events as a first parameter
function handleEvents(data, textStatus, jqXHR) {
    var listEvents = data;
    console.log(listEvents);
}
</script>
Getting a list of Categories or Tags

Just like in the Java Library, requesting a list of Categories can be done by specifying which list is needed (POIs, Events or Routes). Getting a list of Tags will be similar.
An example is shown below:


<!-- or any jQuery lib that you wish -->
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<!-- load the library -->
<script type="text/javascript" src="js/jquery.citysdk-tourism.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
    init("http://some-url.com/");
});
 
// make the call
function init(uri) {
    // handleVisit is the callback for a success call, handleError for error situations
    TourismVisitor.visit(uri, handleVisit, handleError);
}
 
// method to handle the erroneous calls
// its parameters are similar to an Ajax call
function handleError(jqXHR, textStatus, errorThrown) {
    console.log(jqXHR, errorThrown, textStatus);
}
 
// method to handle the visit
// in this case it will receive the client as a first parameter
function handleVisit(client, textStatus, jqXHR) {
    var mClient = client,
        parameters = {
            'list': parameterTerms.POIS
        };
    try {
        mClient.getCategories(parameters, handleCategories, handleError);
    } catch(e) {
        console.log(e);
    }
}
 
// method to handle the data
// in this case it will receive a Category list as a first parameter
function handleCategories(data, textStatus, jqXHR) {
    var categories = data;
    console.log(categories);
}
</script>
Getting a Single POI-based Object

Once again, and just like the Java Library, getting a single POI-based object (like POIs, Events or Routes) can be made by using the base and the id of such object like shown below:


<!-- or any jQuery lib that you wish -->
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<!-- load the library -->
<script type="text/javascript" src="js/jquery.citysdk-tourism.min.js"></script>
 
<script type="text/javascript">
var mClient;
 
$(document).ready(function() {
    init("http://some-url.com/");
});
 
// make the call
function init(uri) {
    // handleVisit is the callback for a success call, handleError for error situations
    TourismVisitor.visit(uri, handleVisit, handleError);
}
 
// method to handle the erroneous calls
// its parameters are similar to an Ajax call
function handleError(jqXHR, textStatus, errorThrown) {
    console.log(jqXHR, errorThrown, textStatus);
}
 
// method to handle the visit
// in this case it will receive the client as a first parameter
function handleVisit(client, textStatus, jqXHR) {
    mClient = client;
 
    // initialize the wanted parameters
    var categories = ["museum", "garden"], 
        tags = "nature", 
        parameters = {
            "category" : categories,
            "tag" : tags
        };
 
    mClient.useVersion("1.0");
    try {
        mClient.getPois(parameters, handlePois, handleError);
    } catch(e) {
        console.log(e);
    }
}
 
// method to handle the data
// in this case it will receive a list of POIs as a first parameter
function handlePois(data, textStatus, jqXHR) {
    var list = data.poi;
 
    // go through the list of POIs
    for (var key in list) {
        var poi = list[key];
 
        // and get a POI with the given base and id
        // set the corresponding callbacks for data and error situations
        mClient.getPoi(poi.base, poi.id, handlePoi, handleError);
    }
}
 
// method to handle the data
// in this case it will receive a single POI as a first parameter
function handlePoi(data, textStatus, jqXHR) {
    var poi = data;
    console.log(poi);
}
 
</script>
Using the DataReader on returned data

The DataReader is similar in usage to the Java’s DataReader, as shown below:

<!-- or any jQuery lib that you wish -->
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<!-- load the library -->
<script type="text/javascript" src="js/jquery.citysdk-tourism.min.js"></script>
 
<script type="text/javascript">
var mClient;
 
$(document).ready(function() {
    init("http://some-url.com/");
});
 
// make the call
function init(uri) {
    // handleVisit is the callback for a success call, handleError for error situations
    TourismVisitor.visitHome(uri, handleVisit, handleError);
}
 
// method to handle the erroneous calls
// its parameters are similar to an Ajax call
function handleError(jqXHR, textStatus, errorThrown) {
    console.log(jqXHR, errorThrown, textStatus);
}
 
// method to handle the visit
// in this case it will receive the client as a first parameter
function handleVisit(client, textStatus, jqXHR) {
    mClient = client;
 
    // initialize parameters
    var categories = ["music", "live"], 
        tags = "rock", 
        parameters = {
            "category" : categories,
            "tag" : tags
        };
 
    mClient.useVersion("1.0");
    try {
        mClient.getEvents(parameters, handleEvents, handleError);
    } catch(e) {
        console.log(e);
    }
}
 
// method to handle the data
// in this case it will receive a list of POIs as a first parameter
function handleEvents(data, textStatus, jqXHR) {
    var list = data.event;
 
    // set the default language to en_GB. If this method is not called
    // its default is en_GB
    DataReader.setDefaultLanguage("en_GB");
    // go through the list of events
    for (var key in list) {
        var event = list[key],
            // get the primary label in PT language
            label = DataReader.getLabel(event, term.LABEL_TERM_PRIMARY, "pt_PT"),
            // get a description in PT language
            description = DataReader.getDescription(event, "pt_PT");
 
        // get a thumbnail (URI or base-64 image)
        var img = DataReader.getThumbnails(event),
            imgContent = null,
            thumbnail = "",
        if(img.length > 0) {
            imgContent = img[0];
            thumbnail = imgContent.getContent();
        }
         
        // get an image (always a URI)
        var imgUri = DataReader.getImagesUri(event),
            image = null;
        if(imgUri.length > 0)
            image = imgUri.getContent();
 
        // print values
        console.log("Label: " + label);
        console.log("Description: " + description);
        if(imgContent != null) {
            console.log("THUMBNAIL (URI?: " + imgContent.hasImgUri() + ")" + ";(BYTE-CODE?: " + imgContent.hasImgByteCode() + ") : " + thumbnail);
        } else {
            console.log("THUMBNAIL: " + thumbnail);
        }
        console.log("IMAGE: " + image);
    }
}
 
</script>