Solved

Simple Jquery issue

Posted on 2014-01-08
13
323 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 51

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
 
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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 51

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 51

Expert Comment

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

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

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…
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now