content in div becoming non editable mode by using jqwidgets , jqtabs

[bhanu.kParticipant]

Trying to implement jqtabs with jqtree . scenario when we try to click on the node of the tree new tab will be opened with the content .

New tab is created in the last with content but it is not editable . not sure about the behaviour of the tree with tabs combo . My Code goes as follows :

<aside class="right-sidebarmodi">

        <div id='jqxTree'> <ul>
                <li item-expanded='true'>Transaction Data
                    <ul>
                        <li id="oo">oo</li>
                        <li id="fc">fc</li>
                        <li id="pc">pc</li>
                    </ul>
                </li>           </ul>       </div>

                </aside>

        <div id='jqxWidget'>
           <div style='float: left;'>
                <div id='jqxTabs'>
                    <ul style='margin-left: 10px;'>

                    </ul>
                    <div id='oo1' >

                        <ui:include src="../../dsmod/transaction/1.xhtml" />
                    </div>
                    <div id='fc1' >Tab 2</div>
                    <div id='pc1' >Tab 3</div>
                </div>  
           </div>       
        </div>

And my script is as follows :

<script type="text/javascript">

        $(document).ready(function () {

            // Create jqxTree
             $("#jqxTabs").css('visibility', 'hidden');

            $('#jqxTree').jqxTree({ height: '800px', width: '245px' });
            $('#jqxTree').bind('select', function (event) {

                var htmlElement = event.args.element;
                var item = $('#jqxTree').jqxTree('getItem', htmlElement);
                var position;
                var tabsCount = $("#jqxTabs").jqxTabs('length');
               // alert(tabsCount);
                for (var i = 0; i < tabsCount; i++) {
                    var tabTitle = $("#jqxTabs").jqxTabs('getTitleAt', i);
                    if (tabTitle == item.label) {
                        position = i;
                        break;
                    };
                };
                alert(item.label);
                $("#jqxTabs").css('visibility', 'visible');

                $('#jqxTabs').jqxTabs('removeAt', position);
                $('#jqxTabs').jqxTabs('addLast', item.label, $("#"+item.id+"1").html() );

                $('#jqxTabs').jqxTabs('ensureVisible', -1);

            });

        });
    </script>

        <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxTabs').jqxTabs({ height: 800, width: 1200  , showCloseButtons: true});
        });
    </script>

Did any one tried with tree with tabs . is this the same behaviour or any work around for this .

[MartinParticipant]

Hello bhanu.k,

Yes, this is the functionality of jqxTabs.
The content of the tabs can be updated using the setContentAt method.
Here is an Example of it.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts