Solved

Simple Jquery issue

Posted on 2014-01-08
13
335 Views
Last Modified: 2014-01-12
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
0
Comment
Question by:magento
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 3
13 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39766100
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

0
 
LVL 5

Author Comment

by:magento
ID: 39766123
Hi Leakim ,

Sorry its not working..

Please check my url.

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

Open in new window

0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39766127
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

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 82

Expert Comment

by:leakim971
ID: 39766142
Uncaught TypeError: Object [object Object] has no method 'flexslider'
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39766150
work
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39766155
so the first error relative to flexslider block stop javascript to run the other part of your code
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39766169
the pluginS are installed AFTER your code
INSTEAD before.
0
 
LVL 5

Author Comment

by:magento
ID: 39766187
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
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39766196
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
0
 
LVL 5

Author Comment

by:magento
ID: 39766367
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
0
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39767288
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.
0
 
LVL 5

Author Closing Comment

by:magento
ID: 39771855
Hi Julian,

Thanks, this worked for me.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39775782
You are welcome - thanks for the points.
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question