Вход

Просмотр полной версии : DOM манипуляции с ответом сервера.


ekkl
06.09.2010, 00:11
Может меня заносит, и я снова усложняю себе жизнь...
Значит так, по аджакс-запросу сервер возвращает какой-то результат в виде куска html кода. Из этого куска надо вырезать div с класом xyz и вставить его определенный div. (Он уже есть в загруженном документе.) А все "остальное" в другой div.
Может такая нарезка черезчур ...
Если есть какие-то другие более умные идеии, буду рад выслушать.:)

B@rmaley.e><e
06.09.2010, 00:39
var data = $(data); // data - ответ от сервера
$('div.xyz', data).appendTo(div1); // div1 - куда будем вставлять div.xyz
data.appendTo(div2); // div2 - куда будем вставлять все остальное.

Kolyaj
06.09.2010, 12:37
Если есть какие-то другие более умные идеии, буду рад выслушать.
Возвращать информацию в таком виде, чтобы не пришлось ничего вырезать.

ekkl
06.09.2010, 18:46
Например?
Упаковать в json? А так можно?

Kolyaj
06.09.2010, 18:56
Что значит можно? Возвращайте в удобном для вас виде, кому какая разница.

ekkl
06.09.2010, 21:07
Я имею в виду, что сама разметка не "пострадает"?
Если в данных есть скрипт.
Дополнительные нагрузки на сервер при упаковку в json меня также беспокоят.
Ну и, есть ли какой-то способ отравить как ответ сервера несколько данных (которые можно рассортировать по дивах), кроме как упаковать их в json. Я же потому и спрашиваю.

inGray
07.09.2010, 09:43
Можно готовый HTML возвращать :-?

ekkl
07.09.2010, 13:12
Можно готовый HTML возвращать
И вырезать то что нужно и перемещать, куда нужно уже на стороне клиента?

inGray
07.09.2010, 13:19
Может без вырезания обойтись? А возвращать только то что нужно вставить?

ekkl
07.09.2010, 14:21
А если в одни див надо вставить одно, а в другой-другое?
Например, данные с сервера подгружаются в плавающий див. (Т.е. диалоговое окно. Просто я хочу, чтобы тег с <h1> стал заголовком всего окна.

inGray
07.09.2010, 14:30
var data = $(data); // data - ответ от сервера
$('div.xyz', data).appendTo(div1); // div1 - куда будем вставлять div.xyz
data.appendTo(div2); // div2 - куда будем вставлять все остальное.

Тогда так

ekkl
07.09.2010, 16:11
Что-то не работает....function(data)
{
var sret = $(data);
$('h2', sret).appendTo('#dh2');
$('#ajaxload').stop().fadeOut(500);
// $(sret).appendTo('#ajaxcontent');
$('#ajaxcontent').stop().fadeIn(500);}...
Ровным счетом ничего не происходит.
Во-вторых, appendTo добавляет данные, к уже имеющимся, а мне нужно замещать.
Смотрел по доккументации функцию replaceAll но она не произвдит никаких видимых изменений.

inGray
07.09.2010, 16:35
А полностью код обработчика покажите? И то что в data ajax-ом возвращается?

По поводу замещения.. сначала почистите содержимое (http://api.jquery.com/empty/), а затем вставьте нужное.

ekkl
07.09.2010, 17:51
function loadform(a)
{$.ajax({url:a['href'],beforeSend:function(){opendlg();$('#ajaxload').fa deIn(500);$('#ajaxcontent').hide();},success:
function(data)
{
var sret = $(data);
$('h2', sret).appendTo('#dh2');
$('#ajaxload').stop().fadeOut(500);
$(sret).appendTo('#ajaxcontent');
$('#ajaxcontent').stop().fadeIn(500);}})}

<div class="popup" id="dialog" style="display:none; z-index:10000">
<div id="dh2">&nbsp;</div>
<div id="ajaxload">
<div style="text-align:center">
<?= image('ajaxload') ?>
<br clear="all" /><br clear="all" />
<h3>Пожалуйста подождите, идет обработка данных........</h3>
</div>
</div>
<div id="ajaxcontent">

</div>
</div>
А возвращаем мы, к примеру, это
<h2>create tags</h2>
<script type="text/javascript">
$().ready(function() {

// validate signup form on keyup and submit
$("#tag").validate({
submitHandler: function(){formgears('#tag');}});
})
</script>

<form action="<?= part_url('edt/savetags.htm') ?>" method="POST" id="tag">
<div class="field">
<?= form_labelinput('title', $title , 'tag_title') ?>
</div>....
Кстати, $(sret).appendTo('#ajaxcontent'); Работает. но $('h2', sret).appendTo('#dh2'); НЕТ.
Пробовал вставлять все, потом вырезать - так работает, но как-то некрасиво.

ekkl
07.09.2010, 19:12
Странно.
$('.field', sret).appendTo('#dh2'); работает.
Если весь кусок возвращаемого кода "обернуть" в div тогда все нормально.
Почему так?
<div>
<h2>create tags</h2>
<script type="text/javascript">
$().ready(function() {

// validate signup form on keyup and submit
$("#tag").validate({
submitHandler: function(){formgears('#tag');}});
})
</script>

<form action="<?= part_url('edt/savetags.htm') ?>" method="POST" id="tag">

<div class="field">
<?= form_labelinput('title', $title , 'tag_title') ?>
</div>
<div class="field">
<?= form_labelinput('tag', $tag, 'tag_tag') ?>
<div class="notice"><?= lang('tag_not_required') ?></div>
</div>
<h4><?= lang('tag_descrypt') ?></h4>
<div class="field">
<textarea name="descr" rows="4" cols="20" id="descr"><?= $descrbb ?></textarea>
</div>
<h4><?= lang('acces_permission') ?></h4>
<div class="field">
<?= lang('user_group', 'usergroup'); ?>
<?= form_dropdown('usergroup', $usergroup, $permission, 'id="usergroup"') ?>
</div>
<div class="right field">
<?= form_hidden('id', $id) ?>
<?= form_hidden('oldtag', $oldtag) ?>
<?= form_hidden('oldtitle', $oldtitle) ?>
<?= $this->gears->submit('create') ?>
</div>
</form>
<script type="text/javascript">
SMarkUp.bind(
'descr', //textarea id
'bbcode', //makup configuration name
120 //height of textarea
);
</script>
</div>

B@rmaley.e><e
07.09.2010, 19:16
Потому что используя $('h2', sret) Вы выбираете дочерний узел h2. А он у вас на "нулевом" уровне, т.е. в коллекции $(sret); Поэтому в случае <h2><h2>Content</h2></h2> выбралась бы только внутренняя часть.
Используйте$(sret).filter('h2');

ekkl
07.09.2010, 23:04
Кстати,
function(sr)
{
data = $(sr);
$('#dh2').empty();
$('#ajaxcontent').empty();
$('#dlgfooter').empty();
$(data).filter('h2').appendTo('#dh2');
$(data).filter('.sitefooter').appendTo('#dlgfooter ');
$('#ajaxload').stop().fadeOut(500);
$(data).appendTo('#ajaxcontent');
$('#ajaxcontent').stop().fadeIn(500);}})}тоже не работает.