CodePaLOUsa Coding Contest Part 3
Created: 26 March 2012 Modified:
The JSONP Web Service provided for the contest is no longer available so I am placing the last iteration of code below and will discuss
briefly some of the mistakes and difficulties that I had run into. One difficulty I had is not using “$.ajaxSetup({ cache: false });”
before making JQuery AJAX calls. The first night I was having difficulties making a second AJAX call to Google and that was the reason.
A second problem I had was that the “or” statements I was using with the keyword search of LinkedIn wasn’t working and that was due to it
not being capitalized. I found this answer on Google’s help on searching. I didn’t see any mention of it on LinkedIn. One area I did not
get to explore was using a dummy account to see how accurate the keyword search was without the additional information of the other accounts
my LinkedIn account has associations with.
index.html
<html>
<head>
<style>
#container {
background-color : Gray ;
width : 100% ;
display : block ;
float : left ;
}
#informationContainer {
background-color : Gray ;
width : 70% ;
display : block ;
padding : 1em ;
float : right ;
}
#feedList {
background-color : Green ;
float : left ;
width : 25% ;
height : 100% ;
overflow : auto ;
max-width : 25% ;
min-width : 25% ;
}
#lineItem {
background-color : #BBBBBB ;
width : 90% ;
float : left ;
clear : both ;
}
#mustLogin {
display : none ;
}
</style>
<script type= "text/javascript" src= "jquery-1.7.1.js" ></script>
<script type= "text/javascript" src= "http://platform.linkedin.com/in.js" >
api_key : ### get your own ! ###
authorize : true
onLoad : onLinkedLoad
</script>
<script type= "text/javascript" >
var lloaded = false
function onLinkedLoad () {
initiatePage ();
}
function loginComplete () {
$ ( " #mustLogin " ). hide ();
showLoggedInMessage ();
}
function showLoggedInMessage () {
$ ( " #informationContainer " ). append ( " <div>Click the links to the left to display information about the speaker</div> " );
}
function initiatePage () {
lloaded = true ;
//alert("lloaded=" + lloaded);
var jsonUrl = " http://winaspectreapi.appspot.com/api/sessions " ;
callDataAJAX ( jsonUrl );
}
function listNames ( data ) {
var i = 0 ;
for ( i = 0 ; i < data . length ; i ++ ) {
names = data [ i ]. author . split ( " " );
var searchTitle = cleanTitle ( data [ i ]. title );
searchTitle = searchTitle + " OR software OR louisville OR codepalousa " ;
var output = ' <div id="lineItem">Speaker: <a href="# '' + data[i].author + '' " onclick="getLinkedInfo( '' + names[0] + '' , '' + names[names.length - 1] + '' , '' + searchTitle + '' ); return false;"> ' + data [ i ]. author + ' ]<br/> ' ;
output = output + ' Title: ' + data [ i ]. title + ' <hr/></div> ' ;
$ ( " #feedList " ). append ( output );
if ( data [ i ]. author . toLowerCase (). indexOf ( " amundsen " ) > - 1 ) {
//alert(searchTitle);
}
}
}
function cleanTitleSymbols ( theTitle ) {
var i = 0 ;
var removeWords = [ " [ \ , \ : \ ; \ & \ ? \ ! \ . \ = \ + \ | \ ) \ ( \" ] " , " \ 's " ];
var newTitle = theTitle . toLowerCase ();
var re = new RegExp ( "" , " g " );
for ( i = 0 ; i < removeWords . length ; i ++ ) {
re = new RegExp ( removeWords [ i ], " g " );
newTitle = newTitle . replace ( re , " " );
}
return newTitle ;
}
function cleanTitle ( theTitle ) {
var i = 0 ;
var removeWords = [ " . " , " ..W* " , " your " , " use " , " from " , " the " , " get " , " what " , " you " , " can " , " with " , " within " , " for " , " about " , " are " , " hour " , " without " , " \ w* \ 't " ];
var newTitle = theTitle . toLowerCase ();
newTitle = cleanTitleSymbols ( newTitle );
var re = new RegExp ( "" , " g " );
for ( i = 0 ; i < removeWords . length ; i ++ ) {
re = new RegExp ( " ^ " + removeWords [ i ] + " \ s| \ s " + removeWords [ i ] + " \ s| \ s " + removeWords [ i ] + " $ " , " g " );
newTitle = newTitle . replace ( re , " " );
}
newTitle = newTitle . replace ( /w+ings/g , " " );
newTitle = newTitle . replace ( / +/g , " " );
newTitle = newTitle . replace ( /^ +| +$/g , "" );
newTitle = newTitle . replace ( /'/g , "" );
newTitle = newTitle . replace ( / /g , " OR " );
return newTitle ;
}
function receiveData ( data , status ) {
if ( $ . isArray ( data )) {
listNames ( data );
}
if ( IN . User . isAuthorized ()) {
showLoggedInMessage ();
} else {
$ ( " #mustLogin " ). show ();
}
}
function callDataAJAX ( jsonUrl ) {
$ . ajax ({
url : jsonUrl ,
dataType : ' jsonp ' ,
jsonpCallback : ' receiveData '
});
}
function getLinkedInfo ( firstName , lastName , keywords ) {
IN . API . PeopleSearch (). fields ( " firstName " , " lastName " , " distance " , " publicProfileUrl " , " pictureUrl " , " headline " ). params ({ " first-name " : firstName , " last-name " : lastName , " keywords " : keywords , " sort " : " distance " }). result ( showResults );
}
function showResults ( result ) {
$ ( " #informationContainer " ). html ( '' );
$ ( " #informationContainer " ). append ( " <span>Click a link to the left to list possible LinkedIn matches. The one you want is most likely on top.</span> " );
for ( var index in result . people . values ) {
var profHTML = "" ;
profile = result . people . values [ index ]
if ( profile . pictureUrl ) {
profHTML += " <p><a target= " _blank " href= "" + profile.publicProfileUrl + "" > " ;
profHTML += " <img class=img_border height=30 align= " left " src= "" + profile.pictureUrl + "" > " ;
profHTML += "" + profile . firstName + " " + profile . lastName + " - " + profile . headline + " ] " ;
}
$ ( " #informationContainer " ). append ( profHTML );
}
}
</script>
</head>
<body>
<div id= "container" >
<div id= "feedList" >
</div>
<div id= "informationContainer" >
<div id= "mustLogin" >
<h2> Please login to LinkedIn using the button.</h2>
<script type= "IN/Login" data-onAuth= "loginComplete" ></script>
</div>
</div>
</div>
</body>
</html>
tags: