javascript - jqueryでdivをリフレッシュ

Question

div を更新したいと思います。サーバーからの新しい情報が含まれているはずです。他のすべての回答は、 $.ajax リクエストから新しいデータを取得したことを前提としており、そのデータを div にロードし、非表示にしてから再度表示するように指示します。

$("#panel").hide().html(data).fadeIn('fast');

Ajax でデータを取得する必要があります。しかし、今は、ページを更新せずに、新しい HTML を div に入れずに、div を更新したいだけです。これは可能ですか？

score 36 · Accepted Answer

ページを更新せずに div だけを更新したい...これは可能ですか?

はい。ただし、div の内容を変更しない限り、何もしないことは明らかではありません。

グラフィカルなフェードイン効果だけが必要な場合は、.html(data)呼び出しを削除するだけです。

$("#panel").hide().fadeIn('fast');

これは、いじることができるデモです: http://jsfiddle.net/ZPYUS/

サーバーへの ajax 呼び出しを行わず、ページを更新することなく、div の内容を変更します。ただし、コンテンツはハードコードされています。サーバーになんらかの方法で接続しない限り、その事実については何もできません: ajax、ある種のサブページ要求、またはある種のページ更新。

html:

<div id="panel">test data</div>
<input id="changePanel" value="Change Panel" type="button">

JavaScript:

$("#changePanel").click(function() {
    var data = "foobar";
    $("#panel").hide().html(data).fadeIn('fast');
});

CSS:

div {
    padding: 1em;
    background-color: #00c000;
}

input {
    padding: .25em 1em;
}

score 9 · Accepted Answer

私は最初の解決策を試してみましたが、うまくいきましたが、エンドユーザーは、フェードインなしで .toggle().toggle() を試してみましたが、完全に機能します。あなたはこのように試すことができます

$("#panel").toggle().toggle();

私はメッセンジャーを開発していて、チャットボックスを最小化および最大化する必要があるため、私にとっては完全に機能し、上記のコードよりもこれが最適です。

2 に答える 2