My favorites | Sign in
Logo
                
Search
for
Updated Sep 21, 2009 by nakajiman1
Labels: jQuery.getData, jQuery.fn.render
ExamplePersonTemplate  
This example is fetching and rendering a single person using Ajax and Template.

Ajax を使ってプロフィールを取得し、Template を使ってその内容を表示する例です。

people-self.templates.xml

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Fetching a single person"
  description="This example is fetching and rendering a single person using Ajax and Template."
>
<Require feature="dynamic-height"/>
<Require feature="opensocial-0.8"/>
</ModulePrefs>
<Content type="html" view="canvas"><![CDATA[
<style type="text/css">
<!--
#wrapper {
  margin: 10px;
}
div.person {
  font-size: .8em;
  width: 200px;
}
div.person  div.content {
  border: 1px solid #dddddd;
  border-radius: 5px;
  line-height: 1.3em;
  padding: 5px 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
div.person div.menubar {
  background-image: url(http://icons.lrlab.to/say-bottom-48x24.gif);
  background-repeat: no-repeat;
  text-align: right;
  line-height: 24px;
  margin: 0 0 5px 0;
  padding: 0 10px;
  top: -1px;
  left: 0;
  height: 24px;
  position: relative;
}
div.person div.groupbar img {
  vertical-align: middle;
  margin: 0 5px 0 0;
}
-->
</style>
<div id="wrapper">
<div class="person" style="display:none;">
<div class="content">${aboutMe}</div>
<div class="menubar"><a href="${profileUrl || '#'}" target="_top">View full profile</a></div>
<div class="groupbar">
<img src="${thumbnailUrl}" width="30" height="30">${displayName}
</div>
</div>
</div>
<script type="text/javascript" src="opensocial-jquery.min.js"></script>
<script type="text/javascript" src="opensocial-jquery.templates.min.js"></script>
<script type="text/javascript">
jQuery(function($) {

  var url = '/people/@owner/@self';
  var data = { fields: 'profileUrl,aboutMe' };

  $.getData(url, data, function(data) {
    $('.person').render(data[0]/*person*/).show();
    $(window).adjustHeight();
  });

});
</script>
]]></Content>
</Module>

Sign in to add a comment
Hosted by Google Code