Вопрос по jquery, html, javascript – обновить div с помощью jquery

18

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

<code>$("#panel").hide().html(data).fadeIn('fast');
</code>

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

@ gillesc Разве это не помещает новый HTML в div? Thomas
Какой смысл обновлять div без добавления нового html-кода? Я предполагаю, что у вас есть оригинальный контент в div, который каким-то образом изменился и должен быть возвращен в div? Thomas
Вы хотите визуальный эффект обновления в div? Saanch
Просто используйте .empty () для элемента div, чтобы очистить его или даже .html ('' ') GillesC
Вы уже делаете это правильно.jsfiddle.net/UUrbt/7 root

Ваш Ответ

2   ответа
36

without refreshing the page ... Is this possible?

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

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

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

Вот демоверсия, с которой вы можете возиться:http://jsfiddle.net/ZPYUS/

Он изменяет содержимое div, не совершая ajax-вызов на сервер и не обновляя страницу. Содержание жестко, хотя. Вы не можете ничего с этим поделать, не связавшись каким-либо образом с сервером: 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;
}​
@ RokoC.Buljan: Потому что мы все знаем, насколько эффективны интернет-протесты, особенно при изменении культурного мема, которыйbeen around somewhere between 50 and 80 years :)
Я начну ходатайство о прекращении действия этого 'foo bar foobar' apos; эра :)
8

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

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

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

Похожие вопросы