SanKylo. Mój przykład jest praktycznie bardzo podobny do tych Facebookowych. Wystarczy jedynie odpowiednio sformatować tego diva, co tam dałem przy użyciu CSS. Nie pisałem tego z racji czystości samego kodu i braku miejsca. Skupiłem się na samym pobraniu danych. Wystarczy, że teraz dodasz jeszcze w kodzie trochę formatowania dla tego elementu, aby przypominał wyglądem okienko. Oto mój przykładowy kod:
Jest to ten sam kod, co wcześniej, ale dodany styl dla tego elementu i na początku kodu JavaScript ukrycie go. Po otrzymaniu danych od serwera okienko "wyskoczy". Na takiej zasadzie działa facebook.
@SanKylo: Dziękuję ;-)
Kod PHP:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AJAX test</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$('#result').css('display','none');
$("#submit").click(function() {
var text = $("#text").attr("value");
$.ajax({
url: "get.php?text="+text,
success: function(data) {
$('#result').html(data);
$('#result').show('slow');
}
});
return false;
});
});
</script>
<style>
#result {
background-color: #fff;
border: 1px solid #00f;
width: 200px;
height: 100px;
position: absolute;
margin-left: 100px;
margin-top: 25px;
}
</style>
</head>
<body>
<form method="get" action="get.php">
<input type="text" id="text" name="text" />
<input type="submit" id="submit" />
</form>
<div id="result"></div>
</body>
</html>
Jest to ten sam kod, co wcześniej, ale dodany styl dla tego elementu i na początku kodu JavaScript ukrycie go. Po otrzymaniu danych od serwera okienko "wyskoczy". Na takiej zasadzie działa facebook.
@SanKylo: Dziękuję ;-)
