onClick() & Load

Hi,I’m trying to figure out how to do the following…

I will have a bunch of links in a div id = “videosLinks”.

I would like an onClick event to send via ajax,load,post, get(whatever) to a file that will receive the data after the query and replace a div with that result… ie


<div id="video">
    Replace Video Here
</div>

<div id="videoLinks">
  <a href="videoPost.php?Video=GOCTeS5OZp4">Video 1<a>
  <a href="videoPost.php?Video=K4tqzeisltY">Video 2</a>
...
</div>

You didn’t specify if you were using a library or not, but you could use jQuery for this:


<div id="video"></div>

<div id="videoLinks">
  <a href="videoPost.php?Video=GOCTeS5OZp4">Video 1<a>
  <a href="videoPost.php?Video=K4tqzeisltY">Video 2</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		$('#videoLinks a').click(function(e) {
			e.preventDefault();
			$.get(
				$(this).attr('href'), 
				function(data) {
			  		$('#video').html(data);
			  	}
			);
		});
	});
</script>