Jquery’in AJAX özelliği ile DIV etiketini manuel veya otomatik olarak yenileme örnekleri.
<a href="javascript:;" id="manuel"> <i class="fa fa-refresh"></i> </a>
<ul class="list-group" id="manuelyenileme">
<li class="list-group-item">Acı acıyı keser, su sancıyı </li>
<li class="list-group-item">Aba altında er yatar </li>
<li class="list-group-item">Ağaç Yaş İken Eğilir </li>
<li class="list-group-item">Tereciye tere satılmaz </li>
<li class="list-group-item">Davul birinin boynunda, tokmak bir başkasının elinde </li>
</ul>
<ul class="list-group" id="otomatikyenileme">
<li class="list-group-item">Acı acıyı keser, su sancıyı </li>
<li class="list-group-item">Aba altında er yatar </li>
<li class="list-group-item">Ağaç Yaş İken Eğilir </li>
<li class="list-group-item">Tereciye tere satılmaz </li>
<li class="list-group-item">Davul birinin boynunda, tokmak bir başkasının elinde </li>
</ul>JQUERY manuel yenileme
<script>
(function($){
$(document).on("click","#manuel", function(){
$.ajax({
type: "GET",
url: "ajax.php",
data: "manuel=manuel",
success: function(data){
if (data){
$('#manuelyenileme').fadeOut('fast',function(){
$(this).html(data);
}).fadeIn();
}
}
});
});
})(jQuery);
</script>JQUERY otomatik yenileme
<script>
(function($){
yenile(); //
})(jQuery);
function yenile(){
$.ajax({
type: "GET",
url: "ajax.php",
data: "manuel=otomatik",
success: function(data){
if (data){
$('#otomatikyenileme').fadeOut('fast',function(){
$(this).html(data);
}).fadeIn();
}
setTimeout(yenile, '5000'); //5 saniye
}
});
}
</script>PHP – ajax.php
<?PHP
include 'db.php';
if (isset($_GET['manuel']) && $_GET['manuel'] == 'manuel'){
$sql = "SELECT * FROM iller ORDER BY RAND() LIMIT 5";
$res = $mysqli->query($sql);
$yaz ='';
while($nt=$res->fetch_array()){
$yaz .= '<li class="list-group-item">'.$nt['sehir'].' </li>';
}
echo $yaz;
}
//
if (isset($_GET['manuel']) && $_GET['manuel'] == 'otomatik'){
$sql = "SELECT * FROM iller ORDER BY RAND() LIMIT 5";
$res = $mysqli->query($sql);
$yaz ='';
while($nt=$res->fetch_array()){
$yaz .= '<li class="list-group-item">'.$nt['sehir'].' </li>';
}
echo $yaz;
}
?>
