Develop Reference

Having difficulty in implementation of linkedin recommendation api to fetch linkedin recommendation on our website

Hi as I found on some website by using linkedin api we can fetch your website user's linkedin recommendation to show it on your website as part of user profiles.
So to do this I searched for its implementation & found 2 api code & I tried both but its not working for my side.
First code ,I tried:
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: XXXXXXXXX
authorize: true
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="IN/Login" data-onAuth="authSuccess"></script>
<script>
function authSuccess() {
var recos_element = jquery("#footer-logo");
IN.API.Raw("people/~:(id,first-name,last-name,recommendations-received)").method("GET").result(function(result){
console.log("result",result);
{
for(var key in result.values) {
var reco = result.values[key];
recos_element.append($('<p><i><b>' + reco.recommender.firstName + ' ' + reco.recommender.lastName + '</b> says,</i><br> ' + reco.recommendationText + '</p>'));
}
});
}
</script>
Second code I tried:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: XXXXXXXXXX
authorize: true
</script>
<script type="text/javascript">
function onLinkedInAuth() {
IN.API.Raw('/people/~:(recommendations-received)')
.method('GET')
.result(function(result){
var received = result.recommendationsReceived.values;
$('<p>')
.html('Recommendations: ' + received.length)
.appendTo('#recommendations');
$.each(received, function(i, data){
$('<h3>')
.html(data.recommender.firstName + " " + data.recommender.lastName)
.appendTo('#recommendations');
$('<p>')
.html(data.recommendationText)
.appendTo('#recommendations');
});
})
};
</script>
<script type="in/login" data-onAuth="onLinkedInAuth">
Hello, <?js= firstName ?> <?js= lastName ?>.
</script>
I am also using linkedin Member Profile Plugin in this we have to send user's profile-url to fetch his profile in data-id
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="(Profile URL)" data-format="inline"></script>
So should we have to do similar like this for fetching user's recommendtaion.
Please help me for this.
thanks in advance!!!

well honestly do not know where you are putting this section of code and there is very little information about your error inyour code, what I recommend is to use a plugin that will facilitate besides that there implemetation documentation and tutorials, just make a git clone of:
Cakephp-Linkedin
and the wiki:
tep by step: Setup your controller
How to use the API

Google Line Chart - Refresh database automatically

I'm working on an interface which display data retrieved from my database thanks to a Google Line Chart. However, new data is stored in my database every 10 seconds and I can not refresh the chart automatically.
I need something really basic and I've already looked on the internet. I read something about Javascript/AJAX/JQuery ... but I'm more comfortable with Hardware :D
Here's my files
EDIT : Chart_get and the main file have been modified according to #Michel answer.
fetch.php - Fetch the data and echo
<?php // Connection and Request stuff
$host = blablabla
(...)
$req = $bdd->query('SELECT id, battery FROM Station');
while ($data = $req->fetch()){
$id = addslashes($data['id']);
$charge_batt = intval($data['charge_batt']);
$result .= "['".$id."' , ".$charge_batt."],";
}
$result = substr($result, 0, -1); // Erase the last ","
echo $result;
?>
Output :
['1' , 90],['2' , 89],['3' , 80],['4' , 100],['5' , 90],['6' , 50],['7' , 67]
chart_get.php - Initialize the chart and draw it with the "echo $result" data
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
<?php
echo ("['Date', 'Battery'],");
include('fetch.php');
?>
]);
var options = {
title: 'Battery health',
animation:{
duration: 1000,
easing: 'out',
},
curveType: 'function'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
To refresh the "chart_div" I've tried :
main.html - jQuery script with load function
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Project - Chart</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// first load it once, so it display's the chart
$('#tableHolder').load('chart_get.php');
// then execute the interval
setInterval(function(){$('#tableHolder').load('chart_get.php');}, 5000);
});
</script>
</head>
<body>
<p>Hello</p>
<div id="tableHolder"> </div>
</body>
</html>
But the chart is not displayed at all.
I have absolutely no idea what I'm doing wrong. I am reading in a fast way some tutorials about javascript but if you know how to resolve my issue it would be great to help me :)
Thanks !

Solution from OP.
I've found the answer!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Projet GreenFeed - Station de recharge a energie positive</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
//AJAX Call is compulsory !
var jsonData = $.ajax({
url: "chart_fetch.php",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Battery',
is3D: 'true',
width: 800,
height: 600
};
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// First load the chart once
drawChart();
// Set interval to call the drawChart again
setInterval(drawChart, 5000);
});
</script>
</head>
<body>
<div id="chart_div"> </div>
</body>
</html>

First get rid of the <!DOCTYPE>, <html>, <head>, <meta>, <title> tags in chart_get.php.
The data in chart_get.php is the same data you would have in <div id="tableHolder"></div> if you didn't wanted it to refresh.
Second, rewrite your script in main.html to this:
<script type="text/javascript">
$(document).ready(function(){
// first load it once, so it display's the chart
// (otherwise you have to wait 5 seconds)
$('#tableHolder').load('chart_get.php');
// then execute the interval
setInterval(function(){$('#tableHolder').load('chart_get.php');}, 5000);
});
</script>

Page loading slowly in IE

I am using the colorbox on my site due to this the page is loading very slowly in IE as comparison to other browsers. When I remove the colorbox jQuery file the pages are loading fine. How can I resolve this? I am using the following scripts on my site:
<script src="js/script.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<?php if($_GET['s']=="invoices") {?>
<script src="js/thickbox1.js" type="text/javascript"></script>
<?php } else {?>
<script src="js/thickbox.js" type="text/javascript"></script>
<?php }?>
<script src="js/jquery.treeview.min.js" type="text/javascript"></script>
<script src="js/jquery.tipTip.minified.js" type="text/javascript"></script>

You could try defering script execution. This way it would be executed later, when the page is already loaded. Also, you can put it in the end of your HTML document, right before the closing </body> tag. The browser could then render most of the UI and only then load "colorbox".

Here's an option: Load your scripts via JavaScript on DOM ready.
Consider the following:
if (window.addEventListener) { // for non-crappy browsers
window.addEventListener('load', loadHandler, false);
} else if (window.attachEvent) { // for IE
window.attachEvent('onload', loadHandler);
}
function loadHandler() {
var scripts = {
'scripts': {
'src': 'js/scripts.js',
'type': 'text/javascript'
},
'jquery': {
'src': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
'type': ''
},
'colorbox': {
'src': 'js/jquery.colorbox-min.js',
'type': 'text/javascript'
},
'thickbox1': {
'src': 'js/thickbox1.js',
'type': 'text/javascript'
},
'thickbox': {
'src': 'js/thickbox.js',
'type': 'text/javascript'
},
'treeview': {
'src': 'js/jquery.treeview.min.js',
'type': 'text/javascript'
},
'tipTip': {
'src': 'js/jquery.tipTip.minified.js',
'type': 'text/javascript'
}
};
for (var key in scripts) {
script = document.createElement('script');
script.src = scripts[key]['src'];
script.type = scripts[key]['type'];
document.body.appendChild(script);
}
}
This way, your scripts will only load when the page is ready.

Facebox doesn't work when content is added via jQuery?

I have a website that loads content via jQuery. When loading all my javascript and css files needed for facebox. It I put a link on the initial page, it works fine. However, when changing the 'innerHTML' of one element, the same links do not function.
And I even tried putting the javascript & css files in the innerHTML and it still doesn't work! It loads up as a new page.
Please help!
Thanks
Edit 1:
index.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://justtwobros.com/actions.js"></script>
<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
})
</script>
text (this link is the one that works)
<script>
showAllWorkOnLoad();
</script>
actions.js
function showAllWorkOnLoad() {
var thePostData = "filter=allwork";
$.ajax({
type: "POST",
url: "http://justtwobros.com/get_work.php",
data: thePostData,
success: function(theRetrievedData) {
document.getElementById('content').innerHTML = theRetrievedData;
$("#content").fadeIn(20);
focusButtonAllWork();
var count = 0;
$("#content").find('.work_thumbnail_wrapper').each(function() {
count++;
var timeWait = (count * 100) + 500;
var theId = $(this).attr('id');
var theIdDone = "#" + theId;
setTimeout(function(){$(theIdDone).fadeIn(300);},timeWait);
});
}
});
}
get_work.php
text (this link that doesn't work)

It doesn't work because that link does not have a listener attached to it. You can confirm this is your problem by adding this code after your ajax call (on success, after you have inserted the link into the document).
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})

jQuery append css link to iframe head

I'm trying to append a css file to an iframe that is created on a page from a global script. I can access part of it, but for some reason I can't append to the head. It's not throwing errors either, which is frustrating.
<script type="text/javascript">
$(document).ready(function() {
$('#outline_text_ifr')
.contents()
.find('head')
.append('<link type="text/css" rel="stylesheet" href="/include/outline.css" media="all" />');
});
</script>

var $head = $("#IFrame").contents().find("head");
var url = "Styles/styles.css";
$head.append($("<link/>", { rel: "stylesheet", href: url, type: "text/css" } ));
or
$('#IFrame').contents().find('#div1').css({
color: 'purple'
});