I’m having an issue with hiding and showing li elements with jQuery. My code works in Chrome and Internet Explorer 9, but if Internet Explorer 9 enters compatibility mode, or is set to a lower browser, it silently fails.
The idea is to have a drop down that filters by class and have the results paged. For the sample below, I have removed most of the paging code.
As far as I can tell, the issue is with selector.children().hide();, though I’m not certain about this.
I ran the HTML through the W3C validator, and it seems fine, while I get no JavaScript errors in the Chrome tools, and no obvious errors in the Internet Explorer development tools (though I am less familiar with these and could be missing something).
If you save the below into an HTML file, you should get a drop down that when selected filters the li elements. in Chrome at least:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
//<![CDATA[
function buildPaging(filterClass) {
var selector = $('.paging');
selector.wrap("<div class='simplePagerContainer'></div>");
var pageSize = 2;
var pageCounter = 1;
var currentPage = 1;
var step =0;
selector.children().each(function (i) {
var item = $(this);
var hasClass = false;
if (filterClass !== undefined &&
filterClass !== '' &&
filterClass !== 'Sites:' &&
item.hasClass(filterClass)) {
hasClass = true;
}
else
if (filterClass === undefined ||
filterClass === '' ||
filterClass === 'Sites:') {
hasClass = true;
}
if (step < pageCounter * pageSize && step >= (pageCounter - 1) * pageSize && hasClass) {
$(this).addClass("simplePagerPage" + pageCounter);
step++;
}
else
if (hasClass) {
$(this).addClass("simplePagerPage" + (pageCounter + 1));
pageCounter++;
step++;
}
});
selector.children().hide();
selector.children(".simplePagerPage" + currentPage).show();
};
function cleanPaging() {
$('li').removeClass('simplePagerPage1 simplePagerPage2 simplePagerPage3 simplePagerPage4 simplePagerPage5 simplePagerPage6 simplePagerPage7 simplePagerPage8')
$('.simplePagerNav').remove();
}
$(document).ready(function() {
buildPaging();
});
var selectedItem;
function hideMessage(period) {
var classList = $('.EMI_Message_Option');
selectedItem = period;
var keep;
for (var i = 0; i < classList.length; i++) {
if (classList[i].innerHTML !== period) {
$('.' + classList[i].innerHTML).hide();
}
else {
keep = classList[i].innerHTML;
}
}
$('.' + keep).show();
cleanPaging();
buildPaging(period);
}
//]]>
</script>
<div class="EMI_Messages">
<div class="EMI_Messages">
<div class="MessageDropdown">
<select onchange="hideMessage(this.value)">
<option>Sites:</option>
<option>CSR</option>
<option>Sales</option>
</select>
</div>
<ul class="paging">
<li class="CSR">
<div>
<div>
<a href="http://example.com/">CSR</a>
</div>
<div>byline</div>
<div>11/26/2012 12:00:00 AM</div>
</div>
</li>
<li class="Sales">
<div>
<div>
<a href="http://example.com/">Sales</a>
</div>
<div>sample text</div>
<div>11/21/2012 12:00:00 AM</div>
</div>
</li>
</ul>
</div>
<div class="pager"></div>
</div>
</body>
</html>
The problem seems to be caused by this piece of HTML:
In some versions of IE,
this.valueis not being passed as desired to thehideMessage()function. It is passed as an empty string so the code doesn’t work.It works for me if that is changed to this:
FYI, here is your code with the fix applied in a jsFiddle: http://jsfiddle.net/jfriend00/9hUK9/
Now that we see the problem, you can see a similar Q&A here: Getting the value of a SELECT box in Internet Explorer
Unrelated to the problem you asked about, did you realize that every time you call
buidPaging(), it does an additional.wrap("<div class='simplePagerContainer'></div>");so your DOM structure gets deeper each time that is called?