Topic: AJAX html pages

I'm trying to find an "easy" way to load an HTML page with a Vimeo video on it within a frame (div). I got the idea from the ability to pull up pages on HTML with the FancyBox Plugin for jQuery. It's the same idea, but I don't want it to popup; rather, show up in the div.

Can someone get me started with a useful resource?

Thanks,
Jim

Re: AJAX html pages

you could do this with straight ahead Javascript and cut down on the weight of a JS library (jQuery, Mootools, Prototype, etc...) using the innerHTML - https://developer.mozilla.org/En/DOM:element.innerHTML

or the easy way would be to use jQuery and the .append() function: http://docs.jquery.com/Manipulation/append

$('div#content').append('<p>This is my content to be appended</p>');

There are also other jQuery Dom Manipulation tactics that you can check out at: http://docs.jquery.com/Manipulation

Daniel Marino | www.iamdanielmarino.com

Re: AJAX html pages

The other option, apart from append, is to use the load function in jQuery. This would be useful if you want to clear the contents of a div and replace with an HTML/PHP/whatever document.

$('#whatever').load('whatever.html');

Re: AJAX html pages

you can also use the load and pull in straight from the vimeo site. that way you don't have to code up a specific page to pull in the video.

$('#whatever').load('http://vimeo.com/3193123 #vimeo_clip_3193123');

Last edited by tank (2009-05-05 06:04:12)

I dream with an XML intereface

Re: AJAX html pages

So in these example would, #whatever be the containing div of the file (video player window). If so, would I simply do something like this:

$('.video_button').click({
  $('#video_player').load('video.html');
});

Also, would the content of #video_player automatically be overwritten by the newly load content?

Re: AJAX html pages

yes and yes

I dream with an XML intereface

Re: AJAX html pages

Okay, one last question (hopefully)...

What if I want to load the file in the href attribute of .video_button? How would I code that?

Re: AJAX html pages

Alright, so it's not quite working. Here's what I've got http://canyoncreekonline.com/index.php/videos/index1.

JavaScript:

$(document).ready(function(){
  $("li > a").mouseup(function(){
    $("#video_player").load("{homepage}/mediaplayer/video/back-in-the-black"); 
  });
});

HTML:

<h2>Videos</h2>
<div class="grid_4" id="video_menu">
	<ul>
		<li class="bitb"><a>Test</a></li>
	</ul>
</div>
<div class="grid_12" id="video_player">
&nbsp;
</div>

When I mouseup on the anchor tag, the screen goes white and just continues to try and load, but nothing happens.

Re: AJAX html pages

on the page you are including you only need to include the DOM elements you need. you don;t have to include a full HTML and BODY tags. Just add your media player css to the main CSS and make change the html in the page to just have the mediaplayer div.

Looks like the CMS or something is causing the entire page to reload when the full thing is included which is why you see the blank screen.

to do the href thing you were want just do:

$(document).ready(function(){
  $("li > a").click(function(){
    $("#video_player").load($(this).attr('href')); 
    return false;
  });
});
I dream with an XML intereface