jQWidgets Forums

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

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

Author

tabs losing tab when set the title but string appear Posts

June 28, 2013 at 1:45 pm tabs losing tab when set the title but string appear #24127

Member

This aims to change the title content depending if or not an error in the global form page has occured.
The title add 3 ! at the end removing all the precedent ! so so that is possible to controll the number of resulted !.
tabref is the number of the tab.

var title =  jQuery('#tabs').jqxTabs('getTitleAt', tabref).replace(/!/g, '')+ '!!!';
 jQuery('#tabs').jqxTabs('setTitleAt', tabref,title);

The tab change the writing but the graphic of the tab container disappear

July 1, 2013 at 5:31 am tabs losing tab when set the title but string appear #24226

Dimitar

Participant

Hello GabrieleMartino,

We did not encounter any issues with your solution. Here is a working example:

<!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.1.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/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // Create jqxTabs.
            $('#jqxTabs').jqxTabs({ width: '90%', height: 200, position: 'top', theme: theme });
            $('#settings div').css('margin-top', '10px');
            $('#animation').jqxCheckBox({ theme: theme });
            $('#contentAnimation').jqxCheckBox({ theme: theme });
            $('#animation').on('change', function (event) {
                var checked = event.args.checked;
                $('#jqxTabs').jqxTabs({ selectionTracker: checked });
            });
            $('#contentAnimation').on('change', function (event) {
                var checked = event.args.checked;
                if (checked) {
                    $('#jqxTabs').jqxTabs({ animationType: 'fade' });
                }
                else {
                    $('#jqxTabs').jqxTabs({ animationType: 'none' });
                }
            });
            $("#button").click(function () {
                var title = jQuery('#jqxTabs').jqxTabs('getTitleAt', 1).replace(/!/g, '') + '!!!';
                jQuery('#jqxTabs').jqxTabs('setTitleAt', 1, title);
            });
        });
    </script>
</head>
<body class='default'>
    <button id="button">
        Button</button>
    <div id='jqxWidget'>
        <div id='jqxTabs'>
            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages!</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</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>
                Python is a general-purpose, high-level programming language[5] whose design philosophy
                emphasizes code readability. Python claims to "[combine] remarkable power with very
                clear syntax",[7] and its standard library is large and comprehensive. Its use of
                indentation for block delimiters is unique among popular programming languages.
                Python supports multiple programming paradigms, primarily but not limited to object-oriented,
                imperative and, to a lesser extent, functional programming styles. It features a
                fully dynamic type system and automatic memory management, similar to that of Scheme,
                Ruby, Perl, and Tcl. Like other dynamic languages, Python is often used as a scripting
                language, but is also used in a wide range of non-scripting contexts.
            </div>
            <div>
                Perl is a high-level, general-purpose, interpreted, dynamic programming language.
                Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting
                language to make report processing easier. Since then, it has undergone many changes
                and revisions and become widely popular amongst programmers. Larry Wall continues
                to oversee development of the core language, and its upcoming version, Perl 6. Perl
                borrows features from other programming languages including C, shell scripting (sh),
                AWK, and sed.[5] The language provides powerful text processing facilities without
                the arbitrary data length limits of many contemporary Unix tools, facilitating easy
                manipulation of text files.
            </div>
        </div>
        <div id='settings'>
            <div id='animation'>
                Enable Select Animation</div>
            <div id='contentAnimation'>
                Enable Content Animation</div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

July 1, 2013 at 9:12 am tabs losing tab when set the title but string appear #24245

GabrieleMartino

Member

If i see the generated html after tab set Title At i get

<li class="jqx-reset jqx-disableselect jqx-tabs-title jqx-tabs-title-metro jqx-item jqx-item-metro jqx-rc-t jqx-rc-t-metro jqx-tabs-title-selected-top jqx-tabs-title-selected-top-metro jqx-fill-state-pressed jqx-fill-state-pressed-metro" style="float: left; position: static; height: 24px;">Ciao</li>

As not rendered element of jqxTabs.

If i see the other element i have

li class="jqx-reset jqx-disableselect jqx-tabs-title jqx-tabs-title-metro jqx-item jqx-item-metro jqx-rc-t jqx-rc-t-metro jqx-tabs-title-selected-top jqx-tabs-title-selected-top-metro jqx-fill-state-pressed jqx-fill-state-pressed-metro" style="float: left; position: static; height: 24px;">
<div class="jqx-tabs-titleWrapper" style="outline: medium none; position: relative; z-index: 15; height: 100%;">
<div class="jqx-tabs-titleContentWrapper jqx-disableselect" style="float: left; margin-top: 0px;">
<div class="table-label">
<span>Utente</span>
</div>
</div>
<div class="jqx-tabs-close-button jqx-tabs-close-button-metro" style="height: 16px; width: 16px; float: left; font-size: 1px; display: none; margin-top: 5px;"></div>
</div>
</li>

is there the possibility to force a new rendering?

July 3, 2013 at 5:23 am tabs losing tab when set the title but string appear #24367

Dimitar

Participant

Hi GabrieleMartino,

We were not able to reproduce the reported issue using the provided example using the latest version (2.9.1). The HTML structure before and after the title update is the same. We suggest you to update to the latest version of jQWidgets.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.