JQuery UI Tab and Dialog: Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

1
votes

Recently, I developed my main page by using jQuery UI Tab and Dialog control. There are two tabs in the main UI, one is for "Book" form, and another is for "Paper" form(Book and Paper are my business entity page). When I first run the program, everything is ok, but not work in the second time, it will throw an exception:

Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'

After try many times, I dont use Tab control, just put two button on main page, and do the similar tasks, everything is fine even I run many times. So I think it's the problemm of Tab control.

Switching Tab items and using firebug to watch html body information, I noticed that there will be append one new div row in every switch operation:

<div id="tabsProductMain" class="tabs-bottom ui-tabs ui-widget ui-widget-content ui-corner-all">
<div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: none;" aria-live="polite" aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="false" aria-hidden="true">
<div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="display: block;" aria-live="polite" aria-labelledby="ui-id-3" role="tabpanel" aria-expanded="true" aria-hidden="false">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-bottom ui-corner-all" role="tablist">
</div>
<div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="outline: 0px none; z-index: 1002; position: absolute; height: auto; width: 400px; top: 39.0003px; left: 428px; display: none;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-2">
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: none; outline: 0px none; z-index: 1000; position: absolute;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1">

You can see that there are too many new abundant div element appended the last with tabindex="-1" and aria-labelledby="ui-id-1".

Can anyone find a solution to resolve this situation? otherwise, it will throw error in the second operation. Maybe I miss some point by using Tab control? Please can someone make any suggestion? thanks.

The main page code is here:

<script>    
$(function () {
            $("#tabsProductMain").tabs();

            $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
                .removeClass("ui-corner-all ui-corner-top")
                .addClass("ui-corner-bottom");

            $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");

            initializeTabs();
        })

        function initializeTabs() {
            var urlBook = "/DialogWebApp/ProductMain/BookDialog";
            var urlPaper = "/DialogWebApp/ProductMain/PaperDialog";

            //dynamically add new tab item
            $("#tabsProductMain").tabs('add', urlBook, 'Books');
            $("#tabsProductMain").tabs('add', urlPaper, 'Papers');

            //remove the default one
            $("#tabsProductMain").tabs('remove', 0);
        }
</script>

    <div id="tabsProductMain" class="tabs-bottom">
        <ul>
            <li><a href="#fragement-1"><span>One</span></a></li>
        </ul>
        <div id="fragement-1"  style="width:600px;height:500px;"></div>
    </div>

BookDialog code is here, and PaperDialog code is similar with BookDialog:

<script type="text/ecmascript">
    $(function () {
        $("#BookDialog").dialog({
            autoOpen: false, width: 400, height: 330, modal: true, title: "Book Form"
        });
        $("#BookDialog").html("").load("/ProductWebPortal/Product/Detail2/5")
    })

    function onOpenBookDialog() {
        $("#BookDialog").dialog("open");
    }
</script>
<div>
    <input type="button" id="btnOpenDialog" value="open book" onclick="onOpenBookDialog();"/>
    <div id="BookDialog" style="display:none;width:550px;height:550px;">simple div</div>
</div>
2
jquery-uitabsdialog
Start to initialize your tabs in the "load" callback of your tab element.api.jqueryui.com/tabs/#event-load – sdespont
this this one: stackoverflow.com/questions/13520139/… – Campinho

2 Answers

0
votes

Sometimes, this is caused by the other jquery error on the same page. I've got date picker and dialog on the same page. There is an error for date picker. I tried to open a irrelevant dialog,I've got the same error as you asked.After the date picker error is fixed, the initialized error was gone.

0
votes

I was able to handle that gracefully by putting that block in try catch block. try this.

try{
    code here...
}catch(exception){ 
   error ... 
}