Hi,
I'm very new to OpenSocial (well, so is almost everyone, I guess). I know that makeRequest is quite important to understand and I love sample code, so I put together this tiny sample add that performs a Wikipedia search and displays the result. It uses the jQuery form plugin to serialize the form.
Some links:
Thanks to viphak for his jQuery post, and to myspaceseattlemax for his makeRequest post.
Ok, so lets do this step by step.
1) Download jQuery UI and put it on your server. (Create a "jquery" directory, put the zip in it and unpack it there)
2) Download the form plugin and put it in your jquery directory on your server.
3) Get a spinner.gif (just eye candy). It took viphak's form here. Put it in the jquery directory.
4) Paste this code into the test tool:
<script src="http://[YOUR SERVER]/jquery/jquery-1.2.3.min.js" type="text/javascript"></script>
<script src="http://[YOUR SERVER]/jquery/jquery.form.js" type="text/javascript"></script>
<script src="http://[YOUR SERVER]/jquery/ui.accordion.js" type="text/javascript"></script>
<form id="search_form" onsubmit="perform_search(); return false;">
<table>
<tr><td>Search Term:</td><td><input type="text" name="search" id="search"/></td></tr>
<tr><td><input type="button" onclick="perform_search()" value="Search Wikipedia"/></td>
<td><span id="wait_spinner" style="display:none">
<img src="http://[YOUR SERVER]/jquery/spinner.gif"/>
</span></td></tr>
</table>
<br/>
</form>
<div id="result" style="display:none; border: 1px solid black; height:400px; width:600px; overflow:auto;">
</div>
<script>
function perform_search() {
var url = "http://en.wikipedia.org/wiki/Special:Search";
var param = {};
param[opensocial.ContentRequestParameters.METHOD] = opensocial.ContentRequestParameters.MethodType.POST;
param[opensocial.ContentRequestParameters.CONTENT_TYPE] = opensocial.ContentRequestParameters.ContentType.HTML;
param[opensocial.ContentRequestParameters.POST_DATA] = $('#search_form').formSerialize();
$("#result").slideUp('slow');
$("#wait_spinner").toggle("slow");
opensocial.makeRequest(url, makeRequest_callback, param);
}
function makeRequest_callback(response, url, error) {
$("#wait_spinner").toggle("slow");
if (!error) {
$('#result').html(response);
} else {
$('#result').html("Error.");
}
$("#result").slideDown('slow');
}
</script>
5) Exchange [YOUR SERVER] for - you guessed it - your server.
6) Try it out. It's not pretty but might be of some help.
Cheers,
Johannes.
Visit my blog