Javascript works in jsfiddle but not in ASP .net

I want to filter list of items by clicking on one column/string in list item. When I click on Sales, only items in list from Sales category will be displayed. When I click again on Sales all items in list will be displayed.

It works like I want on jsfiddle

But why it is not working in Visual Studio on ASP .net ? It throws exception in

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

This is my HTML code:

<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>

This is my 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;
    }
});

Answers


I'm going to start by refactoring your 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
   });
});

It is a lot simpler and more inline with how jQuery is meant to be used.

See: http://jsfiddle.net/5pMsR/3/

That in itself my not be enough to fix your problem. Double check what is rendered to the page. Particularly check id's as ASP.net is notorious for mangling IDs. Google ASP.net name mangling and asp.net ID mangling for more info. If your IDs are mangled use the following in your script

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

or use a class.

UPDATE

Upon re-reading your question I've realized that my solution may not meet your needs. If you want both "Sales" items visible if either of them are clicked you could use the following:

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();

});

See: http://jsfiddle.net/5pMsR/8/

Update 2

I've updated the code and fiddle above to make the solution more robust based on comments. It would appear that the a tag is not present in the final render. The code changes will now search based on CSS class as opposed to tag.


Need Your Help

Hadoop. Wordcount with statistic

java hadoop

Ok. I have completed wordcount hadoop-program. But how I can calculate statistic (which word used most times, which average times and which word minimum times used)?

istream and ostream across platforms

c++ portability iostream byte-order

Suppose I would want to write this on my big-endian machine

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.