Issue in Displaying facebook friends profile picture - javascript

I'm integrating facebook in my phonegap app, where facebook friends profile picture, names and birthday dates are displayed, now able to display name and birthday dates but not profile picture. i'm getting blue rectangular box question mark image in place of profile picture instead of profile picture.
Please help me.
function me() {
FB.api('/me/friends', {fields: 'id, name, picture,birthday' }, function(response) {
if (response.error) {
alert(JSON.stringify(response.error));
} else {
var data = document.getElementById('data');
fdata=response.data;
console.log("fdata: "+fdata);
response.data.forEach(function(item) {
var d = document.createElement('div');
d.innerHTML = "<img src="+item.picture+item.birthday+"/>"+item.name+"<br>"+item.birthday;
data.appendChild(d);
}
}

Replace the inner Html line code as below:
d.innerHTML = "<img src=" + item.picture + "/>" + item.name + item.birthday;

Related

File browsing and omdb

I'm kinda new to php + javascript.
I have set up "cute file browser" to look at a shared folder on my computer.
it works fine displays all files & folders no problem.
Now im trying to use OMDB to search for movie posters and then display them for each movie name.
Currently it works but only with the first movie title. when inspecting the element in FF it does show all the other posters but only within the first
This is the code i made for the OMDB...
var filmName;
var realName;
filmName = finfo;
realName = filmName.split('.')[0];
var omdbUrl = "http://www.omdbapi.com/?t=" + realName;
$.ajax({
url: omdbUrl,
//force to handle it as text
dataType: "text",
success: function(data) {
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(data);
//now json variable contains data in json format
//let's display a few items
document.getElementById("folders").innerHTML += "<img id='imgposter' class='imgPoster' src='" + json.Poster + "'></img>";
}
});
And this is the code for displaying my movie folders:
if(scannedFolders.length) {
scannedFolders.forEach(function(f) {
var itemsLength = f.items.length,
name = escapeHTML(f.name);
if(itemsLength) {
icon = '<span class="icon folder full"></span>';
}
if(itemsLength == 1) {
itemsLength += ' item';
}
else if(itemsLength > 1) {
itemsLength += ' items';
getPoster(name);
}
else {
itemsLength = 'Empty';
}
var folder = $('<li id="folders" class="folders"><span class="name">' + name + '</span> </li>');
folder.appendTo(fileList);
});
}
This is the error i get
As i said i am new here. if anyone could give me any tips would be great thanks

How do I extract Facebook profile picture timestemp using the JavaScript API?

How do I Extract Facebook profile picture timeStemp using the Facebook JavaScript API?
Following code i am using to get facebook profile-picture.
$scope.getInfo = function() {
FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id,picture.width(100).height(100)'}, function(response) {
document.getElementById('status').innerHTML = "<img src='" + response.picture.data.url + "'>";
console.log(response)
});
}
or is there any way that i can get timestemp of profile picture ?? Please help me out :)

Unable to open Microsoft Office files in Office client from SharePoint online 2013

We have SharePoint online 2013 site which displays the reports for different departments. All departments have different groups and they have assigned permission that way so one group can not see other group files. I am using JAVA SCRIPT and AJAX to get the files from gallery. when I use JavaScript on my page I am unable to open the documents in client application, it opens in office online than users have to download. IS there anyway user can click on it and it will download the files. I went to library setting and changed the default to open in client application also changed in site collection and features but still SharePoint opens the file in online instead of client application. We are using office 2010 and SharePoint online 2013.
(function () {
// Create object that have the context information about the field that we want to change it's output render
var galleryContext = {};
galleryContext.Templates = {};
galleryContext.Templates.Header = "<div class='gallery'>";
galleryContext.Templates.Footer = "</div><div class='gallerydocs'></div>";
// This line of code tell TemplateManager that we want to change all HTML for item row render
galleryContext.Templates.Item = galleryTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(galleryContext);
})();
// This function provides the rendering logic
function galleryTemplate(ctx) {
var icon = ctx.CurrentItem["GalleryIcon"];
var src = ctx.CurrentItem["FileRef"];
var name = ctx.CurrentItem["Title"];
var subtitle =ctx.CurrentItem["SubTitle"];
var bgcolor = ctx.CurrentItem["BackgroundColor"];
var fontcolor = ctx.CurrentItem["FontColor"];
//var description = ctx.CurrentItem["Description"];
// console.log(JSON.stringify(ctx.CurrentItem["GalleryIcon"]));
// Return whole item html
return "<div onclick='javascript:getGalleryDocs("+'"'+ src + '"' +", "+'"'+ bgcolor + '"' +", "+'"'+ subtitle + '"' +", "+'"'+ fontcolor + '"' +", "+'"'+ name + '"' +" )'><div class='galleryblock' style='background-color:" + bgcolor + ";color:"+ fontcolor+"' >"+name +"<br/><br/><p>"+subtitle +"</p></div></div>";
}
function getGalleryDocs(folder , bgcolor, subtitle ,fontcolor , name)
{
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/GetFolderByServerRelativeUrl('"+folder+"')/files?$orderby=Title",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
var html="<div class='gallerynav'><span><a href='javascript:goback();'>BILLING REPORTS</a><span> <i class='fa fa-caret-right' ></i><span>"+name+"</span></div><div class='galleryblock' style='float:none;background-color:" + bgcolor + ";color:"+ fontcolor+"' >"+name +"<br/><br/><p>"+subtitle +"</p></div><span></span>";
var results = data.d.results;
//console.log(JSON.stringify(results.length));
html+= "<ul class='gallerylinks'>";
if(results.length > 0)
{
for( i=0 ; i< results.length ; i++)
{
var item = results[i];
html+= "<li><a href='" + item.LinkingUrl + "' target='_blank'>"+item.Title+" <i class='fa fa-external-link'></i></a></li>";
}
}
else
{
html+=" THERE ARE NO DOCUMENTS IN THIS GALLERY"
}
html+="<ul>"
//console.log(JSON.stringify(data));
$(".gallery").hide(500);
$(".gallerydocs").html(html);
},
error: function (data) {
$(".gallerydocs").html("You dont have permissions to view this folder!")
}
});
}
function goback(){
$(".gallery").show(500);
$(".gallerydocs").html("");
}
I've not got an environment to hand to test this on but it will be something to do with your href link. It's needs to be built differently. The solution below hopefully will open in the clients application.
Try
<a href=""
onclick="editDocumentWithProgID2('http://server/site/doclib/folder/Document.docx',
'',
'SharePoint.OpenDocuments', '0',
'http://server/site', '0')">
This will open the file in edit mode
</a>
A full post can be found here
THis post offers a solution to directly download
Sorry I can't test
Good luck
Cheers
Truez

Append image in function jquery

Good evening.
I have this jquery code which allows me, once you press the Enter key, to post a comment.
Fattio that I run an append with the username and the content that the user wants to publish.
In addition to the username I would also like to "hang" the profile picture using their path. How do I post a photo?
Thanks for your help. Here's the code:
function commento_post(id_post)
{
$('.form-commento'+id_post).click(function ()
{
$('#ins_commento'+id_post).keydown(function (e)
{
var message = $("#commento"+id_post).val();
var username = $("#username").val();
var id_user = $("#id_user").val();
if(e.keyCode === 13)
{
$.ajax(
{
type: 'POST',
url: 'http://localhost/laravel/public/index.php/post/ins_commento',
data: { commento: message, id_post: id_post },
success: function(data)
{
$('#commento'+id_post).val('');
$('#commentscontainer'+id_post).append
(
/*$(".username-commento"+id_post).html
(*/
$('<a/>',
{
text : username, href : 'http://localhost/laravel/public/index.php/utente/'+id_user
}).css({'font-weight':'bold'})
//)
).append(' ').append(message).append($('<br/>'));
var el = $('#numero_commenti'+id_post);
var num = parseInt(el.text());
el.text(num + 1);
}
});
}
});
});
}
In your success function, you could simplify everything quite a bit in the following way while not using jQuery append so much, but just using a variable to store your code and then appending it in one go. This will allow you to append all sort of elements, it's easily parseable for the you and it reduces the amount of calls you have to make.
// Add whatever you want your final HTML to look like to this variable
var html = "<a href='http://localhost/laravel/public/index.php/utente/" + id_user + "' style='font-weight: bold;'>" + username + "</a>";
html += message;
// add an image
html += "<img src='path/to/image.jpg' />"
html += "<br />";
// append to code you constructed above in one go
$('#commentscontainer' + id_post).append(html);
Update
I amended an incorrect quote and changed + id_user + "to + id_user + "', which makes everything after it work.

FB api call in for loop

I'm trying to get all facebook comments with profile pictures of commentators through fb.api() call. Currently all comments gets outputed i just can't get profile pictures to append to appropriate comment.
In for loop which loops through all comments is another FB.api call which gets the profile pic of user who commented on video and than append them into single comment block. With this code i get profile pictures of all users who commented in every single comment.
What am i doing wrong?? Thank you in advance!
var komentarji_length = response.comments.data.length;
for (var i = 0; i < komentarji_length; i++) {
var user_id = response.comments.data[i].from.id;
FB.api("/" + user_id + "/picture", {
access_token: access_token
}, function (response) {
var profile_pic_link = response.data.url;
$(".comments_profile_pic" + i).append("<img src=" + comments_profile_pic_link + ">");
});
var ime = response.comments.data[i].from.name;
var message = response.comments.data[i].message;
$(".fb_comments").append('<div class="single_comment"><div class="comments_profile_pic' + i + '"></div><div class="name">' + name + '&nbsp says:</div><div class="single_message">' + message + '</div></div>');
}
Issue 1: comments_profile_pic_link is not defined, the variable is: profile_pic_link.
But then also the problem will not be solved. When you call "/" + user_id + "/picture" it is redirected to the image url automatically. So you can directly use the image url as: https://graph.facebook.com/{user-id}/picture. No need to make the API call unnecessarily.
Example
Still if you wish to get the proper image url (not required though), use redirect=0 with your call-
FB.api("/" + user_id + "/picture?redirect=0", {
access_token: access_token
}, function (response) {
var profile_pic_link = response.data.url;
$(".comments_profile_pic" + i).append("<img src=" + comments_profile_pic_link + ">");
});

Categories