26 March 2012

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 + '</a><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 +  "</a>";  
        }
        $("#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>

Less Is More ~ Older posts are available in the archive.