Форум

wUI · #1 (**permalink**) 22.08.2012, 15:38

Всем доброго времени суток

Имеется нумерованый список ul:

<ul id="main">
                <img onclick="getTreeMain('main');" class="imgTree" src="./resources/image/03.png" /> Тык ми!
            </ul>

При нажатии на картинку выполняется следующий код:

function getTreeMain(w) 
            {
                $.ajax({
                    type: 'POST',
                    data: "object="+w,
                    async: true,
                    url: './engine/modules/getData/getTree.php',
                    dataType: 'Json',
                    success: openTreeObj
                });
            }
function openTreeCdng(data)
            {
                for (var i = 0; i < data.length; i++) 
                {
                    $("<ul><img id= \"oid_"+data[i].objId+"\" onclick = \"getTreeObj("+data[i].objId+");\" class=\"imgTree\" src=\"./resources/image/04.png\" />"+data[i].objCapt+" "+data[i].objName+"</ul>").appendTo("#main");
                }
            }

Все отрабатывает и к элементу ul "main" достраиваются дочерние объекты нумерованного списка. В каждом из которых так же имеется изображение с индивидуальным ID, при нажатие на которое дочка получает свои дочерние элементы. Код:

function getTreeObj(w) 
            {
                $.ajax({
                    type: 'POST',
                    data: "object="+w,
                    async: true,
                    url: './engine/modules/getData/getTree.php',
                    dataType: 'Json',
                    success: openTreeObj
                });
            }
function openTreeObj(data)
            {
                for (var i = 0; i < data.length; i++) 
                {   
                    $("<ul><img onclick = \"getTreeObj("+data[i].objId+");\" class=\"imgTree\" src=\"./resources/image/04.png\" />"+data[i].objCapt+" "+data[i].objName+"</ul>").appendTo("#oid_"+data[i].objId);
                }
            }

Но к дочкам объекта "main", элементы не добавляются.
Вижу что обращение к серверу есть, и json массив с данными возвращается, обращаюсь к правильно указанным id. Ощущение, что они рпосто не видятся.

Прощу помощи советом!=)

Deff · #2 (**permalink**) 22.08.2012, 16:15

wUI,А чо Вы хотите этим добица ?
Почему .appendTo - а не append ? http://jquery-docs.ru/Manipulation/appendTo/#selector

http://jquery-docs.ru/Manipulation/append/#content

wUI · #3 (**permalink**) 23.08.2012, 06:21

Deff,
наверное не понятно объяснил.

Своего рода это дерово объектов. Изначально существует родитель "main", при нажатие на него получаю его подобъекты и они красиво отстраиваются, при нажатии на подобъект он должен получить от серва свои дочерние объекты и их остроить, но этого не происходит. О_о

wUI · #4 (**permalink**) 23.08.2012, 07:31

Пробовал следующие варианты:
1.

$("#oid_"+data[i].objId).append("<ul><img onclick = \"getTreeObj("+data[i].objId+");\" class=\"imgTree\" src=\"./resources/image/04.png\" />"+data[i].objCapt+" "+data[i].objName+"</ul>");

2.

document.getElementById('oid_'+data[i].objId).innerHTML+="<ul><img onclick = \"getTreeObj("+data[i].objId+");\" class=\"imgTree\" src=\"./resources/image/04.png\" />"+data[i].objCapt+" "+data[i].objName+"</ul>"

Оба не выходят О_о

И вот вопрос, почему динамически полученные дочерние объекты достраиваются к жестко прописанному объекту "main", а далее по иерархии нет, т.е. дочерний объект к себе не привязывает своих дочек?
Будно динамически отсроеные дочки родителя "main" не видятся.

wUI · #5 (**permalink**) 23.08.2012, 08:01

Вот пример кода, чтобы понятней было, который можно запустить у себя:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег UL</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <style type="text/css">
  ul {
    list-style-type: none;
    margin-left: 10px;
    }
  li {
    list-style-type: none;
    margin-left: 10px;
    }
  img {
    cursor: pointer;
    }
  </style>
  <script type="text/javascript">
    function getTreeMain(w) {
        for (i = 0; i < w; i++) {
            $("#main").append("<ul><img id= \"oid_"+i+"\" onclick = \"getTreeObj("+i+");\" src=\"http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png\" />daughter_0_"+i+"</ul>");
        }
    }
    function getTreeObj(w) {
        for (i = 0; i < w; i++) {
            $("#oid_"+i).append("<ul><img id= \"oid2_"+i+"\" src=\"http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png\" />daughter_1_"+i+"</ul>");
        }
    }
  </script> 
 </head>
 <body>
  <ul id="main"><img onclick="getTreeMain(5);" src="http://best-iconki.ru/downloads/PNG/32/programms-0002-1.png"></br>
  </ul>

 </body>
</html>

Deff · #6 (**permalink**) 23.08.2012, 10:42

Сообщение от wUI

$("#oid_"+i).append

Эта фигня - некорректна - Вы пытаетесь вставить объект внутрь тега картинки
И второе - У Вас повторяются id - что - не Айс - селектор $("#oid_"+i).будет искать только первый и единственный такой id

Возможно устроит подобное.. :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег UL</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <style type="text/css">
  ul {
    list-style-type: none;
    margin-left: 10px;
    }
  li {
    list-style-type: none;
    margin-left: 10px;
    }
  img {
    cursor: pointer;
    }
  </style>



  <script type="text/javascript">

    function getTreeMain(w) {
        for (i = 0; i < w; i++) {
	 var obj = '<ul><img id="oid-0-'+i+'" onclick ="getTreeObj('+i+',this)"';
	     obj+= 'src="http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png" />';
	     obj+= 'daughter-0-'+i+'</ul>';//alert(obj)
            $("#main").append(obj); 
        }
    }


  var J=0; //Добавил для Уникальности id
    function getTreeObj(w,a) {//alert("A")
  J++;
        for (i = 0; i < w; i++) {
	 var obj = '<ul><img id="oid2-'+J+'-'+i+'"';
	     obj+= 'src=\"http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png"'
	     //obj+= 'onclick ="getTreeObj('+J+',this)"'; //можно раскомментить строку
	     obj+= ' />daughter-'+J+'-'+i+'</ul>';//alert(obj)
            $(a).after(obj);
        }
    }
  </script>





 </head>
 <body>
  <ul id="main"><img onclick="getTreeMain(5,this)" src="http://best-iconki.ru/downloads/PNG/32/programms-0002-1.png"></br>
  </ul>

 </body>
</html>

wUI · #7 (**permalink**) 23.08.2012, 11:39

Deff,
Спасибо, Вы как всегда на высоте!=) Указать ошибку долбошарому и вправить руки криворукому!
Не понимаю как не заметил того, что пытался привязать элементы дочернии картинке!

В итоге оставлю вот так:

function getTreeMain(w) {
        for (i = 0; i < w; i++) {
            $("#main").append("<ul id= \"oid_"+i+"\"><img onclick = \"getTreeObj("+i+");\" src=\"http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png\" />daughter_0_"+i+"</ul>");
        }
    }
    function getTreeObj(w) {
        for (i = 0; i < w; i++) {
            $("#oid_"+w).append("<ul id= \"oid2_"+i+"\"><img src=\"http://best-iconki.ru/downloads/PNG/32/forsite-0003-5.png\" />daughter_1_"+i+"</ul>");            
        }
    }

Форум

Справочник

Discord чат

Курсы javascript