Invoke the Mashable
The next step is to send a request to invoke Yahoo local Search using the default connection. This is done with the request(reqConfig, callbacks) method in PC4JS. (For detailed information, see the PC4JS API Reference.)
The request configuration object defines the URL to invoke the mashable, with any parameters, the HTTP method to use, the content type for the request, and for POST requests, the body of the request.
You can find this information in the Technical Specs tab of the artifact page for each mashable or mashup:
Add the request method and configuration object as shown:
Presto.namespace("Sample");
Sample.SimpleTable = function( app ) {
var rootDiv = jQuery(app.getRootElement);
var myTbl = rootDiv.find('.myTable');
var connection = app.getConnection();
var requestBody = '';
var rowMarkup = "<tr><td>${Title}</td><td>${Address}</td><td>${City}</td>;
<td>${Phone}</td><td>${Distance}</td><td>${BusinessUrl}</td></tr>"
jQuery.template("rowTemplate", rowMarkup);
connection.request({
url: "/presto/edge/api/rest/YahooLocalSearchREST/getData?x-presto-resultFormat=json&appid=.kcC72DV34FYTpAGuwwbV8YGI.DsMBQ0RB9eZARS621ecnHq33c.g1XJV93a64hrdaM3&query=banks&zip=94102&results=20",
type: "get",
contentType: "application/x-www-form-urlencoded",
data: requestBody
}
...
});
};
This example is quite simple.
See Use PC4JS in Custom Apps for links to other techniques that may be useful. Last, you must define two callbacks: onSuccess(response, responseHeaders) to handle successful responses and onFailure(error) to handle errors. An object with stubs for the callbacks look like this:
...
connection.request({
url: "/presto/edge/api/rest/YahooLocalSearchREST/getData?x-presto-resultFormat=json&appid=.kcC72DV34FYTpAGuwwbV8YGI.DsMBQ0RB9eZARS621ecnHq33c.g1XJV93a64hrdaM3&query=banks&zip=94102&results=20",
type: "get",
contentType: "application/x-www-form-urlencoded",
data: requestBody
},
{ onSuccess: function(response, responseHeaders) {
},
onFailure: function(e) {
}
});
};
Rendering the table rows must happen in onSuccess. This simply finds the Result array and passes it, along with the template name, to the JQuery tmpl method and then uses appendTo to add the rows to the table body:
...
connection.request({
url: "/presto/edge/api/rest/YahooLocalSearchREST/getData?x-presto-resultFormat=json&appid=.kcC72DV34FYTpAGuwwbV8YGI.DsMBQ0RB9eZARS621ecnHq33c.g1XJV93a64hrdaM3&query=banks&zip=94102&results=20",
type: "get",
contentType: "application/x-www-form-urlencoded",
data: requestBody
},
{ onSuccess: function(response, responseHeaders) {
var result = response;
if (result.ResultSet.Result) {
var locations = result.ResultSet.Result;
jQuery.tmpl("rowTemplate", locations).appendTo(".tblBdy");
} else {
rootDiv.html("no results found");
}
},
onFailure: function(e) {
}
});
};
Lastly, we add code to display errors if no results are found or if the invocation of the mashable fails:
Presto.namespace("Sample");
Sample.SimpleTable = function( app ) {
var rootDiv = jQuery(app.getRootElement);
var myTbl = rootDiv.find('.myTable');
var connection = app.getConnection();
var requestBody: '';
var rowMarkup = "<tr><td>${Title}</td><td>${Address}</td><td>${City}</td>
<td>${Phone}</td><td>${Distance}</td><td>${BusinessUrl}</td></tr>"
jQuery.template("rowTemplate", rowMarkup);
connection.request({
url: "/presto/edge/api/rest/YahooLocalSearchREST/getData?x-presto-resultFormat=json&appid=.kcC72DV34FYTpAGuwwbV8YGI.DsMBQ0RB9eZARS621ecnHq33c.g1XJV93a64hrdaM3&query=banks&zip=94102&results=20",
type: "get",
contentType: "application/x-www-form-urlencoded",
data: requestBody
},
{ onSuccess: function(response, responseHeaders) {
var result = response;
//find array and render template
if (result.ResultSet.Result) {
var locations = result.ResultSet.Result;
jQuery.tmpl("rowTemplate", locations).appendTo(".tblBdy");
} else {
rootDiv.html("no results found");
}
},
onFailure: function(e) {
rootDiv.html(e.message);
}
});
};
