How to use Same Script for two Tabs in Jquery or javaScript

Question

I have a two tabs in my jquery Application...Also I have a Search Filter with checkbox list(using Jquery)....I want this search filter in two tabs.....I added in First tab..it works fine...But If i add in second Tab...list displayed but Search Filter not displayed....

My codings are below.....

Search List Filter coding:

  <script> 

(function ($) {
  // custom css expression for a case-insensitive contains()
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };

  function filterList(header, list) { 
  // header is any element, list is an unordered list
    // create and add the filter form to the header
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header);

    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {

          $matches = $(list).find('b:Contains(' + filter + ')').parent();
          $('li', list).not($matches).slideUp();
          $matches.slideDown();

        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        // fire the above change event after every letter
        $(this).change();
    });
  }


  //ondomready
  $(function () {
    filterList($("#form"), $("#list"));
  });
}(jQuery));

  </script>

In First tab Div Tag:

<div id="form"></div>
<ul id="list"> 
        <li><input type ="checkbox" name="v1" ><img src="images/apple.png" width="30" align="absmiddle" height="30"> <b>Bala</b></li> 
        <li><input type ="checkbox" name="v1" ><img src="images/acorn_squash.png" width="30" align="absmiddle" height="30"> <b>Babu</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/broccoli.png" width="30" align="absmiddle" height="30"> <b>David</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/carrot.png" width="30" align="absmiddle" height="30"> <b>Dinesh</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/celery.png" width="30" align="absmiddle" height="30"> <b>Eswaran</b></li> 
    </ul>

In Second tab Div tag:

 <div id="form"></div>
<ul id="list"> 
        <li><input type ="checkbox" name="v1" ><img src="images/apple.png" width="30" align="absmiddle" height="30"> <b>Bala</b></li> 
        <li><input type ="checkbox" name="v1" ><img src="images/acorn_squash.png" width="30" align="absmiddle" height="30"> <b>Babu</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/broccoli.png" width="30" align="absmiddle" height="30"> <b>David</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/carrot.png" width="30" align="absmiddle" height="30"> <b>Dinesh</b></li> 
        <li><input type ="checkbox" name="v1"><img src="images/celery.png" width="30" align="absmiddle" height="30"> <b>Eswaran</b></li> 
    </ul>

In those codings, First tab , search Filter Works Fine....But Second tab, list only displayed, Search box not displayed...........

I tried, instead "id" in div, i tried "class"..but that also not works....What i did wrong here....How to use Same Script for two Tabs...

First, ids are supposed to be unique on the page, so I cannot tell if that is true by your HTML snippet. Second, I don't see any of your HTML that has filterform or filterinput on it. — Jeremy
– Jeremy, Commented Jun 13, 2011 at 12:49
one of the basic rules of javascript is that you shouldn't have same id for multiple elements. — Shrinath
– Shrinath, Commented Jun 13, 2011 at 12:51

Nicola Peluchetti · Accepted Answer · 2011-06-13 12:55:38Z

1

this happens because $("#form") returns only one object since you are using an 'id'. Use a class instead for your divs if you want to select more than one of them.

you sholud do something like:

 $(function () {
    $('.form').each(function(){
       you pass to filterList  your div and the next element in the dom (the ul)
       filterList($(this), $(this).next());
     }
  });
}(jQuery));

To iterate an all divs with a class = form

edited Jun 13, 2011 at 12:55

answered Jun 13, 2011 at 12:50

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use Same Script for two Tabs in Jquery or javaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related