Simple Jquery issue

Hi,

I have a working Jquery to remove duplicates in select option dropdown.

http://jsfiddle.net/bT5et/3/

But when i try to use it in my shopify code its showing duplicates in dropdown. Can you please advice what i am doing wrong?

<script src="https://raw.github.com/Craga89/qTip1/master/1.0.0-rc3/jquery.qtip-1.0.0-rc3.js"></script>
<script type="text/javascript">
// Only create tooltips when document is ready
$(document).ready(function()
{
   // Use the each() method to gain access to each of the elements attributes
   $('.masterTooltip img').each(function()
   {
      $(this).qtip(
      {
         content:  $(this)[0].parentNode.title, // Give it some content
         position: 'center', // Set its position
         hide: {
            fixed: true // Make it fixed so it can be hovered over
         },
         style: {
            padding: '5px 15px', // Give it some extra padding
            name: 'dark' // And style it with the preset dark theme
         }
      });
   });
});
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js">
var usedNames = {};

$( "#drop option" ).each(function( index ) {
console.log($( this ));
    
   if(usedNames[$( this ).text()]) {
        $(this).remove();
        console.log('duplicate');
    } else {
        console.log('new');
        usedNames[$( this ).text()] = $( this ).text();
    }
});
</script>  
<style>
 .tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
} 
  
  select {
    width:20%;
   color:#fff;
font-size:12px Arial;
    background-color:#161616;
  }
</style>

<div class="sixteen columns">
  <div class="section clearfix">
    <h1>{{ page.title }}</h1>
  </div>
</div>

<div class="sixteen columns">
  <div class="section clearfix">  
    {{ page.content }}
    
<div class="sixteen columns">
<div align=right id="searchresults">
  <form action="/search?q=" method="get" class="search-form" role="search">
    <p>
      <select id="drop">
        {% for article in blogs/artists.articles %}
        {% for tag in article.tags %}
        <option value="{{ tag }}">{{ tag }}</option>
	  {% endfor %}
        {% endfor %}
      </select>
        <input type="submit" value="Search Artist" />
    </p>
    </form>
</div>
  <div class="section clearfix">  

    {% for article in blogs/artists.articles limit:30 %}
    
    <div class="{% if settings.twitter_widget != blank %}
one-third column {% cycle 'alpha', 'omega' %}
{% else %}
three columns {% cycle 'alpha', '', '', '', 'omega' %}{% endif %}">
      
          {% if article.excerpt == blank %}
            <p>
              {{ article.content | strip_html | truncatewords: 40 }}
            </p>
          {% else %}
            <a href="{{ article.url }}" title="{{ article.title | escape }}" class="masterTooltip">{{ article.excerpt | article_img_url: 'small' }}</a><br>
            <!--<a href="{{ article.url }}" title="{{ article.title | escape }}">{{ article.title }}</a>-->
          {% endif %}
                  
        </div>
      
 
      {% endfor %}
      
    </div>
</div>

  </div>
</div>

Open in new window

Thanks

LVL 5

magentoAsked: 2014-01-08

Who is Participating?

LVL 64

Julian HansenCommented: 2014-01-08

Refer my original comment.

Try putting your code in a doc ready box i.e.

 <script type="text/javascript">
$(function() {  // ADD THIS
	var usedNames = {};

	$( "#drop option" ).each(function( index ) {
		console.log($( this ));
		if(usedNames[$( this ).text()]) {
			$(this).remove();
		}
		else {
			usedNames[$( this ).text()] = true;
		}
	});
}); // AND THIS
</script>

Open in new window

Your javascript code is running before the page has loaded and so the #drop element does not exist.

LVL 83

leakim971PluritechnicianCommented: 2014-01-08

Check this : http://jsfiddle.net/73fgh/1/
Using : usedNames[$( this ).text()] = true;

               
var usedNames = {};

$( "#tag option" ).each(function( index ) {
    console.log($( this ));
    if(usedNames[$( this ).text()]) {
        $(this).remove();
    }
    else {
        usedNames[$( this ).text()] = true;
    }
});;

Open in new window

LVL 5

magentoAuthor Commented: 2014-01-08

Hi Leakim ,

Sorry its not working..

Please check my url.

http://www(dot)thesrk(dot)com/pages/all-artists

Open in new window

LVL 64

Julian HansenCommented: 2014-01-08

Fiddle works - if you uncomment the remove line and comment out the style line? i.e

var usedNames = {};

$( "#tag option" ).each(function( index ) {
console.log($( this ));
    
   if(usedNames[$( this ).text()]) {
    console.log('duplicate');
        $(this).remove();
       // $(this).style.color='Red';
    } else {
        console.log('new');
        usedNames[$( this ).text()] = $( this ).text();
    }
});

Open in new window

LVL 83

leakim971PluritechnicianCommented: 2014-01-08

Uncaught TypeError: Object [object Object] has no method 'flexslider'

LVL 83

leakim971PluritechnicianCommented: 2014-01-08

LVL 83

leakim971PluritechnicianCommented: 2014-01-08

so the first error relative to flexslider block stop javascript to run the other part of your code

LVL 83

leakim971PluritechnicianCommented: 2014-01-08

the pluginS are installed AFTER your code
INSTEAD before.

LVL 5

magentoAuthor Commented: 2014-01-08

Hi Leakim,

So how can i fix this? Need to add the Jquery at the start of the script?

Julian,

That comment is a typo for testing , The Jquery is working well in Fiddle but not in my site.

Thanks

LVL 83

leakim971PluritechnicianCommented: 2014-01-08

if Y use X, declare X first else Y don't know nothing about X

if flexslider use jquery declare jquery first else flexslider can't run
if yourcode use flexslider declare flexslider first else your code can't run

LVL 5

magentoAuthor Commented: 2014-01-08

Hi,

I dont use flex slider (I really didnt aware of it)

I pasted all the code which i use in my shop in the question .

The other javascript is to show the title in the image during hover.

Not sure how to fix them .
Thanks