jQuery UI Widgets › Forums › Dialogs and Notifications › Window › ID problem in input field, DateTime problem
Tagged: initContent, initTabContent, jqxTabs, jqxwindow, tab, Tabs, window
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 9 years, 12 months ago.
-
Author
-
Dear all,
I created a page out of this demo:
demos/jqxwindow/defaultfunctionality.htmI 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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.