Javascript работает в jsfiddle, но не в ASP .net

Question

Я хочу отфильтровать список элементов, нажав на один столбец/строку в элементе списка. Когда я нажимаю «Продажи», отображаются только элементы в списке из категории «Продажи». Когда я снова нажму «Продажи», отобразятся все элементы в списке.

Он работает, как я хочу на jsfiddle

Но почему он не работает в Visual Studio на ASP .NET? Он бросает исключение в

... 
var a = p.getElementsByTagName("a")[0]; 
... 

Это мой HTML-код:

<div data-role="page" id="page1"> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="false" data-filter="true" id="testList"> 
      <li data-icon="false"> 
       <p class="ui-li-heading"> 
        <strong> 1</strong> 
       </p> 

       <p class="ui-li-aside"> 
        <span> 
         <a href="javascript:void(0)" class="areaItem" id="areaItem">Sales</a> 
         &nbsp; 
         &nbsp; 
        </span> 
<span class="ui-icon ui-icon-gear" style="display: inline-block;"></span> 
<span class="ui-icon ui-icon-check" style="display: inline-block;"></span>  
       </p> 
      </li> 
    </div> 
</div> 

Это мой Javascript:

var filtered = 0; 

$(".areaItem").click(function() { 
    var SearchTerm = $(this).text(); 

    var ul = document.getElementById("testList"); 
    var liArray = ul.getElementsByTagName("li"); 

    for(var i=0; i<liArray.length; i++) { 
     var p = liArray[i].getElementsByTagName("p")[0]; 
     var a = p.getElementsByTagName("a")[0]; 

     if(filtered == 1) { 
      $(liArray[i]).show(); 
     } else { 
      if(a.text.localeCompare(SearchTerm) != 0) { 
       $(liArray[i]).hide(); 
      } 
     } 
    } 

    if (filtered == 0) { 
     filtered = 1; 
    } else { 
     filtered = 0; 
    } 
}); 

Answer 1

Я собираюсь начать рефакторинга ваш JavaScript:

$(document).ready(function() { //Make sure doc is loaded 
    var list = $("#testList"); 
    var listItems = $(list).find("li"); //could also do $("#listtest li); 

    $(".areaItem").click(function() { 
     var parentLi = $(this).closest("li"); //Get li that encloses clicked item 
     $(listItems).not(parentLi).toggle(); //Toggle display of other li 
    }); 
}); 

Это намного проще и сложнее, так как используется jQuery.

См: http://jsfiddle.net/5pMsR/3/

Это само по себе мое не будет достаточно, чтобы решить вашу проблему. Дважды проверьте, что отображается на странице. Особенно проверьте id, так как ASP.net печально известен для mangling IDs. Изменение имени Google ASP.net и идентификация asp.net ID для получения дополнительной информации. Если ваши идентификаторы искажены, используйте в своем скрипте следующее:

var list = $('#<%= YourListElement.ClientID%>'); 

или используйте класс.

UPDATE

После перечитывания ваш вопрос, я понял, что мое решение не может удовлетворить ваши потребности.Если вы хотите, как «Менеджер по продажам» пунктов видны, если любой из них кликают, вы можете использовать следующее:

var list = $("#testList"); 
var listItems = $(list).find("li"); //could also do $("#listtest li); 

$(".areaItem").click(function() { 
    var parentLi = $(this).closest("li"); //Get Parent li of clicked element 
    var filter = $(parentLi).find(".areaItem").text(); //Set Filter based on text of clicked item 
    $(listItems).filter(function(){ //Use jQuery filter to find based on text 
     //in the filter context 'this' is a li being filtered not the item clicked 
     //$(this).find(".areaItem").text() is used to compare against all list items text 
     return $(this).find(".areaItem").text() != filter; 
    }).toggle(); 

}); 

См: http://jsfiddle.net/5pMsR/8/

Update 2

Я обновил код и чтобы сделать решение более надежным на основе комментариев. Похоже, что в финальном рендере тег a отсутствует. Изменения кода теперь будут выполняться в соответствии с классом CSS, а не тегом.

Answer 2

У меня была аналогичная проблема, как это в прошлом: проблема заключалась в жизненном цикле страницы ASP.NET и анализе javascript до того, как элемент (элементы) был создан в DOM. Поскольку вы пытаетесь привязать обработчик кликов к классу .areaItem, элементы, являющиеся членами этого класса, должны быть доступны в DOM, когда функция будет разобрана.

Из памяти я думаю, что в конечном итоге делегирования нажмите на документ Thusly:

$(document).on(click, ".areaItem", function() { <function content> }); 

Я считаю, что это делает синтаксический анализ происходит после load события, на котором были созданы все элементы.

Причина, по которой я не уверен, заключается в том, что я удалил весь этот код и сделал это по-другому: поставив блок сценариев непосредственно на мою страницу контента после элементов управления ASP и HTML. Не идеально, если вы желая иметь JS в заголовке или в отдельном файле, но встраивание его после того, как содержание, действительно кажется, работает:

<div data-role="page" id="page1"> 
<div data-role="content"> 
    <ul data-role="listview" data-inset="false" data-filter="true" id="testList"> 
     <li data-icon="false"> 
      <p class="ui-li-heading"> 
       <strong> 1</strong> 
      </p> 

      <p class="ui-li-aside"> 
       <span> 
        <a href="javascript:void(0)" class="areaItem" id="areaItem">Sales</a> 
        &nbsp; 
        &nbsp; 
       </span> 
       <span class="ui-icon ui-icon-gear" style="display: inline-block;"></span> 
       <span class="ui-icon ui-icon-check" style="display: inline-block;"></span>  
      </p> 
     </li> 
    </div> 
</div> 

<script> 
    var filtered = 0; 

    $(".areaItem").click(function() { 
    var SearchTerm = $(this).text(); 

    var ul = document.getElementById("testList"); 
    var liArray = ul.getElementsByTagName("li"); 

    for(var i=0; i<liArray.length; i++) { 
     var p = liArray[i].getElementsByTagName("p")[0]; 
     var a = p.getElementsByTagName("a")[0]; 

     if(filtered == 1) { 
      $(liArray[i]).show(); 
     } else { 
      if(a.text.localeCompare(SearchTerm) != 0) { 
       $(liArray[i]).hide(); 
      } 
     } 
    } 

    if (filtered == 0) { 
     filtered = 1; 
    } else { 
     filtered = 0; 
    } 
}); 
</script> 

Answer 3

Я пришел с решением, которое немного чудом для меня, поскольку я новичок в javascript. Все работает отлично в IE, но в Chrome все ли исчезают после нажатия.

var filtered = 0; 

     $(".areaItem").click(function() { 
      var SearchTerm = $(this).text(); 

      $('#testList > li').each(function() { 
       var a = $(this).find("a").attr("id","areaItem"); 

       //alert(a[0].innerHTML); 

       if (filtered == 1) { 
        $(this).show(); 
       } else { 
        //alert(a.text()); 
        if (a[0].innerHTML.localeCompare(SearchTerm) != 0) { 
         $(this).hide(); 
        } 
       } 

      }); 


      if (filtered == 0) { 
       filtered = 1; 
      } else { 
       filtered = 0; 
      } 
     });