CODEWITHSUNDEEP
javascriptjquerywordpress
user1426583
user1426583

Reputation: 319

jQuery Dropdown - Wordpress

I am trying to create the jquery select field which includes images. (ddslick)

It seems that there is something wrong with with the .js file, as the console is showing an error: Uncaught TypeError: Object [object Object] has no method 'ddslick' but in works in jsfiddle: http://jsfiddle.net/newbie123/zUgyd/5/

It loads correctly in jsfiddle, but gives that error in the console and doesn't load.

I have tried to also put this into the page's script, (using a script plugin on wordpress), which is: 

//Dropdown plugin data
            var ddData = [
                {
                    text: "Facebook",
                    value: "FB",
                    description: "Description with Facebook",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
                },
                {
                    text: "Twitter",
                    value: "TWT",
                    description: "Description with Twitter",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
                },
                {
                    text: "LinkedIn",
                    value: "LI",
                    description: "Description with LinkedIn",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
                },
                {
                    text: "Foursquare",
                    value: "FSQ",
                    description: "Description with Foursquare",
                    imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
                }
            ]

HTML

<form id="quote" action="" method="get"><script type="text/javascript">// <![CDATA[
$('#quote').keyup(function (){   doTotal(this);   calcMenu(this); });
// ]]></script>
<script type="text/javascript">$('#myDropdown').ddslick({
    onSelected: function(selectedData){
        //callback function: do something with selectedData;
    }   
});</script>
<div id="myDropdown">
<select id="selectMenu">
        <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
            data-description="Description with Facebook">Facebook</option>
        <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            data-description="Description with Twitter">Twitter</option>
        <option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            data-description="Description with LinkedIn">LinkedIn</option>
        <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            data-description="Description with Foursquare">Foursquare</option>
    </select>
</div>
</form>

in header.php

  wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.ddslick.js"></script>
<!-- Make sure your CSS file is listed before jQuery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

</head>

Upvotes: 0

Views: 854

Answers (1)

Kaloyan
Kaloyan

Reputation: 7352

Here:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.ddslick.js"></script>
<!-- Make sure your CSS file is listed before jQuery -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

.js files are not CSS. :) Your jQuery plugin is included before jQuery. You should fix that.

Upvotes: 3

Related Questions