как сохранить DOM объект, подлежащий изменению?
всем привет!
уверен, что подскажете правильное решение. есть табличка. тыкнул на строку, нажал изменить, аякс прислал окошко (слоем поверх таблички, append к body). в окошке изменил поля, сабмит, аяксом послал в базу, получил в ответ (если без ошибок) новую табличку. как правильно зацепить объект таблички, чтобы поместить в него обновление? ведь при аппенде меняется DOM (если не путаю), просто this таблички держать в переменной не получится. сохранять в переменную id таблицы и потом $("#"+s_idTable).html(...) ? хочется элегантного решения без этого jquery-поиска. спасибо! |
Вообще, ничего "неэлегантного" в Вашем способе я не вижу. Но можете воспользоваться replaceChild
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<div id="outer">
<div id="inner">foo</div>
</div>
<script>
var div = document.createElement("div")
div.innerHTML = "bar"
div.id = "inner"
outer.replaceChild(div, inner)
</script>
</body>
</html>
|
Цитата:
|
Цитата:
|
окей, возможно, я слишком упростил вопрос.
на самом деле у меня не id, а классы. окошек может вылезти несколько, и таблиц может быть на странице несколько с одинаковым классом. но редактирую я конкретную. и при редакции хотелось бы сохранить ссылку именно на эту таблицу, чтобы потом ее не искать через $(".tableClass").html(...), а сразу o_savedTableObject.html(...). вот как сохранить этот o_savedTableObject неизменным и равным $(this) при клике на строке таблицы? |
Floyd, ты тестовые примеры не делаешь принципиально? :D
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
$('li').click(function(){
var obj=this;
setTimeout(function(){
alert(obj.innerHTML);
},1000);
});
})
</script>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
|
да вот на пальцах пытаюсь объяснить... :)
ksa, вот пользуясь твоим примером. сейчас в obj находится ссылка на li. вот представь, мы сейчас делаем $(document.body).append("<div>новое окно</div>"). а после этого alert(obj.innerHTML) будет ли после аппенда в obj тот самый li? |
Floyd,
что мешает при отправке запроса указать в какую таблицу вернуть ответ Цитата:
обычно так делают ...
var self = this;
$.ajax({
url: 'ajax/test.html',
success: function(data){
self.append(data) }
});
|
Цитата:
element .onclick = function(){
$.ajax({
url: 'ajax/test.html',
success: function(data){
element.append(data) }
});
}
то же самое |
pnpquest,
скажу больше: у вакуумного коня даже метода append может не быть, но в целом с вами согласен, то что определено когда-то, нет нужды определять снова. |
Цитата:
Просто сделай тестовый пример, как я - сразу все и прояснится. ;) |
парни, всё что написано выше - предельно ясно. вы сохранили this, послали аякс (не меняющий дом) и приаппендили через фактически, this, потому что DOM не изменился.
я же объяснил в первом посте: окно с редактированием я получаю аяксом, делаю аппенд к боди, при нажатии в нем сохранить и отправке формы аяксом это окно вырезается из DOM. а вот после этого я меняю табличку. вопрос конкретно в следующем: как сохранить this любого элемента DOM (в моем случае таблицы), чтобы при смене DOM (но элемент, в моем случае таблица, гарантированно останется) обратиться к элементу напрямую? |
Floyd,
если элемента нет -- к нему нельзя сделать ссылку заранее.(делегирование тут тоже не поможет, если нужен сам элемент, которого нет) |
элемент есть. сохранил его в переменную.
приаппендил еще ряд дивов снизу. дом изменился? видимо, да. что произошло с элементом? остался на странице. а в переменной его уже нет. верно? |
Floyd, если элемент остается (именно тот же элемент) на странице, при любых ее изменениях - ссылка как была на него, так и останется.
Тестовые примеры, я так понял, ты делать не собираешься... Так и будешь на пальцах пытаться чего-то объяснять? :D |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
$('li').click(function(){
var obj=this;
$(document.body).append("<div>новое окно</div>");
setTimeout(function(){
alert(obj.innerHTML);
},1000);
});
})
</script>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
|
ksa, спасибо за помощь.
почему не делаю пример - боязнь ошибиться в кавычках, незнание как его отладить здесь на форуме и тп. думал, объяснить на пальцах можно и получить ответ от знающих изнутри. мой пробел - я плохо знаю как происходит работа с DOM, когда и как он перестраивается и тд. нужно сесть вкурить ртфм один раз, исправлюсь. всё же: я правильно понял, что при любых аппендах-препендах у меня не андефайнётся obj? даже если врутрь твоего li динамически добавить span? сейчас не агитирую к созданию примера, прошу подсказать где почитать доходчиво про перестройку DOM и потерю объектов. еще раз спасибо! :thanks: |
Цитата:
Пока на странице есть именно этот элемент, в переменной будет ссылка именно на него. :yes: |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 12:25. |