Javascript - Dynamically Updating a Handler

One of the coolest, yet lesser promoted objects in the JavaScript world is the ability to dynamically update the handler of a given function. To break it down, a user essentially "re-programs" on the client side an interactive Html element (<a>, <div>, <span>, etc.) to change which function is called, when an option is selected (By whatever input method is used). This can save a ton of coding and can allow functions to change based on user entered parameters. It's feasible that the chosen value could be bound to a cookie, but otherwise the function will always load with the starting option selected by the developer. This may seem basic, but it's also incredibly powerful and useful in many scenarios. I used it to create mapping assistance, in which the destination (Which has to be concatenated with differing circumstances, based on user input) would be new per visitor and the destination may be different as well, based on where the visitor is travelling to. It creates an elegant, scale-able solution that can be easily updated with minimal code. 

THE SCRIPT (Within the Html header):

<script type="text/javascript">
function startHere(userChoice)
{
   if(userChoice=="iChooseThis")
   {
   document.getElementById(userChoice).onclick=nowDoThisFunction;
   }
   else
   {
   document.getElementById(userChoice).onclick=nowDoThisFunction2;
}

function nowDoThisFunction()
{
//Do this code;
}

function nowDoThisFunction2()
{
//Do this code instead;
}
</script>


HTML (Using the very crude example of acting based on the element clicked - you could change the function parameter to grab a text box value, drop-down menu, etc.):

<a id="iChooseThis" href="javascript:" onclick="javascript: startHere(this.id);" />

Loading a YouTube Channel as a Feed

For a few projects now, it has become necessary to cross-integrate as many items as possible. One example, would be showing a YouTube channel in feed style within a given web site. The usefulness is that videos can be posted to the targeted channel via a smartphone and or other computer on the fly and be available on both the YouTube channel and the targeted website (The feed coming off Google generaly takes about fifteen minutes).Additionally, this can allow for easy uploading from multiple persons, while offloading the security aspects onto Google. 

• The "html.push" can be tweaked to the desired layout, which will be injected into the "youtube" div tag, following the script. 
• With the ajax section, the "url" attribute needs to be adjusted to match the desired YouTube channel.The only variable within the url is the YouTube user id, which can be verified using Google's instructions here.

Here's the full code to make it all happen! 

<script type="text/javascript">

function show_my_videos(data){

html = ['<ul id="youtube-videos" style="list-style-type:none">'];

$(data.feed.entry).each(function(entry){

url = this.link[0].href;

url_thumbnail = this.media$group.media$thumbnail[3].url;

var description;

try

{

description = this.media$group.media$description.$t;

}

catch(err)

{

description = '';

}

html.push('<li><table style="width:250px;"><tr><td colspan=2></td></tr><tr><td style="vertical-align:top"><a href="'+url+'" target="_blank">');

html.push('<img src="'+url_thumbnail+'" alt="'+description+'" style="border:1px white solid">');

html.push('</a></td><td style="font-size:8pt">'+description+'</td></tr><tr><td colspan=2 style="border-bottom:1px white solid">&nbsp;</td></tr></table></li>');

});

html.push('</ul>');

$("#youtube").html(html.join(''));

}

$.ajax({

type: "GET",

url: "http://gdata.youtube.com/feeds/api/users/[YouTube User ID]/uploads?alt=json-in-script&format=5",

cache: false,

dataType:'jsonp',

success: function(data){

show_my_videos(data);

  }

});

</script>

<div id="youtube" style=""></div>

Example, as rendered in page: