select2插件和jquery ui模式对话框

时间:2013-11-05 11:31:01

标签: jquery jquery-select2

我正在使用Select2插件,但是当插件与jQuery模式对话框一起使用时,内置搜索功能不起作用。我有一个小提琴,显示了......的问题。

http://jsfiddle.net/jeljeljel/s3AFx/

请注意,搜索框不会接受焦点。应该有一个使用_allowInteraction事件(http://api.jqueryui.com/dialog/#method-_allowInteraction)的解决方法,但它并不适用于我。

任何人都可以帮忙看看如何使这个小提琴工作吗?

此外,此SO帖子(select2 plugin works fine when not inside a jquery modal dialog)讨论了相同的问题,但建议的修复程序对我不起作用。

HTML

<div class="dialog">
    <select>
        <option>A tall ship was seen a</option>
        <option>A tall ship was seen b</option>
        <option>A tall ship was seen c</option>
        <option>A tall ship was seen d</option>
        <option>A tall ship was seen e</option>
        <option>A tall ship was seen f</option>
    </select>
</div>

JAVASCRIPT

$('.dialog').dialog({
    modal: true,
    _allowInteraction: function (event) {
        return !!$(event.target).is(".select2-input") || this._super(event);
    }
});
$('select').select2();

5 个答案:

答案 0 :(得分:16)

有一个新版本的修复bigwavesoftware为github issue thread about this problem中的select2 4.0提供了:

if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
    var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
    $.ui.dialog.prototype._allowInteraction = function(e) {
        if ($(e.target).closest('.select2-dropdown').length) return true;
        return ui_dialog_interaction.apply(this, arguments);
    };
}

这只需要在创建其中包含select2的任何模态对话框之前运行;你不需要在对话框选项中做任何特别的事情,比如bigwavesoftware的解决方案。

JSFiddle of this fix in action

答案 1 :(得分:6)

我在https://github.com/ivaynberg/select2/issues/1246找到的一些代码的添加似乎解决了这个问题。更新了小提琴...

http://jsfiddle.net/jeljeljel/s3AFx/4/

<强> JAVASCRIPT

$('.dialog').dialog({
    modal: true,
    open: function () {
        if ($.ui && $.ui.dialog && !$.ui.dialog.prototype._allowInteractionRemapped && $(this).closest(".ui-dialog").length) {
            if ($.ui.dialog.prototype._allowInteraction) {
                $.ui.dialog.prototype._allowInteraction = function (e) {
                    if ($(e.target).closest('.select2-drop').length) return true;
                    return ui_dialog_interaction.apply(this, arguments);
                };
                $.ui.dialog.prototype._allowInteractionRemapped = true;
            }
            else {
                $.error("You must upgrade jQuery UI or else.");
            }
        }
    },
    _allowInteraction: function (event) {
        return !!$(event.target).is(".select2-input") || this._super(event);
    }
});
$('select').select2();

答案 2 :(得分:3)

我通过将此代码添加到JS

来解决了这个问题
$.ui.dialog.prototype._allowInteraction = function(e) {
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
};

我在https://github.com/ivaynberg/select2/issues/1246#issuecomment-17428249

找到了这个

答案 3 :(得分:1)

这是为我工作的:

$("#modal").dialog({
    closeOnEscape: false,   
    resizable: false,
    height: 180,
    maxHeight: 180,
    width: 700,
    maxWidth: 700,
    modal: true,
    autoOpen: false,
    fluid: true,
    open: function () {
        if ($.ui && $.ui.dialog && !$.ui.dialog.prototype._allowInteractionRemapped && $(this).closest(".ui-dialog").length) {
            if ($.ui.dialog.prototype._allowInteraction) {
                $.ui.dialog.prototype._allowInteraction = function (e) {
                    if ($(e.target).closest('.select2-drop').length) return true;

                    if (typeof ui_dialog_interaction!="undefined") {
                        return ui_dialog_interaction.apply(this, arguments);
                    } else {
                        return true;
                    }
                };
                $.ui.dialog.prototype._allowInteractionRemapped = true;
            }
            else {
                $.error("You must upgrade jQuery UI or else.");
            }
        }
    },
    _allowInteraction: function (event) {
        return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
    }
});

答案 4 :(得分:0)

上述所有内容似乎都不适合我。但我在对话框初始化中更改了以下内容:

dialog = $( "#my-dialog" ).dialog({
                autoOpen: false,
                width: 440,
                title: 'Test Dialog',
                ...
         });

form = dialog.find( "form" ).on( "submit", function( event ) {
    event.preventDefault();
});

dialog.dialog( "open" );

基本上,我带走了&#39;模式:true&#39;参数,它的工作原理。

无论如何为我工作:)