Обновить div с помощью jquery

Я хочу обновить div. Он должен иметь новую информацию с сервера на нем. Все остальные ответы предполагают, что вы получили новые данные из вашего запроса $.ajax и сказали вам загрузить эти данные в свой div, скрыть его и показать его снова, например:

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

Я знаю, я знаю, я, вероятно, должен просто получить данные с Ajax. Но прямо сейчас я хочу просто обновить div, не обновляя страницу, и не помещая новый HTML в div. Возможно ли это?

Ответ 1

Я хочу просто обновить div, не обновляя страницу... Возможно ли это?

Да, хотя не будет очевидно, что он ничего не делает, если вы не измените содержимое div.

Если вам просто нужен графический эффект затухания, просто удалите вызов .html(data):

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

Вот демо, с которым вы можете общаться: http://jsfiddle.net/ZPYUS/

Он изменяет содержимое 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;
}

Ответ 2

Я попробовал первое решение, и оно работает, но конечный пользователь может легко определить, что div обновляется, поскольку он является fadeIn(), без угасания в я попытался .toggle(). toggle(), и он отлично работает. вы можете попробовать, как это

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