Решение проблем с jQuery и неупорядоченным списком Загрузка - PullRequest
Новая
       16

Решение проблем с jQuery и неупорядоченным списком Загрузка

0 голосов
/ 14 января 2010

Я строю очень упрощенное неупорядоченное дерево списков в XHTML с несколькими уровнями глубины. Это работает так, что вы щелкаете по родительскому узлу, и он использует API-интерфейс jQuery .load (), чтобы выполнить обратный вызов AJAX на сервер, чтобы узнать, есть ли у этого узла дочерние элементы. Если это так, он вставляет эти узлы внутри. Когда вы снова нажимаете родительскую ссылку, она выполняет .remove (), чтобы удалить дочерние элементы.

Все отлично работает в Safari, Chrome и FireFox. Но в IE6, IE7, IE8 и Opera он ломается.

В IE код работает, когда родители раскрываются, чтобы показать детей. Но когда я щелкаю родителей, чтобы снова спрятать детей с помощью .remove (), он входит в детей и удаляет их детей, а не себя.

В Opera код расширяется, но затем расширяет поля по мере его расширения. Затем при удалении возникает та же проблема, что и в IE.

Что может быть причиной этой странности?

Образец размещен здесь: http://volomike.com/downloads/sample1.tar.gz

1 Ответ

1 голос
/ 16 января 2010

ОК, Воломике! Я посмотрел на ваш код и было несколько проблем:

Во-первых, когда вы используете load, он не заменяет выбранный узел, он заменяет его содержимое .

Итак, вы вызываете load для li, но также возвращаете тот же li в вашем результате AJAX. Впоследствии вы получаете это: 

<li id="node-7">
   <li id="node-7">
      ...

Кроме того, вы закрывали его двумя </ul> тегами в строке ajax.php 38 вместо одного ul и одного li.

Итак, если вы исправите эти вещи, он должен начать работать. Тем не менее, я бы подошел к тому, что вы делаете, совершенно по-другому. Я надеюсь, что это поможет вам:

HTML 

<ul id="tree">
  <li id="node-1"><a href="#">Cat 1</a></li>
  <li id="node-7"><a href="#">Cat 7</a></li>
</ul>

PHP 

// You'll have to write the code, but get it into this format:
// Basically push each row of a `mysql_fetch_array` into a new array
$ret = array(
  array('2', 'Cat 2'),
  array('3', 'Cat 3')
);

// Then return it to the browser like this:
echo json_encode( $ret );

JS / JQuery 

$(function(){
   $("ul#tree li a").live('click', function(e){
      e.preventDefault();
      var $li = $(this).closest('li');
      if( $li.find('ul').length ){
          // Remove UL if it exists
          $li.find('ul').remove();
      } else {
          // Get the ID
          var id = $li[0].id.replace('node-','');
          // Get the JSON for that id
          $.getJSON('/ajax.php', { id: id }, function( data ){
              // If data is not empty and it is an array
              if(data && $.isArray( data )){
                 // Build our UL
                 var $ul = $("<ul></ul>");
                 // Loop through our data
                 $.each(data, function(){
                    // Build an LI, use `text()` to properly escape text
                    // then append to the UL
                    $('<li id="node-' + this[0] + '"><a href="#"></a></li>')
                        .find('a').text(this[1])
                        .end().appendTo($ul);
                 });
                 // Finally, add the UL to our LI
                 $ul.appendTo($li);
              }
          });
      }
   });
});
...