CODEWITHSUNDEEP
jqueryjsfiddle
ngplayground
ngplayground

Reputation: 21627

ddslick method onSelected is running right away

Im using ddSlick plugin for jQuery and the method onSelected should only run when I have chosen an option from the created Dropdown.

Only problem is that the following code I have seems to run the onSelected as soon as the page loads.

Can anyone point me in the right direction?

$('#flag').ddslick({
    imagePosition:"left",
    background:"none",
    width:"66px",
    onSelected: function(data){
        var chosenCountry = data.selectedData.value;
        chosenCountry = chosenCountry.toLowerCase();
        if(data.selectedIndex > 0) {
            if( new_url[1] in oc(['de', 'es','fr','it']) ) {
                console.log("translated pages");
            }
        } else {
            console.log("English site");
        }
    }   
});

jsFiddle

Thanks

Upvotes: 7

Views: 8260

Answers (4)

Naved Munshi
Naved Munshi

Reputation: 507

You can also try this jsFiddle

   function oc(a){
     var o = {};
     for(var i=0;i<a.length;i++){
       o[a[i]]='';
     }
     return o;
   }
   var temp = 0;
   $('#flag').ddslick({
     imagePosition:"left",
     background:"none",
     width:"66px",
     onSelected: function(data){
       var chosenCountry = data.selectedData.value;
       chosenCountry =    chosenCountry.toLowerCase();
       if(data.selectedIndex >= 0 && temp==1) {
          if( chosenCountry  in oc(['uk','de', 'es','fr','it']) ) {
             alert("translated pages");
          }
       } 
       temp = 1;
     }   
   });

Upvotes: 0

Leysam Rosario
Leysam Rosario

Reputation: 369

I have invented a solution after hours of figuring out whats the problem.

I directly change something on the code.

Note: you need to use the unminified version to follow this instructions.

on line 220

find:

function selectIndex(obj, index) {

change it to:

function selectIndex(obj, index, a) {

Line 270

find:

if (typeof settings.onSelected == 'function') {
   settings.onSelected.call(this, pluginData);
}

change it to:

if (typeof settings.onSelected == 'function') {
    if (a !== true) settings.onSelected.call(this, pluginData);
}

And finally on line 146

find

selectIndex(obj, index)

then change it to

selectIndex(obj, index, true)

Hope that helps!

Upvotes: 12

Jeff Borden
Jeff Borden

Reputation: 1419

It's dirty and kludgey, but it worked for a quick fix (was using minified version and didn't want to switch for a small piece of my code). I just defined a global bool and set it to true on the first load.

var _ddlLoaded = false;
$(function () {
    $('#ddl').ddslick({
            data: ddlData,
             onSelected: function (data) {
                if(_ddlLoaded  === false) {
                    _ddlLoaded = true;
                }
                else {
                    console.log(data.selectedData.value);
                }
    });
});

Upvotes: 8

Robert E. McIntosh
Robert E. McIntosh

Reputation: 6135

You can always check out ddSlick Remablized it fixes this issue and adds a bunch of other cool features like keyboard, class, and disable/enable support!

or you want to do this your self go to the function

function selectIndex(obj, index) {

than at the bottom of the function you'll find

//Callback function on selection
if (typeof settings.onSelected == 'function') {
        settings.onSelected.call(this, pluginData);
}

remove cut and paste that section above the following comment

//If set to display to full html, add html

and than change the if statement to

if (typeof settings.onSelected == 'function' && ddSelected.text().length > 0) {

ddSlick Remablized has even been tweeted about by Prashant Chaudhary himself! Check it out here https://twitter.com/chaudharyp/status/268045906442584064

Upvotes: 4

Related Questions