隐藏并重新显示后，jQuery UI选项卡失败 [英] Jquery UI Tabs fail after hiding and reshowing

问题描述

当用户单击链接时，我正在使用简单模态"创建模态框.在此模式框内是带有jQuery用户界面选项卡的div.但是，在打开模态之前，这些选项卡中的内容已更改.在我的jsFiddle示例中，它没有显示该部分.

I'm using Simple Modal to create a modal box when a user clicks a link. Inside this modal box is a div rigged with jquery ui tabs. Before the modal is opened however, the content in those tabs are changed. In my jsFiddle example it doesnt show that part however.

问题 第一次单击链接打开模态，模态框显示，选项卡正常工作.

The Problem Open the modal by clicking on a link for the first time and the modal box shows and tabs work correctly.

关闭模态并重新打开. (用户可以单击相同的链接).

Close the modal and reopen. (user can click on same link).

标签不起作用.

当我尝试销毁实例并在每次调用该函数以打开模态时重新创建时，我得到:

When I try to destroy the instance and recreate each time the function is called to open the modal, i get:

Chrome开发者工具报告未捕获的TypeError:无法读取未定义的属性哈希".

Chrome Dev Tools reports Uncaught TypeError: Cannot read property 'hash' of undefined .

$(document).ready(function() {
    $('#tabs').tabs();
});

function getDetails(atag) {
    $('#hotelDetails').modal({
                minHeight: 100,
                onOpen: function (dialog) {
                    dialog.overlay.fadeIn('fast', function () {
                        dialog.container.slideDown('fast', function () {
                            dialog.data.fadeIn('fast');
                            $('#tabs').tabs();
                            $("#tabs").tabs("option", "active", $("#" + atag).index()-1);
                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('fast', function () {
                        dialog.container.slideUp('fast', function () {
                            dialog.overlay.fadeOut('fast', function () {
                                $.modal.close(); // must call this!
                                $('#tabs').tabs("destroy");
                            });
                        });
                    });
                },
                zIndex: 3000
            });
}

(请参见示例 http://jsfiddle.net/R44Yh/1/)

我尝试进行一次REFRESH调用，我认为这是更改内容所必需的，它不会报告任何错误，但也不会更改选项卡.

I've tried to do a REFRESH call which I think is needed to change the content and it does NOT report any errors but does not change the tabs either.

$(document).ready(function() {
    $('#tabs').tabs();
});

function getDetails(atag) {
    $('#hotelDetails').modal({
                minHeight: 100,
                onOpen: function (dialog) {
                    dialog.overlay.fadeIn('fast', function () {
                        dialog.container.slideDown('fast', function () {
                            dialog.data.fadeIn('fast');
                            $('#tabs').tabs( "refresh" );
                            $("#tabs").tabs("option", "active", $("#" + atag).index()-1);
                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('fast', function () {
                        dialog.container.slideUp('fast', function () {
                            dialog.overlay.fadeOut('fast', function () {
                                $.modal.close(); // must call this!
                            });
                        });
                    });
                },
                zIndex: 3000
            });
}

(请参见示例 http://jsfiddle.net/QYmxH/2/)

推荐答案

仅当您使用Eric Martin的SimpleModal时，我的解决方案才有效.

My solution only works if you are using Eric Martin's SimpleModal.

我发现有一个名为 persist 的选项标签，其中保留了DOM的元素.默认情况下，它设置为 false .将此设置为 true 可使DOM元素保持完整.这是埃里克(Eric)的网站上所说的:

I found there is an option tag called persist that retains the DOM's elements. By default, this is set to false. Setting this to true will keep the DOM elements intact. Here's what Eric's site says:

persist [Boolean:false]

persist [Boolean:false]

是否可以在模式调用中保留数据?仅用于现有的DOM元素.如果为true，则将在模式调用之间维护数据；如果为false，则数据将恢复为原始状态.

Persist the data across modal calls? Only used for existing DOM elements. If true, the data will be maintained across modal calls, if false, the data will be reverted to its original state.

示例代码:

$('#hotelDetails').modal({
                persist: true,
                modal: false,
                onOpen: function (dialog) {
                    dialog.overlay.fadeIn('fast', function () {
                        dialog.container.slideDown('fast', function () {
                            dialog.data.fadeIn('fast');
                            $('#tabs').tabs();
                            $("#tabs").tabs("option", "active", $("#" + atag).index());
                        });
                    });
                },
                onClose: function(dialog) {
                    dialog.data.fadeOut('fast', function () {
                        dialog.container.slideUp('fast', function () {
                            dialog.overlay.fadeOut('fast', function () {
                                $.modal.close(); // must call this!
                                $('#tabs').tabs("destroy");
                            });
                        });
                    });
                },
                zIndex: 3000
            });

这篇关于隐藏并重新显示后，jQuery UI选项卡失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！