web-dev-qa-db-ja.com

ページ全体をリロードせずに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>

これは私がいくつかを検索した後のものであり、何が起こるかは、Small.phpをロードしますが、それを更新したり、15秒ごとに情報を更新したりしません。

助けてください！

表示されるはずのすべてのphp配列をSmall.phpですべて実行し、それを含めるページは分離されるように追加する必要があります。

編集：誰も気づかなかったのは、jQueryを参照する最初のスクリプトに終了タグがなく、それが2番目のスクリプトを壊していたことです。適切な終了タグを追加した後、スクリプトはようやく機能しましたが、最初にfadeOutを使用しないとfadeInは正しく表示されません。

javascriptphpjqueryhtmlajax
7
Fate Averie

コードは機能しますが、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 });またはランダムハックを使用してこれを行うことができます。

9
kelunik

これを試して

<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>
7
Shadow

HTMLは15秒ごとに更新されるわけではありません。原因は、ブラウザのキャッシュです。 ブラウザのキャッシュを回避するためにMath.random()を追加、@ shadowで指摘されているようにDOMが完全にロードされるまで待つ方が良いでしょう。 しかし、主な原因はキャッシングだと思います

<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>
1
Khanh TO

使用しているコードには、フェードアウト効果も含まれます。これはあなたが達成したいことですか？そうでない場合は、次のINSIDE "Small.php"を追加する方が合理的かもしれません。

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

これにより、small.phpページに15秒ごとに更新が追加されます。つまり、PHPによって別のページに呼び出された場合、その「フレーム」のみがリロードされます。

問題が解決したかどうかをお知らせください！？

-ブラッド

0
Brad Andrews
<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>
0
user2663434