Jquery conflict when two of the same on one page

3 comments

1. The issue is pointed out clearly in the comments. ID must be unique on any given page. id="iconSelector" – just add this as a class along with icon-list so it will look like class="iconSelector icon-list". By using standard jQuery selector techniques you should still be able to interact with the DOM as needed.

   They both HAVE to share the same classes and ID’s

   This requirement is illogical. You’ll have to rework your process.

   A little advice to help you along the way – you can utilize $(this) to know which DOM element has triggered an event – so you don’t need to worry about ID.

   Log in to Reply

2. It’s not super fancy, but is this the functionality you are looking for?

   http://jsfiddle.net/ccarterc1984/RfW69/

   CSS:

   #iconSelectionBox{
       width:250px;
       height:250px;      
       background-color: gray;
       position:absolute;
       display:none;          
   }
   #icon1{
       background-color:blue;        
   }
   #icon2{
       background-color:black;        
   }
   #icon3{
       background-color:green;        
   }
   #icon4{
       background-color:purple;        
   }
   .icon{        
       height:50px;
       width:50px;
       float:left;
   }
   

   HTML:

   <div id="iconSelectionBox">
       <input type="text" id="searchBox" /><br/>
       <div id="icon1" class="icon"></div>
       <div id="icon2" class="icon"></div>
       <div id="icon3" class="icon"></div>
       <div id="icon4" class="icon"></div>
   </div>
   
   <button class="selectButton">Select Icon</button>
   <button class="selectButton">Select Icon</button>
   
   <br/>
   <div id="messageBox"></div>
   

   jQuery:

   $('button.selectButton').live('click', function(){
       var iconBox = $('#iconSelectionBox');
       var buttonPos = $(this).position();
   
       iconBox.show().css('top', buttonPos.top + 100).css('left', buttonPos.left);
   });
   
   $('div.icon').live('click', function(event){
       var clickedId = event.target.id;
   
       $('#messageBox').text("You clicked the icon with id: " + clickedId);
   
       $('#iconSelectionBox').hide();
   });
   

   Log in to Reply

3. Use the classes or element types rather than the id’s. Add classes if necessary. For example,

   $('#selectedIcon').addClass(iconVal);
   

   becomes

   $('.selected-icon').addClass(iconVal);
   

   —

   $("#selectIconButton").click(function () {
     $("#iconSelector").fadeToggle();
   });
   

   becomes

   $("button").click(function () {
     $(".icon-list").fadeToggle();
   });
   

   As mentioned in the comments you cannot use multiple ids.

   Full example:

   HTML

   <div class="plugin">
       <div class="iconDisplay">Display's selected icon</div>
       <span id="selectedIcon" class="selected-icon"></span>
   
       <button id="selectIconButton">Select Icon</button>
       <div id="iconSelector" class="icon-list">
           <div id="iconSearch">
               <label for="icon-search">Search Icon: </label>
               <input type="text" name="icon-search" value="">
           </div>
           <span class="icon-orange"></span>
           <span class="icon-teal"></span>
           <span class="icon-icon3"></span>
           <span class="icon-icon4"></span>
           <span class="icon-icon5"></span>
           <span class="icon-icon6"></span>
           <span class="icon-icon7"></span>
           <span class="icon-tealer"></span>
       </div>
   </div>
   
   <div style="height: 50px"></div>
   
   
       <div class="plugin">
       <div class="iconDisplay">Display's selected icon</div>
       <span id="selectedIcon" class="selected-icon"></span>
   
       <button id="selectIconButton">Select Icon</button>
       <div id="iconSelector" class="icon-list">
           <div id="iconSearch">
               <label for="icon-search">Search Icon: </label>
               <input type="text" name="icon-search" value="">
           </div>
           <span class="icon-orange"></span>
           <span class="icon-teal"></span>
           <span class="icon-icon3"></span>
           <span class="icon-icon4"></span>
           <span class="icon-icon5"></span>
           <span class="icon-icon6"></span>
           <span class="icon-icon7"></span>
           <span class="icon-tealer"></span>
       </div>
   </div>
   

   JQUERY

   var iconVal = $(".icon_field").val();
   $('.selected-icon').addClass(iconVal);
   
   $("button").click(function () {
     $(this).siblings(".icon-list").fadeToggle();
   });
   
   $(".icon-list span").click(function () {
       selectIcon($(this));
   });
   
   function selectIcon(e) {
       var selection = e.attr('class');
       $(".icon_field").val(selection);
       e.parent().hide();
       e.parent().siblings('#selectedIcon').removeClass();
       e.parent().siblings('#selectedIcon').addClass(selection).show();
       return;
   }
   
   $('input[name="icon-search"]').keyup(function(){
      var sValue = $(this).val().toLowerCase();
   
       $.each($('span'), function(){
           if($(this).attr('class').indexOf(sValue)===-1){
            $(this).fadeOut(0);   
           }else{
            $(this).fadeIn(0);   
           }
       });
   
   });
   

   Log in to Reply