web-dev-qa-db-ja.com

jqueryでdivを更新する

Divを更新したいのですが。サーバー上の新しい情報が必要です。他のすべての答えは、$。ajaxリクエストから新しいデータを取得し、そのデータをdivにロードし、非表示にして、再び表示するように指示したことを前提としています。

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

おそらく、Ajaxでデータを取得する必要があることを知っています。しかし、今は、ページを更新せずに、divに新しいHTMLを入れずに、divを更新するだけです。これは可能ですか？

javascriptjqueryhtmlrefresh
18
Walrus the Cat

ページを更新せずに、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;
}​
36
Merlyn Morgan-Graham

私は最初の解決策を試してみましたが、それは機能しますが、エンドユーザーはdivがfadeIn（）であるためリフレッシュしていることを簡単に識別できます。あなたはこのように試すことができます

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

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

8
Ibrahim Khaleel