Reload the DIV без перезагрузки всей страницы

Question

У меня есть тег Div, который содержит php, чтобы заполнить этот div информацией , что я хочу сделать, чтобы сделать так, чтобы страница вызывалась каждые 15 секунд, чтобы она могла обновлять информацию там без необходимости перезагружать всю веб-страницу. Я пытался сделать это с помощью JavaScript/JQuery, и я просто не могу заставить его работать

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> 
<script type="text/javascript"> 
var auto_refresh = setInterval(
function() 
{ 
$('.View').load('Small.php').fadeIn("slow"); 
}, 15000); // refresh every 15000 milliseconds 
</script> 

<div class="View"><?php include 'Small.php'; ?></div> 

это то, что я после поиска некоторые, и то, что происходит, оно загружает Смолл. php, но он не обновляет его и не обновляет информацию каждые 15 секунд.

, пожалуйста, помогите!

Я должен добавить все мои php-массивы, которые должны отображаться, все они выполняются в Small.php, а страница, в которую я включаю, просто изолирована.

EDIT: Что никто не заметил, так это то, что мой первый скрипт, ссылающийся на jQuery, не имел закрывающего тега, и это нарушало мой второй скрипт. после добавления в правильный закрывающий тег скрипт, наконец, работал, но fadeIn не отображается должным образом, не используя сначала fadeOut.

Answer 1

Ваш код работает, но fadeIn не делает, потому что это уже видно. Я думаю, что эффект вы хотите достичь является: fadeOut → load → fadeIn:

var auto_refresh = setInterval(function() { 
    $('.View').fadeOut('slow', function() { 
     $(this).load('/echo/json/', function() { 
      $(this).fadeIn('slow'); 
     }); 
    }); 
}, 15000); // refresh every 15000 milliseconds 

Попробуйте здесь: http://jsfiddle.net/kelunik/3qfNn/1/

Дополнительное примечание: Как упоминалось Khanh TO, вам может понадобиться, чтобы избавиться от браузера внутреннего кэш. Вы можете сделать это, используя $.ajax и $.ajaxSetup ({ cache: false }); или случайный взлом, упомянутый им.

Answer 2

попробовать это

<script type="text/javascript"> 
window.onload = function(){ 


var auto_refresh = setInterval(
function() 
{ 
$('.View').html(''); 
$('.View').load('Small.php').fadeIn("slow"); 
}, 15000); // refresh every 15000 milliseconds 

} 
</script> 

Answer 3

Ваш HTML не обновляется каждые 15 секунд. Причиной может быть кеширование браузера. Добавьте Math.random(), чтобы избежать кеширования браузера, и лучше подождать, пока DOM будет полностью загружен, как указано @shadow. Но я думаю, что основной причиной является кэширование

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" /> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var auto_refresh = setInterval(
    function() 
    { 
     $('.View').load('Small.php?' + Math.random()).fadeIn("slow"); 
    }, 15000); // refresh every 15000 milliseconds 
}); 
</script> 

Answer 4

Код, который вы используете, также будет включать эффект затухания. Это то, чего вы хотите достичь? Если нет, возможно, имеет смысл просто добавить следующее INSIDE «Small.php».

<meta http-equiv="refresh" content="15" > 

Это добавляет освежать каждые 15 секунд к small.php страницу, которая должна означать, если вызывается PHP на другую страницу, только то, что «кадр» перезагружается.

Сообщите нам, если это сработало или решило вашу проблему !?

-Brad

Answer 5

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" /> 

<div class="View"><?php include 'Small.php'; ?></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
$('.View').load('Small.php'); 
var auto_refresh = setInterval(
    function() 
    { 
     $('.View').load('Small.php').fadeIn("slow"); 
    }, 15000); // refresh every 15000 milliseconds 
     $.ajaxSetup({ cache: true }); 
    }); 
</script>