Problem with custom selects on divs not visible on page load.

[HelloTiago]

Hey there,

I'm trying to implement FancySelect on a page which uses this plugin (http://www.jquery-steps.com/) and unfortunately it is only working properly on the first step. I tried running

selects.trigger("replace");

after the step is changed but without success...

Any help is appreciated :)

[paulstraw]

Hey Tiago,

This doesn't sound like a FancySelect issue, but I can spend a couple minutes helping you take a quick look. Can you send through your code for:

1. Where you're setting the selects variable
2. Where you're initializing jquery-steps

[HelloTiago]

Hi Paul,

The selects variable is being set on top of the js file, like so:

var selects = $("select[multiple!='multiple']");
selects.fancySelect();

And a bit bellow, jQuery steps:

$("#settings-wizard").steps({
        headerTag: "h3",
        bodyTag: "section",
        enableAllSteps: true,
        showFinishButtonAlways: true,
        titleTemplate: '<span class="number">#index#</span> #title#',
        labels: {
            next: "Next <i class='entypo chevron-right'></i>",
            previous: "<i class='entypo chevron-left'></i>",
            finish: "Finish <i class='entypo check'></i>"
        },
        onStepChanged: function (event, currentIndex) { selects.trigger("replace"); },
});

Everything seems okay to me, but I've been staring at that for a few hours now so...
Thanks for helping!

[paulstraw]

Hm, I can't tell just from the code you posted, but my guess is that you're doing something ajaxy or dynamically adding steps? Anyhow, basically it seems like what's going on is that your initial selects variable is only grabbing the selects from the first step for whatever reason (either they don't exist yet or don't match that selector.

Either way, triggering replace won't initialize non-fancified selects, it'll just update the options of ones that have already been fancified. Basically you need to grab a new reference to the selects in the step that got loaded in your onStepChanged and call .fancySelect on those.

Hope that helps!

[HelloTiago]

Hmmm that's odd, I'm not using AJAX or dynamically adding steps. Plus, the "fancy-select" class exists on all selects. They just don't work when I click them. I'm guessing it's the way jquery steps works then.

Many thanks for the detailed explanation, I'll see if I can come up with a solution :)

Cheers!

[paulstraw]

If it's something you can zip up, you can email it to me (paulstraw@paulstraw.com) and I'll take a quick peek after hours.

[paulstraw]

(This is an email I sent after checking out this fiddle, which Tiago sent through email. I've copied the message for posterity and whatnot)

I spent a few minutes checking this out, and to be honest I have no idea what’s going on off the top of my head. BUT here’s a workaround. Instead of:

var selects = $("select");
selects.fancySelect();

do this:

setTimeout(function() {
    var selects = $("select");
    selects.fancySelect();
}, 0);

So, basically the equivalent of an Underscore defer. One guess is that jQ Steps might be doing something weird with events? You could try updating to the latest version of FancySelect (with namespaced events) and see if that fixes it, but other than that I don’t have any clue what’s going on without spending more time on it (which, unfortunately, I don’t have at the moment). Best of luck!