jQuery UI Widgets Forums Navigation Tabs selected/dragEnd event doesn’t fire

This topic contains 6 replies, has 3 voices, and was last updated by  Dimitar 1 year, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • 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
    }); 
    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/

    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.

    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

    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/


    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?


    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/

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

You must be logged in to reply to this topic.