selected/dragEnd event doesn't fire - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: dragEnd, event, jqxTabs, reorder, selected, tab, Tabs

This topic contains 6 replies, has 3 voices, and was last updated by Dimitar 6 years, 4 months ago.

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

Author

selected/dragEnd event doesn’t fire Posts

September 3, 2013 at 2:32 pm selected/dragEnd event doesn’t fire #28232

Artsem

Member

Neither selected nor dragEnd event fires but selected tab is changed when releasing dragged tab outside other tabs (case when tabs order is not changed).

$('#jqxTabs').jqxTabs({
    width: '100%',
    height: '100%',
    reorder:true
});

September 4, 2013 at 5:43 am selected/dragEnd event doesn’t fire #28273

Dimitar

Participant

Hello Artsem,

We have tried to reproduce the reported behaviour using the following code but to no avail:

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
        $(document).ready(function () {
            var theme = "";
            $('#jqxTabs').jqxTabs({ position: 'top', width: 500, theme: theme, reorder: true });
            $('#jqxTabs').on('selected', function (event) {
                alert(event.type);
            });
            $('#jqxTabs').on('dragEnd', function (event) {
                alert(event.type);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxTabs'>
        <ul style='margin-left: 30px;'>
            <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>
</body>
</html>

Please give us a step-by-step explanation on how to reproduce the issue. Make sure you are using the latest version of jQWidgets (3.0.2), too.

Best Regards,
Dimitar

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

September 4, 2013 at 9:11 am selected/dragEnd event doesn’t fire #28287

Artsem

Member

Hello Dimitar,
Thank you for the quick response. I updated to the latest version, but still have the same problem. I have something like this:

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>@ViewBag.Title</title>
        
        <link href="@Url.Content("~/Scripts/jqwidgets/styles/jqx.base.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jqwidgets/jqxcore.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jqwidgets/jqxtabs.js")" type="text/javascript"></script>
        
        <script type="text/javascript">
            $(document).ready(function () {
                $('#jqxTabs').jqxTabs({
                    width: 725,
                    height: 760,
                    reorder:true
                });
                
                $('#jqxTabs').on('selected', function (event) {
                    alert(event.type);
                });
                
                $('#jqxTabs').on('dragEnd', function (event) {
                    alert(event.type);
                });
            });
        </script>
    </head>
    <body>
        <div id="jqxTabs">
            <ul style="margin-left: 30px;">
                <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>
    </body>
</html>

In this case “Node.js” tab is selected by default, other two are not. Start drag not selected “Active Server Pages” (in our case it is the last) tab to the right. Release it -> the result: the order of tabs was not changed and it’s ok, but “Active Server Pages” tab became active, but content is shown from the last active tab (in our case it’s “Node.js”), also no events fired.

September 4, 2013 at 9:23 am selected/dragEnd event doesn’t fire #28292

Artsem

Member

The same issue can be reproduced on your demo page “jqxTabs” -> “Drag and Drop”.

Best Regards,
Artsem

September 4, 2013 at 11:37 am selected/dragEnd event doesn’t fire #28303

Dimitar

Participant

Hi Artsem,

Thank you for your feedback. We will investigate the reported issue.

Best Regards,
Dimitar

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

May 28, 2018 at 1:43 pm selected/dragEnd event doesn’t fire #100339

jonatas

Participant

I have a problem when I change the position of the items tab and delete one of the items, the position of the id is not changed through the reorder property, thus causing the deletion of the item that was not selected. Eg I have 3 tabs whose selection sequence is 0.1 and 2. When I drag the item 2 to item 0, the tabs are changed, but when I delete the tab 0, the index in the ‘removed’ , event.args.item, index 2 is returned. How do I change this index when the ‘dragEnd’ event is made?

May 29, 2018 at 10:39 am selected/dragEnd event doesn’t fire #100352

Dimitar

Participant

Hi jonatas,

In jqxTabs, tab indexes are based on the position in the tab header. That is why when tabs are reordered, their indexes change. If you have the configuration (A|B|C), reorder them as (C|B|A) and then call $('#jqxTabs').jqxTabs('removeAt', 2);, item “A” will be removed, because its new index is 2. event.args.item in the removed handler will return 2, but event.args.title will be “A”. This is the expected behaviour of jqxTabs and it cannot be altered.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.