Solved

Simple Jquery issue

Posted on 2014-01-08
13
333 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 56

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
Industry Leaders: 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 56

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 56

Expert Comment

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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

680 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