Question

I have a table which lists all events on a debating calendar. Each row has basic info such as the schools, the time and the venue etc. I want to get it so that the last column in the table the share link is done via jquery so I don’t need to do it for each entry. See what I have so far here.

I want to get it so that on click of the share link I get the relevant information for that row into a url like the below which opens in a new window so the user can post to facebook. In the below I have the name of the class I want to appear in each spot eg .yearlevel I want the contents of the yearlevel class in the caption field. Further complicating matters I need to make sure any spaces are encoded eg %20 to make the url valid.

http://www.facebook.com/dialog/feed?
app_id=123050457758183&
link=http://developers.facebook.com/docs/reference/dialogs/&
picture=http://fbrell.com/f8.jpg&
name=School%20Debate&
caption=.yearlevel&
description=.homeschool%20.versus%20.awayschool%20@%20.venue%20@%20.datetime&
redirect_uri=http://www.example.com/response

Is this possible?
Any pointers to get me on the right track would be greatly appreciated!

Answer 1

Use .on() for each a href tag
and encodeURIComponent

$('a').on('click', function (event) {
   event.preventDefault();
   var homeschool = $(this).parent().siblings('.homeschool');


   var url = 'http://www.facebook.com/dialog/feed?' + 'app_id=123050457758183&' + 'link=http://developers.facebook.com/docs/reference/dialogs/&' + 'picture=http://fbrell.com/f8.jpg&' + 'name=' + encodeURIComponent(homeschool) + 'caption=yearlevel&' + 'description=homeschool%20.versus%20.awayschool%20@%20.venue%20@%20.datetime&' + 'redirect_uri=http://www.example.com/response';

   window.open(
   url, '_blank' // <- This is what makes it open in a new window.
   );

});​

DEMO

Hope this helps