jquery/ajax help

Tripnologist · 13 Aug 2009 at 12:34

I have a graph and need to animate the opacity and position of various elements depending on specific numerical values.

I know how to use jquery to animate opacity and position but don't know where to start in figuring out how to tie it in with the numbers (especially with live, ever changing data). If anyone could point me in the right direction, I'd really appreciate it.

GravyMonster · 13 Aug 2009 at 12:48

Lookup the setInterval() function. It's normal JS, not part of the jQ framework. It's basically calls a function after a delay you specify in ms.

Something like this would probably work for you:

Code:

$(function() {
    setInterval(getGraphData(), 5000) // get graph data every 5 seconds and display it.
});

function getGraphData() {
    $.ajax.get("my-xml.php", displayGraphData(data))
}

function displayGraphData(data) {
    // loop through your XML with the column values and animate each column
}

HTH!

Tripnologist · 13 Aug 2009 at 17:09

I really hope you're feeling generous with a bit of patience.

The graph is just the days of the week with a single image in it. Simple animation I've done below..

Code:

$(document).ready(function() {
	$(".mon img").animate({ top: '180px',opacity: 0.4}, 1500 );
});

What I cannot figure out is how to replace the values in the animations with data from the xml.

Code:

<data>
	<mon>
		<positiontop>180px</positiontop>
		<opacity>0.6</opacity>
		<duration>1500</duration>
	</mon>
</data>

Sorry if I sound dense, just never had to do anything like this before.

Tripnologist · 13 Aug 2009 at 19:21

Am I completely off the mark with this or am I reasonably close?

Code:

$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "data.xml",
		dataType: "xml",
		success: function(xml) {
			$(xml).find('mon').each(function(){
				var top = $(this).find('positiontop').text();
				var opac = $(this).find('opacity').text();
				var dur = $(this).find('duration').text();
				$(".mon img").animate({ top: "'+top+'",opacity: '+opac+'}, '+dur+' );
			});
		}
	});
});

Tripnologist · 13 Aug 2009 at 22:36

Okay, I have it working but there MUST be an easier more elegant way of doing it.

Code:

$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "data.xml",
		dataType: "xml",
		success: function(xml) {
			$(xml).find('mon').each(function(){
				$(".mon img").animate({ top: $(this).find('positiontop').text(),opacity: $(this).find('opacity').text()}, $(this).find('duration').text());
			});
			$(xml).find('tue').each(function(){
				$(".tue img").animate({ top: $(this).find('positiontop').text(),opacity: $(this).find('opacity').text()}, $(this).find('duration').text());
			});
			$(xml).find('wed').each(function(){
				$(".wed img").animate({ top: $(this).find('positiontop').text(),opacity: $(this).find('opacity').text()}, $(this).find('duration').text());
			});
			$(xml).find('thu').each(function(){
				$(".thu img").animate({ top: $(this).find('positiontop').text(),opacity: $(this).find('opacity').text()}, $(this).find('duration').text());
			});
			$(xml).find('fri').each(function(){
				$(".fri img").animate({ top: $(this).find('positiontop').text(),opacity: $(this).find('opacity').text()}, $(this).find('duration').text());
			});
			$(xml).find('sat').each(function(){
				$(".sat img").animate({ top: $(this).find('positiontop').text(),opacity: $(this).find('opacity').text()}, $(this).find('duration').text());
			});
			$(xml).find('sun').each(function(){
				$(".sun img").animate({ top: $(this).find('positiontop').text(),opacity: $(this).find('opacity').text()}, $(this).find('duration').text());
			});
		}
	});
});