[WolfyUK]

Hi all,

I am attempting to use three jQuery plugins to render some templated content that should include tabs within a dialog. I am using jQuery.tmpl() for the template along with Tabs and Dialog from jQuery UI. The problem I have is to do with context in that setting the selector to an id of the <div> to make tab-able only works on the first attempt.

To understand what I am on about, please check out the following code which is missing the references to jquery.js, jquery-ui.js and jquery.tmpl.js:

<script id="tabTemplate" type="text/x-jquery-tmpl">
  <div id="tabs">
    <ul>
        <li>
            <a href="#tabs-1">Tab 1</a>
        </li>
        <li>
            <a href="#tabs-2">Tab 2</a>
        </li>
    </ul>
    <div id="tabs-1">
        Tab 1 content ${key}
    </div>
    <div id="tabs-2">
        Tab 2 content
    </div>
  </div>
</script>

<ul>
  <li><a href="#" id="dialogButton">dialogify</a></li>
</ul>

<script type="text/javascript">

  $('#dialogButton').click(function () {
    var test = new Object();
    test['key'] = 'value';

    var $dialog = $('<div></div>')
      .html($('#tabTemplate').tmpl(test))
      .dialog({ autoOpen: false });

    $dialog.bind('dialogopen', function() { 
        $('#tabs', $(this)).tabs();
    }); 
    $dialog.bind('dialogclose', function() { 
        $('#tabs', $(this)).tabs('destroy'); 
        $(this).dialog('destroy');
    });

    $dialog.dialog('open');
    return false;
  });

</script>

Clicking the dialogify link for the first time will display the content as expected, but subsequent times do not. I have tried playing around with using a selector other than '#tabs' (such as by className) as well as dynamically adding tabs but I could not seem to get this working.

Any advice on what else I could try would be appreciated!

Thanks,

Marc