jQuery UI Widgets Forums Dialogs and Notifications Window ID problem in input field, DateTime problem

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

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

  • elbnacht
    Participant

    Dear all,

    I created a page out of this demo:
    demos/jqxwindow/defaultfunctionality.htm

    I added input fields different for each tab. This works so far.
    I’m facing two problems.

    1) as soon as I use the “autoOpen: false,” attribute, the “$(“#tab_suche_aktie”).jqxInput({…” input filed does not find the id anymore.
    I know the reason, but have no idea for a solution.

    2) the date input field does not work. I get an error “TypeError: this.getDate is not a function” out of the “jqxdatetimeinput.js”. What can I do?

    <!DOCTYPE html>
    <html lang="de">
    <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>
    	<style>
    		label, input { display:block; }
    	</style>
    
        <script type="text/javascript">
    
    		var dataAdapter, search_url, searchSelected, isValid;
    
    		var a_aktie		= $("<div>Aktie</div><input id='tab_suche_aktie' type='text' name='aktie' placeholder='Aktie' required autofocus autocomplete='off'>"),
    			a_index 	= $("<div>Aktienindex</div><input id='tab_index' type='text' name='index' placeholder='Aktienindex' required disabled>"),
    			a_isin 		= $("<div>ISIN</div><input id='tab_isin' type='text' name='isin' placeholder='ISIN' required disabled>"),
    			a_info 		= a_index + a_isin,
    			a_datum 	= $("<div>Datum</div><div id='tab_datum'></div>"),
    			a_wert 		= $("<div id='l_wert'></div><input id='tab_wert' type='number' name='wert' required autocomplete=off>"),
    			a_anzahl 	= $("<div>Anzahl</div><input id='tab_anzahl' type='number' name='anzahl' required autocomplete=off>"),
    			a_kosten 	= $("<div id='l_kosten'></div><input id='tab_kosten' type='number' name='kosten' required autocomplete=off>"),
    			a_eingabe	= $("<div id='tab_eingabe'></div>");
    
    		var aktie		= $( '#tab_suche_aktie' ),
    			index		= $( '#tab_index' ),
    			isin		= $( '#tab_isin' ),
    			anzahl		= $( '#tab_anzahl' ),
    			wert		= $( '#tab_wert' ),
    			kosten		= $( '#tab_kosten' ),
    			datum		= $( '#tab_datum' );
    
    		var basicDemo = (function () {
                //Adding event listeners
                function _addEventListeners() {
                    $('#newEntry').click(function () {
                        $('#dialog-window').jqxWindow('open');
                    });
                    $('#dialog_cancel').click(function () {
                        $('#dialog-window').jqxWindow('close');
                    });
                    $('#dialog_enter').click(function () {
    					//if (isValid) {
    							$("#dialog").validate();
    							//alert ('Wert eingetragen');
    						//$("#dialog").submit();
    						addEntry();
    						$('#dialog-window').jqxWindow('close');
    					//}
    				});
    			};
    
                //Creating all page elements which are jqxWidgets
                function _createElements() {
                    $('#newEntry').jqxButton({ width: '140px', theme: 'black' });
    				$("#dialog_radio").jqxButtonGroup({ mode: 'radio', theme: 'black' });
                    $('#dialog_cancel').jqxButton({ width: '140px', theme: 'black' });
                    $('#dialog_enter').jqxButton({ width: '140px', theme: 'black' });
    
                };
    
                var initTabs = function () {
    						search_url = 'suggest_search.php';
    						$("#tab_kauf").append(a_aktie);
    						$("#tab_kauf").append(a_eingabe);
    						$("#tab_eingabe").append(a_index);
    						$("#tab_eingabe").append(a_isin);
    						$("#tab_eingabe").append(a_datum);
    						$("#tab_eingabe").append(a_wert);
    						$("#tab_eingabe").append(a_anzahl);
    						$("#tab_eingabe").append(a_kosten);
    						$("#l_wert").text("Kurs");
    						$("#l_kosten").text("Gebühren");
    						$("#tab_datum").jqxDateTimeInput({width: '150px', height: '20px', formatString: "dd.MM.yyyy", culture: 'de-DE', theme: 'black'});
    				}
                
                //Creating the window
                function _createWindow() {
                    $('#dialog-window').jqxWindow({
                        showCollapseButton: false, theme: 'black', 
                        height: 470, width: 380,
                        resizable: false,
                        initContent: function () {
                            $('#tab').jqxTabs({ height: '90%', width:  '100%', theme: 'black', initTabContent: initTabs});
                            $('#dialog_radio').jqxButtonGroup('setSelection', 0);
    						$("#tab_eingabe").css('visibility', 'hidden');
                            $('#dialog-window').jqxWindow('focus');
    					},
                        autoOpen: false,
    				});
    			};
    
                return {
                    config: {
                        dragArea: null
                    },
                    init: function () {
                        //Creating all jqxWindgets except the window
                        _createElements();
                        //Attaching event listeners
                        _addEventListeners();
                        //Adding jqxWindow
                        _createWindow();
                    }
                };
            } ());
    
    			var	input_source = function (query, response) {
    					dataAdapter = new $.jqx.dataAdapter({
    						datatype: "json",
    						datafields: [
    							{ name: 'aktie', type: 'string'},
    							{ name: 'index', type: 'string'},
    							{ name: 'isin', type: 'string'},
    							{ name: 'anzahl', type: 'string'}
    						],
    						url: search_url
    					},
    					{
    						autoBind: true,
    						formatData: function (data) {
    							data.name_startsWith = query;
    							return data;
    						},
    						loadComplete: function (data) {
    							if (data.length > 0) {
    								response($.map(data, function (item) {
    									return item.aktie;
    								}));
    							}
    						}
    					});
    				}
    
    		function addEntry() {
    			var depotName 			= $('#dialog_radio').jqxButtonGroup('getSelection');
    			var selectedTabIndex 	= $("#tab").jqxTabs('val');
    			var selectedTabName 	= $('#tab').jqxTabs('getTitleAt', selectedTabIndex); 
    			$.ajax({
    				url: "addEntry.php",
    				type: "POST",
    				async: true,
    				data: { 
    					Typ:		selectedTabName,
    					DepotName:	depotName,
    					Index:		$('#tab_index').val(),
    					ISIN:		$('#tab_isin').val(),
    					Datum:		$('#tab_datum').val(),
    					Wert:		$('#tab_wert').val(),
    					Anzahl:		$('#tab_anzahl').val(),
    					Kosten:		$('#tab_kosten').val(),
    				},
    				dataType: "html"
    			})
    		};
    
            $(document).ready(function () {
    			
                //Initializing the demo
                basicDemo.init();
    
    			// Create a jqxMenu
    			$("#jqxMenu").jqxMenu({ width: '120', mode: 'vertical', theme: 'black'});
    			$("#jqxMenu").css('visibility', 'visible');
    
                $('#tab').on('selected', function (event) {
    				var selectedTab = event.args.item;
    
                    switch (selectedTab) {
    					case 0: // Kauf
    						search_url = 'suggest_search.php';
    						$("#tab_kauf").append(a_aktie);
    						$("#tab_kauf").append(a_eingabe);
    						$("#tab_eingabe").empty();
    						$("#tab_eingabe").append(a_index);
    						$("#tab_eingabe").append(a_isin);
    						$("#tab_eingabe").append(a_datum);
    						$("#tab_eingabe").append(a_wert);
    						$("#tab_eingabe").append(a_anzahl);
    						$("#tab_eingabe").append(a_kosten);
    						$("#l_wert").text("Kurs");
    						$("#l_kosten").text("Gebühren");
    						$("#tab_eingabe").css('visibility', 'hidden');
    						$("#tab_suche_aktie").val('');
    					break;
    					case 1: // Verkauf
    						search_url = 'suggest_list.php';
    						$("#tab_verkauf").append(a_aktie);
    						$("#tab_verkauf").append(a_eingabe);
    						$("#tab_eingabe").empty();
    						$("#tab_eingabe").append(a_index);
    						$("#tab_eingabe").append(a_isin);
    						$("#tab_eingabe").append(a_datum);
    						$("#tab_eingabe").append(a_wert);
    						$("#tab_eingabe").append(a_anzahl);
    						$("#tab_eingabe").append(a_kosten);
    						$("#l_wert").text("Kurs");
    						$("#l_kosten").text("Gebühren");
    						$("#tab_eingabe").css('visibility', 'hidden');
    						$("#tab_suche_aktie").val('');
    					break;
    					case 2: // Split
    						search_url = 'suggest_search.php';
    						$("#tab_split").append(a_aktie);
    						$("#tab_split").append(a_eingabe);
    						$("#tab_eingabe").empty();
    						$("#tab_eingabe").append(a_index);
    						$("#tab_eingabe").append(a_isin);
    						$("#tab_eingabe").append(a_datum);
    						$("#tab_eingabe").append(a_anzahl);
    						$("#tab_eingabe").css('visibility', 'hidden');
    						$("#tab_suche_aktie").val('');
    					break;
    					case 3: // Dividende
    						search_url = 'suggest_search.php';
    						$("#tab_dividende").append(a_aktie);
    						$("#tab_dividende").append(a_eingabe);
    						$("#tab_eingabe").empty();
    						$("#tab_eingabe").append(a_index);
    						$("#tab_eingabe").append(a_isin);
    						$("#tab_eingabe").append(a_datum);
    						$("#tab_eingabe").append(a_wert);
    						$("#tab_eingabe").append(a_anzahl);
    						$("#tab_eingabe").append(a_kosten);
    						$("#l_wert").text("Dividende");
    						$("#l_kosten").text("Steuern");
    						$("#tab_eingabe").css('visibility', 'hidden');
    						$("#tab_suche_aktie").val('');
    					break;
    					case 4: // Bar
    						$("#tab_bar").append(a_eingabe);
    						$("#tab_eingabe").empty();
    						$("#tab_eingabe").append(a_datum);
    						$("#tab_eingabe").append(a_kosten);
    						$("#tab_eingabe").css('visibility', 'visible');
    						$("#l_kosten").text("Bar");
    					break;
                    }
    				$("#tab_datum").jqxDateTimeInput({width: '150px', height: '20px', formatString: "dd.MM.yyyy", culture: 'de-DE', theme: 'black'});
                });
    
    			$("#tab_suche_aktie").jqxInput({
                    placeHolder: "Aktie oder ISIN",
                    theme: 'black',
    				width: 200,
    				height: 25,
    				source: input_source
                });
     
    			$("#tab_suche_aktie").on('select', function (event) {
    				if (event.args) {
    					var item = event.args.item;
    					if (item) {
    						var s_index, s_isin, s_anzahl;
    						for (var i = 0; i < dataAdapter.records.length; i++) {
    							if (item.label == dataAdapter.records[i].aktie) {
    								s_index = dataAdapter.records[i].index;
    								s_isin = dataAdapter.records[i].isin;
    								s_anzahl = dataAdapter.records[i].anzahl;
    								break;
    							}
    						}
    						$("#tab_eingabe").css('visibility', 'visible');
    						document.getElementById('tab_index').value = s_index;
    						document.getElementById('tab_isin').value = s_isin;
    						document.getElementById('tab_anzahl').value = s_anzahl;
    						searchSelected = true;
    					}
    				}
    			});
    
                $("#table").jqxDataTable(
                {
                    altRows: true,
                    sortable: true,
                    editable: true,
                    selectionMode: 'singleRow',
                    theme: 'black',
                    columns: [
                      { text: 'Index', dataField: 'Index', width: 100 },
                      { text: 'Name', dataField: 'Name', width: 120 },
                      { text: 'ISIN', dataField: 'ISIN', width: 100 },
                      { text: 'Stückzahl', dataField: 'Stückzahl', width: 80, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
                      { text: 'Datum', dataField: 'Datum', width: 80, align: 'right', cellsAlign: 'right', cellsFormat: 'n' },
                      { text: 'Kurs', dataField: 'Kurs', width: 80 },
                      { text: 'Kosten', dataField: 'Kosten', width: 80 },
                      { text: 'Wert', dataField: 'Wert', width: 80 },
                      { text: 'Performance', dataField: 'Performance', width: 50 }
                    ]
                });
    
            });
        </script>
    </head>
    <body class='default' style='background: #222222'>
    
    	<div id='jqxMenu' style="visibility: hidden; float: left;">
    		<?php
    			include("navigation.html");
    		?>
    	</div>
    	<form id="dialog" action="addEntry.php" method="post">
                <div id="dialog-window">
                    <div id="windowHeader">
                        <span>Transaktion</span>
                    </div>
                    <div style="overflow: hidden;" id="windowContent">
                        <div id="tab">
                            <ul style="margin-left: 30px;">
                                <li>Kauf</li>
                                <li>Verkauf</li>
                                <li>Split</li>
                                <li>Dividende</li>
                                <li>Bar</li>
                            </ul>
                            <div id="tab_kauf">
    						</div>
    						<div id="tab_verkauf">
                            </div>
                            <div id="tab_split">
                             </div>
                            <div id="tab_dividende">
                            </div>
                            <div id="tab_bar">
                            </div>
                        </div>
    					<div id='dialog_radio'>
    						<button id="radio_left" style='width: 50px'>TSI</button>
    						<button id="radio_right" style='width: 50px'>R&J</button>
    					</div>
    					<div id='dialog_input'>
    						<button id="dialog_cancel">Abbrechen</button>
    						<button id="dialog_enter">Wert eintragen</button>
    					</div>
                    </div>
                </div>
    	</form>
    
    	<?php
    		error_reporting (E_ALL | E_STRICT);
    		ini_set ('display_errors' , 1);
    
    		$db_link = mysqli_connect("localhost","root", "")
    		or die ("... keine Verbindung möglich. Benutzername oder Passwort sind falsch");
    
    		mysqli_select_db($db_link, "TSI")
    		or die ("Die Datenbank existiert nicht.");
    	?>
    
    	<div style='margin-left: 140px'>
        <table id="table" border="1">
            <thead>
                <tr>
                    <th align="left">Index</th>
                    <th align="left">Name</th>
                    <th align="left">ISIN</th>
                    <th align="right">Stückzahl</th>
                    <th align="right">Datum</th>
                    <th align="left">Kurs</th>
                    <th align="left">Kosten</th>
                    <th align="left">Wert</th>
                    <th align="right">Performance</th>
                </tr>
            </thead>
            <tbody>
        <?php
        	//Abfrage und Füllen der Tabelle mit aktuellen Werten
    		$abfrage = "SELECT ak.AktienIndex, ak.Name, de.ISIN, de.Anzahl, de.KaufDatum, de.KaufKurs, de.KaufWert FROM Depot1 de JOIN Aktien ak ON ak.ISIN = de.ISIN";
    		$ergebnis = mysqli_query($db_link, $abfrage);
    		while($row = mysqli_fetch_object($ergebnis)) {
    			echo "
    				<tr>
    				<td style=text-align:left>" . $row->AktienIndex . "</td>
    				<td style=text-align:left>" . $row->Name . "</td>
    				<td style=text-align:left>" . $row->ISIN . "</td>
    				<td style=text-align:right>" . str_replace('.', ',', $row->Anzahl) . "</td>
    				<td style=text-align:center>" . preg_replace('#^(\d{4})\-(\d{2})\-(\d{2})$#', '\3.\2.\1', $row->KaufDatum) . "</td>
    				<td style=text-align:right>" . str_replace('.', ',', $row->KaufKurs) . ' €' . "</td>
    				<td style=text-align:right>" . str_replace('.', ',', $row->KaufWert) . ' €' . "</td>
    				<td style=text-align:right>" . "Test" . ' €' . "</td>
    				<td style=text-align:right>" . "Test" . ' %' . "</td>
    				</tr>";
    		}
    	?>
            </tbody>
        </table>
        <div>
    		<input id='newEntry' type="button" value="Neuer Depoteintrag"/>
    	</div>
    	</div>
    </body>
    </html>
    

    Thanks Jens

    ID problem in input field, DateTime problem #62842

    Dimitar
    Participant

    Hello Jens,

    Your implementation of initTabContent (the function initTabs) is not correct. You should execute the relevant code for each tab only once and not the code of all tabs each time a tab is initialized. Please check out the demo Integration with other widgets to see how to correctly implement this callback.

    Best Regards,
    Dimitar

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


    elbnacht
    Participant

    Dear Dimitar,

    yes, this helped a lot understanding the principles.
    Still two issues are present:

    1) I can’t get the jquery “$(“#tab_suche_aktie”).on(‘select’, function (event) { …” running. The id is present after init, but no reaction.
    2) The date input field does still not work. I get again an error “TypeError: this.getDate is not a function” out of the “jqxdatetimeinput.js”. What can I do?

    Here my changed code:

    <!DOCTYPE html>
    <html lang="de">
    <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>
    	<style>
    		label, input { display:block; }
    	</style>
    
        <script type="text/javascript">
    
    		var dataAdapter, search_url, searchSelected, isValid;
    
    		var a_aktie		= $("<div>Aktie</div><input id='tab_suche_aktie' type='text' name='aktie' required autofocus autocomplete='off'>"),
    			a_index 	= $("<div>Aktienindex</div><input id='tab_index' type='text' name='index' placeholder='Aktienindex' required disabled>"),
    			a_isin 		= $("<div>ISIN</div><input id='tab_isin' type='text' name='isin' placeholder='ISIN' required disabled>"),
    			a_info 		= a_index + a_isin,
    			a_datum 	= $("<div>Datum</div><div id='tab_datum'></div>"),
    			a_wert 		= $("<div id='l_wert'></div><input id='tab_wert' type='number' name='wert' required autocomplete=off>"),
    			a_anzahl 	= $("<div>Anzahl</div><input id='tab_anzahl' type='number' name='anzahl' required autocomplete=off>"),
    			a_kosten 	= $("<div id='l_kosten'></div><input id='tab_kosten' type='number' name='kosten' required autocomplete=off>"),
    			a_eingabe	= $("<div id='tab_eingabe'></div>");
    
    		var aktie		= $( '#tab_suche_aktie' ),
    			index		= $( '#tab_index' ),
    			isin		= $( '#tab_isin' ),
    			anzahl		= $( '#tab_anzahl' ),
    			wert		= $( '#tab_wert' ),
    			kosten		= $( '#tab_kosten' ),
    			datum		= $( '#tab_datum' );
    
    		var	input_source = function (query, response) {
    			dataAdapter = new $.jqx.dataAdapter({
    				datatype: "json",
    				datafields: [
    					{ name: 'aktie', type: 'string'},
    					{ name: 'index', type: 'string'},
    					{ name: 'isin', type: 'string'},
    					{ name: 'anzahl', type: 'string'}
    				],
    				url: search_url
    			},
    			{
    				autoBind: true,
    				formatData: function (data) {
    					data.name_startsWith = query;
    					return data;
    				},
    				loadComplete: function (data) {
    					if (data.length > 0) {
    						response($.map(data, function (item) {
    							return item.aktie;
    						}));
    					}
    				}
    			});
    		}
    
    		var sucheAktie	= function () {
    			$("#tab_suche_aktie").jqxInput({
                   	placeHolder: "Aktie oder ISIN",
    				theme: 'black',
    				width: 200,
    				height: 25,
    				source: input_source
                });
    		}
    
    		var initTabs = function (selectedTab) {
                    switch (selectedTab) {
    					case 0: // Kauf
    						search_url = 'suggest_search.php';
    						$("#tab_kauf").append(a_aktie);
    						$("#tab_kauf").append(a_eingabe);
    						$("#tab_eingabe").empty();
    						$("#tab_eingabe").append(a_index);
    						$("#tab_eingabe").append(a_isin);
    						$("#tab_eingabe").append(a_datum);
    						$("#tab_eingabe").append(a_wert);
    						$("#tab_eingabe").append(a_anzahl);
    						$("#tab_eingabe").append(a_kosten);
    						$("#l_wert").text("Kurs");
    						$("#l_kosten").text("Gebühren");
    						$("#tab_eingabe").css('visibility', 'hidden');
    						$("#tab_suche_aktie").val('');
    						sucheAktie();
    					break;
    					case 1: // Verkauf
    						search_url = 'suggest_list.php';
    						$("#tab_verkauf").append(a_aktie);
    						$("#tab_verkauf").append(a_eingabe);
    						$("#tab_eingabe").empty();
    						$("#tab_eingabe").append(a_index);
    						$("#tab_eingabe").append(a_isin);
    						$("#tab_eingabe").append(a_datum);
    						$("#tab_eingabe").append(a_wert);
    						$("#tab_eingabe").append(a_anzahl);
    						$("#tab_eingabe").append(a_kosten);
    						$("#l_wert").text("Kurs");
    						$("#l_kosten").text("Gebühren");
    						$("#tab_eingabe").css('visibility', 'hidden');
    						$("#tab_suche_aktie").val('');
    						sucheAktie();
    					break;
    					case 2: // Split
    						search_url = 'suggest_search.php';
    						$("#tab_split").append(a_aktie);
    						$("#tab_split").append(a_eingabe);
    						$("#tab_eingabe").empty();
    						$("#tab_eingabe").append(a_index);
    						$("#tab_eingabe").append(a_isin);
    						$("#tab_eingabe").append(a_datum);
    						$("#tab_eingabe").append(a_anzahl);
    						$("#tab_eingabe").css('visibility', 'hidden');
    						$("#tab_suche_aktie").val('');
    						sucheAktie();
    					break;
    					case 3: // Dividende
    						search_url = 'suggest_search.php';
    						$("#tab_dividende").append(a_aktie);
    						$("#tab_dividende").append(a_eingabe);
    						$("#tab_eingabe").empty();
    						$("#tab_eingabe").append(a_index);
    						$("#tab_eingabe").append(a_isin);
    						$("#tab_eingabe").append(a_datum);
    						$("#tab_eingabe").append(a_wert);
    						$("#tab_eingabe").append(a_anzahl);
    						$("#tab_eingabe").append(a_kosten);
    						$("#l_wert").text("Dividende");
    						$("#l_kosten").text("Steuern");
    						$("#tab_eingabe").css('visibility', 'hidden');
    						$("#tab_suche_aktie").val('');
    						sucheAktie();
    					break;
    					case 4: // Bar
    						$("#tab_bar").append(a_eingabe);
    						$("#tab_eingabe").empty();
    						$("#tab_eingabe").append(a_datum);
    						$("#tab_eingabe").append(a_kosten);
    						$("#tab_eingabe").css('visibility', 'visible');
    						$("#l_kosten").text("Bar");
    					break;
                    };
    				$("#tab_datum").jqxDateTimeInput({width: '150px', height: '20px', formatString: "dd.MM.yyyy", culture: 'de-DE', theme: 'black'});
    		}
    
    		var tabWindow = (function () {
                //Adding event listeners
                function _addEventListeners() {
                    $('#newEntry').click(function () {
                        $('#dialog-window').jqxWindow('open');
                    });
                    $('#dialog_cancel').click(function () {
                        $('#dialog-window').jqxWindow('close');
                    });
                    $('#dialog_enter').click(function () {
    					//if (isValid) {
    							$("#dialog").validate();
    							//alert ('Wert eingetragen');
    						//$("#dialog").submit();
    						addEntry();
    						$('#dialog-window').jqxWindow('close');
    					//}
    				});
    			};
    
                //Creating all page elements which are jqxWidgets
                function _createElements() {
                    $('#newEntry').jqxButton({ width: '140px', theme: 'black' });
    				$("#dialog_radio").jqxButtonGroup({ mode: 'radio', theme: 'black' });
                    $('#dialog_cancel').jqxButton({ width: '140px', theme: 'black' });
                    $('#dialog_enter').jqxButton({ width: '140px', theme: 'black' });
    
                };
    
                //Creating the window
                function _createWindow() {
                    $('#dialog-window').jqxWindow({
                        showCollapseButton: false, theme: 'black', 
                        height: 470, width: 380,
                        resizable: false,
                        initContent: function () {
                            $('#tab').jqxTabs({ height: '90%', width:  '100%', theme: 'black', initTabContent: initTabs});
                            $('#dialog_radio').jqxButtonGroup('setSelection', 0);
    						$("#tab_eingabe").css('visibility', 'hidden');
                            $('#dialog-window').jqxWindow('focus');
    					},
                        autoOpen: false,
    				});
    				$("#tab_suche_aktie").on('select', function (event) {
    					if (event.args) {
    						var item = event.args.item;
    						if (item) {
    							var s_index, s_isin, s_anzahl;
    							for (var i = 0; i < dataAdapter.records.length; i++) {
    								if (item.label == dataAdapter.records[i].aktie) {
    									s_index = dataAdapter.records[i].index;
    									s_isin = dataAdapter.records[i].isin;
    									s_anzahl = dataAdapter.records[i].anzahl;
    								break;
    								}
    							}
    							$("#tab_eingabe").css('visibility', 'visible');
    							document.getElementById('tab_index').value = s_index;
    							document.getElementById('tab_isin').value = s_isin;
    							document.getElementById('tab_anzahl').value = s_anzahl;
    							searchSelected = true;
    						}
    					}
    				});
    
    			};
    
                return {
                    config: {
                        dragArea: null
                    },
                    init: function () {
                        //Creating all jqxWindgets except the window
                        _createElements();
                        //Attaching event listeners
                        _addEventListeners();
                        //Adding jqxWindow
                        _createWindow();
                    }
                };
            } ());
    
    		function addEntry() {
    			var depotName 			= $('#dialog_radio').jqxButtonGroup('getSelection');
    			var selectedTabIndex 	= $("#tab").jqxTabs('val');
    			var selectedTabName 	= $('#tab').jqxTabs('getTitleAt', selectedTabIndex); 
    			$.ajax({
    				url: "addEntry.php",
    				type: "POST",
    				async: true,
    				data: { 
    					Typ:		selectedTabName,
    					DepotName:	depotName,
    					Index:		$('#tab_index').val(),
    					ISIN:		$('#tab_isin').val(),
    					Datum:		$('#tab_datum').val(),
    					Wert:		$('#tab_wert').val(),
    					Anzahl:		$('#tab_anzahl').val(),
    					Kosten:		$('#tab_kosten').val(),
    				},
    				dataType: "html"
    			})
    		};
    
            $(document).ready(function () {
    			
                //Initializing the window
                tabWindow.init();
    
    			// Create a jqxMenu
    			$("#jqxMenu").jqxMenu({ width: '120', mode: 'vertical', theme: 'black'});
    			$("#jqxMenu").css('visibility', 'visible');
    
                $("#table").jqxDataTable(
                {
                    altRows: true,
                    sortable: true,
                    editable: true,
                    selectionMode: 'singleRow',
                    theme: 'black',
                    columns: [
                      { text: 'Index', dataField: 'Index', width: 100 },
                      { text: 'Name', dataField: 'Name', width: 120 },
                      { text: 'ISIN', dataField: 'ISIN', width: 100 },
                      { text: 'Stückzahl', dataField: 'Stückzahl', width: 80, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
                      { text: 'Datum', dataField: 'Datum', width: 80, align: 'right', cellsAlign: 'right', cellsFormat: 'n' },
                      { text: 'Kurs', dataField: 'Kurs', width: 80 },
                      { text: 'Kosten', dataField: 'Kosten', width: 80 },
                      { text: 'Wert', dataField: 'Wert', width: 80 },
                      { text: 'Performance', dataField: 'Performance', width: 50 }
                    ]
                });
    
            });
        </script>
    </head>
    <body class='default' style='background: #222222'>
    
    	<div id='jqxMenu' style="visibility: hidden; float: left;">
    		<?php
    			include("navigation.html");
    		?>
    	</div>
    	<form id="dialog" action="addEntry.php" method="post">
                <div id="dialog-window">
                    <div id="windowHeader">
                        <span>Transaktion</span>
                    </div>
                    <div style="overflow: hidden;" id="windowContent">
                        <div id="tab">
                            <ul style="margin-left: 30px;">
                                <li>Kauf</li>
                                <li>Verkauf</li>
                                <li>Split</li>
                                <li>Dividende</li>
                                <li>Bar</li>
                            </ul>
                            <div id="tab_kauf">
    						</div>
    						<div id="tab_verkauf">
                            </div>
                            <div id="tab_split">
                             </div>
                            <div id="tab_dividende">
                            </div>
                            <div id="tab_bar">
                            </div>
                        </div>
    					<div id='dialog_radio'>
    						<button id="radio_left" style='width: 50px'>TSI</button>
    						<button id="radio_right" style='width: 50px'>R&J</button>
    					</div>
    					<div id='dialog_input'>
    						<button id="dialog_cancel">Abbrechen</button>
    						<button id="dialog_enter">Wert eintragen</button>
    					</div>
                    </div>
                </div>
    	</form>
    
    	<?php
    		error_reporting (E_ALL | E_STRICT);
    		ini_set ('display_errors' , 1);
    
    		$db_link = mysqli_connect("localhost","root", "")
    		or die ("... keine Verbindung möglich. Benutzername oder Passwort sind falsch");
    
    		mysqli_select_db($db_link, "TSI")
    		or die ("Die Datenbank existiert nicht.");
    	?>
    
    	<div style='margin-left: 140px'>
        <table id="table" border="1">
            <thead>
                <tr>
                    <th align="left">Index</th>
                    <th align="left">Name</th>
                    <th align="left">ISIN</th>
                    <th align="right">Stückzahl</th>
                    <th align="right">Datum</th>
                    <th align="left">Kurs</th>
                    <th align="left">Kosten</th>
                    <th align="left">Wert</th>
                    <th align="right">Performance</th>
                </tr>
            </thead>
            <tbody>
        <?php
        	//Abfrage und Füllen der Tabelle mit aktuellen Werten
    		$abfrage = "SELECT ak.AktienIndex, ak.Name, de.ISIN, de.Anzahl, de.KaufDatum, de.KaufKurs, de.KaufWert FROM Depot1 de JOIN Aktien ak ON ak.ISIN = de.ISIN";
    		$ergebnis = mysqli_query($db_link, $abfrage);
    		while($row = mysqli_fetch_object($ergebnis)) {
    			echo "
    				<tr>
    				<td style=text-align:left>" . $row->AktienIndex . "</td>
    				<td style=text-align:left>" . $row->Name . "</td>
    				<td style=text-align:left>" . $row->ISIN . "</td>
    				<td style=text-align:right>" . str_replace('.', ',', $row->Anzahl) . "</td>
    				<td style=text-align:center>" . preg_replace('#^(\d{4})\-(\d{2})\-(\d{2})$#', '\3.\2.\1', $row->KaufDatum) . "</td>
    				<td style=text-align:right>" . str_replace('.', ',', $row->KaufKurs) . ' €' . "</td>
    				<td style=text-align:right>" . str_replace('.', ',', $row->KaufWert) . ' €' . "</td>
    				<td style=text-align:right>" . "Test" . ' €' . "</td>
    				<td style=text-align:right>" . "Test" . ' %' . "</td>
    				</tr>";
    		}
    	?>
            </tbody>
        </table>
        <div>
    		<input id='newEntry' type="button" value="Neuer Depoteintrag"/>
    	</div>
    	</div>
    </body>
    </html>
    

    Jens


    Dimitar
    Participant

    Hi Jens,

    1) Make sure you bind to the event after the element with id tab_suche_aktie has been added to the DOM (via append).

    2) tab_datum should be initialized only once, in the relevant part (case) of initTabs.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.