jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Remove Tab then Select First Tab Posts

November 5, 2013 at 9:11 pm Remove Tab then Select First Tab #31975

Participant

Currently I am unable to use the ‘select’ method when trying to use it after the ‘removeAt’ method.

with code below, select the third tab, then hit the “Remove” button, it should remove the tab and select the first tab, yet the second tab is selected. You can press the “Select” button to verify that the method works on its own….

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Tabs, Tabs Widget, TabView" /> 
    <meta name="description" content="The jqxTabs is breaking the content into multiple sections. You
        can populate it from 'UL' for the tab titles and 'DIV' for it's contents." />
    <title id='Description'>The demo shows how to use the jqxTabs API to add, remove, enable and disable tabs.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            $('#jqxTabs').jqxTabs({ height: 220, width: 510, theme: theme });
            // Create and initialize Buttons
            $('#Select').jqxButton({ width: '100px', theme: theme });
            $('#Remove').jqxButton({ width: '100px', theme: theme });
          
            // Add 
            $('#Select').click(function () {
                $('#jqxTabs').jqxTabs('select',0);
                
            });
            // Remove 
            $('#Remove').click(function () {
                var selectedItem = $('#jqxTabs').jqxTabs('selectedItem');
                var disabledItems = $('#jqxTabs').jqxTabs('getDisabledTabsCount');
                var items = $('#jqxTabs').jqxTabs('length');
                if (items > disabledItems + 1) {
                    $('#jqxTabs').jqxTabs('removeAt', selectedItem);
					$('#jqxTabs').jqxTabs('select',0);
                }
            });
            
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style='float: left;'>
            <div id='jqxTabs'>
                <ul style='margin-left: 10px;'>
                    <li>Node.js</li>
                    <li>JavaServer Pages</li>
                    <li>Active Server Pages</li>
                </ul>
                <div>
                    Node.js is an event-driven I/O server-side JavaScript environment based on V8. It is intended for writing scalable network programs such as web servers.
                    It was created by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
                    Similar environments written in other programming languages include Twisted for Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
                    Unlike most JavaScript, it is not executed in a web browser, but is instead a form of server-side JavaScript. Node.js implements some CommonJS specifications.
                    Node.js includes a REPL environment for interactive testing.
                </div>
                <div>
                    JavaServer Pages (JSP) is a Java technology that helps software developers serve dynamically generated web pages based on HTML, XML, or other document types.
                    Released in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address the perception that the Java programming environment didn't provide developers with enough support for the Web.
                    To deploy and run, a compatible web server with servlet container is required. The Java Servlet and the JavaServer Pages (JSP) specifications from Sun Microsystems and the JCP
                    (Java Community Process) must both be met by the container.
                </div>
                <div>
                    ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services.
                    It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology.
                    ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language.
                    The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages.
                </div>           
            </div>
        </div>
    </div>
    <div style='margin-left: 60px; float: left;'>
        <div style='margin-top: 10px;'>
            <input type="button" id='Select' value="Select" />
        </div>
        <div style='margin-top: 10px;'>
            <input type="button" id='Remove' value="Remove" />
        </div>
    </div>
</body>
</html>

November 6, 2013 at 10:10 am Remove Tab then Select First Tab #32035

Dimitar

Participant

Hello aoverton07,

This is a known behaviour. The select method cannot be called immediately after removeAt due to a conflict with its default behaviour. You may try setting a timeout before calling select, i.e.:

$('#jqxTabs').jqxTabs('removeAt', selectedItem);
setTimeout(function () {
    $('#jqxTabs').jqxTabs('select', 0);
}, 300);

Best Regards,
Dimitar

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

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.