groenroos / minimalect

Minimal select replacement for jQuery
350 stars 52 forks source link

Setting selects for minimalect when used in jQuery dialog #40

Closed cpntgt closed 10 years ago

cpntgt commented 10 years ago

Hi,

I've problems with the minimalect when used inside jQuery UI dialog. The problem seems to come from the fact that even though I'm setting the select value by doing $(.mySelect).val("xx") the selected attribute is not being added.

The solution I have is to manually handle the initilization of the selected option for each select each time I open a dialog?!? I tried adding a hook in minimalect afterinit function, but it seems the minimalect object isn't inserted in the DOM at that point.

Doesn't anyone have a solution or suggestion that wouldn't require setting the selected attributes on top of setting the value?

Thanks Christian

groenroos commented 10 years ago

Hello Christian,

The minimalect DOM elements do exist before afterinit is called; the elements are created on lines 71 thru 80, and afterinit is called at 169. Perhaps it's the jQuery UI dialog that creates some kind of a delay in DOM elements being added?

Others have also had problems with setting values via .val(), because it doesn't trigger the change event; http://bugs.jquery.com/ticket/14171. Minimalect is listening for the change event to sync the actual hidden select with the visible one

I'm planning to fix this is a future release (with a loooong list of other problems), but for now, you could try doing $(".mySelect").val("xx").trigger("change")

I know it's not exactly elegant, but it might solve your problem. Let me know how it goes.

-- @groenroos

cpntgt commented 10 years ago

Hi groenroos,

Maybe you're right that there is some delay, because the following: $(this).parent() (after $(this) is a select initialized to a minimalect) returns an empty object (length of 0) in the afterinit function. Again this is in a context of a UI Dialog. I didn't have any problems when directly in a page.

Triggering the change does work. I had also centralized the initialization of the minimalect selects in a way that they were not reset a 2nd time when a dialog is re-opened. So In this case I check if my select had a value, before setting the value of the input to the placeholder value.

My code is included below. If there was a way to minimize the extra code in future releases that would be great! At least I only do this once in the entire application, so that's the good part :) Thanks

setFancySelects: function (content) { var selects = $("select:visible", content);

    if (selects.length == 0){
        $(".minict_wrapper:visible", content).each(function () {
            if ($(this).prev("select").val() != "") {
                var i = $(this).find("input");
                i.val(i.attr("placeholder"));
            }
        });
    }
    else {
        selects.each(function () {
            $(this).minimalect({
                onchange:
                    function (value, text) {
                        var select = $(".minict_wrapper.active", content).prev("select");
                        select.val(value).trigger("change");
                    }
            });

            $(this).trigger("change");
        });
    }
}
groenroos commented 10 years ago

Since the 0.9.0 update, you can simply do select.val(value) and Minimalect will detect it automatically.

cpntgt commented 10 years ago

Hi Oskari Groenroos,

Thanks for the update. I was looking forward to this since I have had many problems since I switch to minimalect for my selects. Most of the problems seem to be from using minimalect inside a jquery dialog.

I tried updating to the latest version by simply swapping the min js file, but a couple of issues came up, so I went back to the previous version.

Have you encountered any of these problems before? Do you have the steps to update from the previous version including the style modifications?

Thanks for your help. Christian

On Fri, Jun 6, 2014 at 2:03 AM, Oskari Groenroos notifications@github.com wrote:

Since the 0.9.0 update, you can simply do select.val(value) and Minimalect will detect it automatically.

— Reply to this email directly or view it on GitHub https://github.com/groenroos/minimalect/issues/40#issuecomment-45305646.