Jquery UI Tabs fail after hiding and reshowing

Question

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).

Tabs do NOT work.

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

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
            });
}

(see example http://jsfiddle.net/R44Yh/1/)

---

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
            });
}

(see example http://jsfiddle.net/QYmxH/2/)

Answer 1

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

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 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.

Sample Code:

$('#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
            });