jQWidgets Forums

Tagged: datetimeinput, empty tab, jqxdatetimeinput, jqxTabs, Tabs

This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 5 months ago.

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

Author

Integration with DateTimeInput Posts

November 22, 2014 at 12:57 pm Integration with DateTimeInput #63165

Participant

Dear All,

still struggling with a simple problem:
I have 2 tabs with each containing a date input.
I used the sample “Using jqxTabs with other widgets”.
I want to have at each tab a date input field. In addition do I add dynamically content to each tab.
The problems are:
1) the date input works only at the first tab. Do I select the second tab, the input is shown, buttress not work.
2) If I go back to the first tab, then the content disappeared and is not created anymore.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Depot Hauptseite</title>
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.black.css" type="text/css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttongroup.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/globalization/globalize.culture.de-DE.js"></script>
	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxwindow.js"></script>
	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxpanel.js"></script>
	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxtabs.js"></script>
	<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript" src="jquery-validation/dist/jquery.validate.js"></script>
	<script type="text/javascript" src="jquery-validation/src/localization/messages_de.js"></script>
	<script type="text/javascript" src="jquery-validation/src/localization/methods_de.js"></script>
    <script type="text/javascript" src="jqwidgets/scripts/demos.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

			var a_eingabe	= $("<div id='tab_eingabe'></div>");
			var a_datum 	= $("<div>Datum</div><div id='tab_datum'></div>");

            var selectKauf = function () {
				$("#tab_bar").empty();
				$("#tab_kauf").append(a_eingabe);
				$("#tab_eingabe").append(a_datum);
				$("#tab_datum").jqxDateTimeInput({width: '150px', height: '20px', formatString: "dd.MM.yyyy", culture: 'de-DE', theme: 'black'});
            }
            var selectBar = function () {
				$("#tab_kauf").empty();
				$("#tab_bar").append(a_eingabe);
				$("#tab_eingabe").append(a_datum);

            }

            // init widgets.
            var initWidgets = function (tab) {
                switch (tab) {
                    case 0:
                        selectKauf();
                        break;
                    case 1:
                        selectBar();
                        break;
                }
            }
            
            $('#jqxTabs').jqxTabs({ width: 300, height: 400, theme: 'black', initTabContent: initWidgets });

        });
    </script>
</head>
<body class='default'>
    <div id='jqxTabs'>
        <ul>
            <li>Kauf</li>
            <li>Bar</li>
        </ul>
        <div style="margin: 10px; overflow: hidden;">
            <div id="tab_kauf"></div>
        </div>
        <div style="margin: 10px; overflow: hidden;">
            <div id="tab_bar"></div>
        </div>
    </div>
</body>
</html>

Any suggestion, how to implement this target function correctly?

Jens

November 24, 2014 at 9:50 am Integration with DateTimeInput #63201

Nadezhda

Participant

Hello Jens,

Callback function ‘initTabContent’ is calling by tabs when a content in panel needs to be initialized. This initializing method is calling only on first tab initialization.
Your issue with disappeared content will be resolved if you take out the empty() method from your initialization widgets functions – ‘selectKauf’ and ‘selectBar’.
I am not sure what exactly do you want to do, but it is not correct to use ‘tab_eingabe’ id and ‘tab_datum’ id in both tab contents. I suggest you to use one id for the first tab and the other id for the second tab or if need to use both, please change the id to class selection.

Best Regards,
Nadezhda

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.