Solved

Simple Jquery issue

Posted on 2014-01-08
13
332 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
  • 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 55

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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
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 55

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 55

Expert Comment

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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
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)

839 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