0

created a checkbox features with jQuery for a website, The features are working fine with all other browsers like Chrome, Firefox, Safari, Opera etc.. But it is not working in IE all version. Here is my code:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <ul id="filters" style="list-style:none; margin-top:75px; line-height:30px; ">

    <li>

        <input type="checkbox" value="outdoor" id="outdoor" />

        <label for="filter-category">Outdoor</label>

    </li>

    <li>

        <input type="checkbox" value="remote_monitor" id="remote_monitor" />

        <label for="filter-category">Remote Monitor</label>

    </li>


     <li>

        <input type="checkbox" value="battery" id="battery" />

        <label for="filter-category">Battery Operated</label>

    </li>

</ul>
<div style="width:850px; height:148px; clear:both; margin-top:80px;">

<div  class="category outdoor " style=" float:left;  ">Rocco</div>

<div  class="category remote_monitor camera" style="float:left;margin-top:-2px; margin-left:10px;">Borocco</div>

<div  class="category battery" style="float:left; margin-top:-2px;margin-left:10px;">Sylva</div>

<div  class="category battery outdoor " style="float:left; margin-top:-2px;margin-left:10px;">Novesto</div>

<script>
$('input').change (function() {

        var selector = $('input:checkbox').map(function(){ 

            return this.checked ? '.' + this.id : ''; 


        }).get().join('');


        console.log(selector);  



        var all = $('div[class^="category"]');

        if(selector.length)

          all.hide().filter(selector).show()

        else all.hide();

    });
</script>

Anyone can help please!

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • 4
    I see you've tagged the question `console.log`... could it be related to this question: http://stackoverflow.com/questions/7742781/why-javascript-only-works-after-opening-developer-tools-in-ie-once/7742862#7742862 – Spudley Mar 26 '13 at 15:06
  • What @Spudley linked. IE doesn't know what `console` is unless the dev tools are open. – Jack Mar 26 '13 at 15:07
  • May be this can be tried ? `if(typeof console !== 'undefined') console.log(selector)` – Jashwant Mar 26 '13 at 15:09
  • @Jashwant The question Spudley linked to contains shims to console.log. – Denys Séguret Mar 26 '13 at 15:09
  • Thanks I just removed console.log(selector); Now it works well in IE and all other browsers. Thank you all. – user2212033 Mar 26 '13 at 15:37

2 Answers2

1

console.log() doesn't work in IE until the Dev Tools window is opened.

The short answer to this is simply don't use console.log() in your code unless you are actively testing. If you are testing, you will have Dev Tools open anyway, so the code will work. If you're not testing, remove the console.log(); it serves no purpose.

A more detailed answer can be found here: Why does JavaScript only work after opening developer tools in IE once?

Community
  • 1
  • 1
Spudley
  • 166,037
  • 39
  • 233
  • 307
0

Your code works fine in internet explorer. I believe, like already pointed out in the comments - that you do not have your console open (f12) in internet explorer. You need to have the developer tools open for console.log to work - Or it will cause an error (and the execution of your javascript will stop)

One of the issues:

console.log(selector);  

Your code

Peter Rasmussen
  • 16,474
  • 7
  • 46
  • 63
  • Absolutely right. It is all because of the console.log, so I just removed it. Working Fine in IE. Thank you very much. – user2212033 Mar 26 '13 at 15:32