Problem with custom selects on divs not visible on page load. about fancyselect HOT 6 CLOSED

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

from fancyselect.

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!

from fancyselect.

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!

from fancyselect.

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!

from fancyselect.

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

from fancyselect.

(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!

from fancyselect.