Animate the output of an AJAX request?

[Edward]

Hi,

 

I m using a basic function to retrieve and update info in a MySQL database. I have a div in my page with the output is fed into when the request is complete. At the moment, it appears instantly (as soon as the request has loaded) and remains on the page. Is there a way to make this fade out, or even fade in and then fade out, perhaps after about 5 seconds? I think Facebook does a similar thing when you save changes, but I don't seem to be able to link my jquery animation techniques to the output of an AJAX request.

 

If this is possible and someone could explain it that would be a great help.

 

Thanks,

 

Ed

[RichardRotterdam]

What is the code you have so far?

What you can do is inject it into an element where the start opacity is 0. After the content is loaded into the div you can fade it in.

Then perform a timeout. after that fade out.

[Edward]

Hi,

 

Yes! That is EXACTLY what I want to be able to do, I just have no idea how. Here is the basics of what I have so far, it's based on simple AJAX requests you see in beginner tutorials:

 

index.php:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="date_select_ajax.js"></script>
<select id="select_date" onchange="date_change();">
<option>Select a Date</option>
<option value="" disabled="disabled">----------</option>
<?php
$sql = 'SELECT * FROM Data_2009 ORDER BY id ASC;';
$result = mysql_query($sql);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$date = strtotime($row['date']);
echo '<option value="'.$row['date'].'">'.date(d.' '.M.' '.Y, $date).'</option>';
}
?>
</select>
<div id="output_form"></div>

 

date_select_ajax.js

var xmlHttp_date_change;

function GetXmlHttpObject_date_change() {
var xmlHttp_date_change=null;
try {
 		// Firefox, Opera 8.0+, Safari
 		xmlHttp_date_change=new XMLHttpRequest();
 	} catch (e) {
 		// Internet Explorer
 		try {
   		xmlHttp_date_change=new ActiveXObject("Msxml2.XMLHTTP");
   	} catch (e) {
  			xmlHttp_date_change=new ActiveXObject("Microsoft.XMLHTTP");
   	}
   }
return xmlHttp_date_change;
}

function stateChanged_date_change() { 
if (xmlHttp_date_change.readyState==4) { 
	document.getElementById("output_form").innerHTML=xmlHttp_date_change.responseText;
}
}

function date_change() {
xmlHttp_date_change=GetXmlHttpObject_date_change();
if (xmlHttp_date_change==null) {
	alert ("Your browser does not support AJAX!");
	return;
} 
var url_date_change="date_select_sql.php"; 
url_date_change=url_date_change+"?selected_date=" + document.getElementById("select_date").value;
url_date_change=url_date_change+"&rand="+Math.random();
xmlHttp_date_change.onreadystatechange=stateChanged_date_change;
xmlHttp_date_change.open("GET",url_date_change,true);
xmlHttp_date_change.send(null);
}

 

date_select_sql.php

<?php
// Includes
include('inc_connect.php'); # MySQL Connection

header("Expires: Mon, 1 Jan 2000 00:00:00 GMT"); 
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
header("Cache-Control: no-store, no-cache, must-revalidate"); 
header("Cache-Control: post-check=0, pre-check=0", false); 
header("Pragma: no-cache");

// Begin Output Buffering
ob_start();

$errors = connect_to_mysql();
if (!$errors) {			
$sql = 'SELECT * FROM Data_2009 WHERE date = "'.$_GET['selected_date'].'" LIMIT 1;';
$result = mysql_query($sql);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
	$date = strtotime($row['date']);
	echo '<p>';
	echo '<input id="update_date" value="'.$row['date'].'" type="hidden">';
	echo '<input style="float: left; margin-right: 10px;" id="update_score" value="'.$row['score'].'" type="text">';
	echo '<input style="float: left; margin-right: 10px;" class="submit" type="button" value="Save" onclick="date_save()" />';
	echo '</p>';

}
mysql_close();
}

?>

 

I've tried to cut my code down to omit the parts that don't relate to this issue. If there are any errors it's probably due to that, as the code does work as I have it now, I just need to add fades, thanks!

[RichardRotterdam]

The beauty of jQuery is that there is already a lot of functionality build in you don' t have to write. Also jQuery's documentation is pretty good.

for your ajax read the following

http://docs.jquery.com/Ajax/jQuery.ajax#options

 

I'm not going to write the thing completely for you but here is a start

<script type="text/javascript">
//wait till the dom is ready 
$(document).ready(function () {
    //attach button event I use an onclick event here but you will need the change event
    $('#my_button').click(function(){
//do the ajax call
$.ajax({
    type: "POST",
    url: "ajax_page.php",//your request page url here
    data: "name=somedatayouwishtosend",
            //the msg var is the data that gets send 
    success: function(msg){
	/**
	 * you can inject this msg var like so
	 * $(#msg) is equavalent for document.getElementById('msg')
	 */

	$("#msg").html(msg);

    }
});
    });

});
</script>

 

To complete this script you will need the following

an event (change in your case)http://docs.jquery.com/Events

 

and an effect

http://docs.jquery.com/Effects

 

Goodluck with it and hope you get it working