JQuery UI dialog with tabs from a template string

Question

I am trying to create a JQuery-UI dialog with a jquery-ui tabbed construction embedded within it. This is my function:

 <script type="text/javascript" language="javascript" charset="utf-8">

 function createDialog(title, text) {
var tstr="<div id='tabs' >"
+"<ul>"
+"<li><a href='#tabs-1'>A</a></li>"
+"<li><a href='#tabs-2'>B</a></li>"
+"</ul>"
+"<div id='tabs-1'>"
+"A Stuff Goes Here"
+"</div>"
+"<div id='tabs-2'>B Stuff Goes Here"
+"</div>"
+"</div>"
 return $("<div class='dialog' title='" + title + "'><p>" + tstr + "</p></div>")
 .dialog({
resizable:true,
height:480,
width:650,
modal:true,
buttons: {
        "Dismiss": function() {
            $( this ).dialog( "close" );
        }
    }
});
tabs.tabs();

}

</script>

The dialog appears when the function is called, but the tabs are formatted as links. Can anyone give me an idea as to what is wrong? Note that the function is being called from a JQuery datatables callback.

Answer 1

1. "tabs" is not defined in your example
2. since you're creating a dialog in your return you'll need to chain the tabs call with the dialog call.

eg: ...

 return $("<div class='dialog' title='" + title + "'><p>" + tstr + "</p></div>")
     .dialog({
    resizable:true,
    height:480,
    width:650,
    modal:true,
    buttons: {
            "Dismiss": function() {
                $( this ).dialog( "close" );
            }
        }
    }).tabs();

you were on the right path but since "tabs()" is called after the return it'll never execute. also, since the "tabs" variable isn't defined you would've gotten a reference error.