jQWidgets Forums
Forum Replies Created
-
Author
-
November 17, 2014 at 5:56 pm in reply to: ID problem in input field, DateTime problem ID problem in input field, DateTime problem #62891
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 Dimitar,
thats not what I mean.
Please consider the following situation:
The JSON source data starts from 2004-01-01 and goes till 2014-01-01.
The xAxis is set from minValue 2013-01-01 to maxValue 2014-01-01.
The range selector minValue is 2006-01-01. The maxValue is not given.In this case, the xAxis shows wrong values (JSON data are more than the range data).
Can you confirm this?
Other question related to this. can I define the following at the xAxis?
minValue: function (xMinToday) { xMinToday = new Date(); return xMinToday.setFullYear(xMinToday.getFullYear() - 1)}, maxValue: new Date(),I just want to define the settings as today (minValue) and 1 years less from today (maxValue).
Jens
Hi Dimitar,
now I got it. It took some efforts.
The final reason of the rendering problem is a strange behavior of the “rangeSelector: minValue:”.
If this value is larger than the data of the source (i.e. minValue: new Date(2010, 0, 1) vs. 2004-01-01), than the time scale shows wrong data.
This leads as well in the bi-color chart to data drops while rendering.Please confirm, if you can verify this.
Jens
Maybe I found the cause: I use the date format from the database “YYYY-MM-DD” Any idea, how to change it to the probable used “MM/DD/YYYY”?
Can I use some of the globalize functions?Jens
Sorry, now it works. Meanwhile I reduced the code from unnecessary code (tabs / grid). Result stays the same.
If I take out the “colorFunction”, than all data are shown.Jens
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Anzeige der TSI-Werte.
</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=”jqwidgets/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/scripts/demos.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcore.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=”jqwidgets/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.rangeselector.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/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript”>$(document).ready(function () {
// Create a jqxMenu
$(“#jqxMenu”).jqxMenu({ width: ‘120’, mode: ‘vertical’, theme: ‘black’});
$(“#jqxMenu”).css(‘visibility’, ‘visible’);var initChart = function () {
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘datum’ },
{ name: ‘tsi_wert’ }
],
url: ‘tsi_werte.php’
};var dataAdapter = new $.jqx.dataAdapter(
source, { async: false, autoBind: true, loadError: function (xhr, status, error) {
alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); }
});var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘Mai’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Okt’, ‘Nov’, ‘Dez’];
var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return ‘<div style=”text-align:left”><b>Datum: ‘ + categoryValue.getDate() + ‘.’ + months[categoryValue.getMonth()] + ‘.’ + categoryValue.getFullYear() + ‘</b><br/>TSI-Wert: ‘ + dataItem.tsi_wert + ‘</div>’;
};// prepare jqxChart settings
var settings = {
title: “Übersicht TSI-Werte”,
borderLineWidth: 1,
showBorderLine: true,
enableAnimations: true,
enableCrosshairs: true,
showLegend: false,
animationDuration: 1500,
padding: { left: 5, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
dataField: ‘datum’,
type: ‘date’,
baseUnit: ‘day’,
minValue: new Date(2013, 0, 1),
maxValue: new Date(2013, 11, 31),
textRotationAngle: -45,
formatFunction: function (value) {
return value.getDate() + ‘.’ + months[value.getMonth()] + ‘.’ + value.getFullYear().toString().substring(2);
},
showGridLines: true,
rangeSelector: {
size: 120,
padding: { /*left: 0, right: 0,*/top: 30, bottom: 0 },
minValue: new Date(2010, 0, 1),
backgroundColor: ‘white’,
dataField: ‘tsi_wert’,
baseUnit: ‘month’,
showGridLines: false,
formatFunction: function (value) {
return months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2);
}
},
},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘spline’,
toolTipFormatFunction: toolTipCustomFormatFn,
valueAxis:
{
unitInterval: 0.05,
minValue: 0.8,
maxValue: 1.2,
displayValueAxis: true,
description: ‘TSI-Wert’
},
series: [{
dataField: ‘tsi_wert’,
displayText: ‘TSI-Wert’,
//lineWidth: 1,
//lineWidthSelected: 1,
emptyPointsDisplay: ‘connect’,
colorFunction: function (value, itemIndex, serie, group) {
return (value < 1) ? ‘#FF0000’ : ‘#00FF00’;
}
}]
}
]
};
// setup the chart
$(‘#jqxChart’).jqxChart(settings);
}
initChart();});
</script>
</head>
<body class=’default’ style=’background: #222222′>
<div id=’jqxMenu’ style=”visibility: hidden; float: left;”>
<?php
include(“navigation.html”);
?>
</div>
<div >
<div >
<div id=’jqxChart’ style=”width: 800px; height: 600px; margin-left: 10px;float: left;”>
</div>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html> <html lang=”en”> <head> <title id=’Description’>Anzeige der TSI-Werte. </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=”jqwidgets/scripts/jquery-1.11.1.min.js”></script> <script type=”text/javascript” src=”jqwidgets/scripts/demos.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcore.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=”jqwidgets/jqwidgets/jqxmenu.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.edit.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxgrid.selection.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxbuttons.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxscrollbar.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxlistbox.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdropdownlist.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdata.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxdraw.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.core.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxchart.rangeselector.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/jqxdatetimeinput.js”></script> <script type=”text/javascript” src=”jqwidgets/jqwidgets/jqxcalendar.js”></script> <script type=”text/javascript”> $(document).ready(function () { // Create a jqxMenu $(“#jqxMenu”).jqxMenu({ width: ’120′, mode: ‘vertical’, theme: ‘black’}); $(“#jqxMenu”).css(‘visibility’, ‘visible’); var initGrid = function () { var source = { datatype: “json”, updaterow: function (rowid, rowdata, commit) { // synchronize with the server – send update command // call commit with parameter true if the synchronization with the server is successful // and with parameter false if the synchronization failder. commit(true); }, datafields: [ { name: 'datum', type: 'date' }, { name: 'tsi_wert', type: 'number' } ], url: ‘tsi_werte.php’ }; var dataAdapter = new $.jqx.dataAdapter(source); $(“#jqxGrid”).jqxGrid( { width: ’100%’, height: ’100%’, theme: ‘black’, source: dataAdapter, showstatusbar: true, renderstatusbar: function (statusbar) { // appends buttons to the status bar. var container = $(“<div style=’overflow: hidden; position: relative; margin: 3px;’></div>”); var addButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Add</span></div>”); var deleteButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Delete</span></div>”); var reloadButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Reload</span></div>”); var searchButton = $(“<div style=’float: left; margin-left: 5px;’><span style=’margin-left: 4px; position: relative; top: -3px;’>Find</span></div>”); container.append(addButton); container.append(deleteButton); container.append(reloadButton); container.append(searchButton); statusbar.append(container); addButton.jqxButton({ width: 60, height: 20, theme: ‘black’ }); deleteButton.jqxButton({ width: 65, height: 20, theme: ‘black’ }); reloadButton.jqxButton({ width: 65, height: 20, theme: ‘black’ }); searchButton.jqxButton({ width: 50, height: 20, theme: ‘black’ }); // add new row. addButton.click(function (event) { var datarow = ”; $(“#jqxGrid”).jqxGrid(‘addrow’, null, datarow[0]); }); // delete selected row. deleteButton.click(function (event) { var selectedrowindex = $(“#jqxGrid”).jqxGrid(‘getselectedrowindex’); var rowscount = $(“#jqxGrid”).jqxGrid(‘getdatainformation’).rowscount; var id = $(“#jqxGrid”).jqxGrid(‘getrowid’, selectedrowindex); $(“#jqxGrid”).jqxGrid(‘deleterow’, id); }); // reload grid data. reloadButton.click(function (event) { $(“#jqxGrid”).jqxGrid({ source: getAdapter() }); }); // search for a record. searchButton.click(function (event) { var offset = $(“#jqxgrid”).offset(); $(“#jqxwindow”).jqxWindow(‘open’); $(“#jqxwindow”).jqxWindow(‘move’, offset.left + 30, offset.top + 30); }); }, editable: true, //localization: getLocalization(‘de’), selectionmode: ‘multiplecellsadvanced’, columns: [ { text: 'Datum', datafield: 'datum', columntype: 'datetimeinput', cellsformat: 'd', width: 150, }, { text: 'TSI-Wert', datafield: 'tsi_wert', width: 100, createeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ decimalDigits: 2, digits: 4 }); } } ] }); } var initChart = function () { // prepare the data var source = { datatype: “json”, datafields: [ { name: 'datum' }, { name: 'tsi_wert' } ], url: ‘tsi_werte.php’ }; var dataAdapter = new $.jqx.dataAdapter( source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } }); var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']; var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) { var dataItem = dataAdapter.records[itemIndex]; return ‘<div style=”text-align:left”><b>Datum: ‘ + categoryValue.getDate() + ‘.’ + months[categoryValue.getMonth()] + ‘.’ + categoryValue.getFullYear() + ‘</b><br/>TSI-Wert: ‘ + dataItem.tsi_wert + ‘</div>’; }; // prepare jqxChart settings var settings = { title: “Übersicht TSI-Werte”, borderLineWidth: 1, showBorderLine: true, enableAnimations: true, enableCrosshairs: true, showLegend: false, animationDuration: 1500, padding: { left: 5, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: ‘datum’, type: ‘date’, baseUnit: ‘day’, minValue: new Date(2013, 0, 1), maxValue: new Date(2013, 11, 31), textRotationAngle: -45, formatFunction: function (value) { return value.getDate() + ‘.’ + months[value.getMonth()] + ‘.’ + value.getFullYear().toString().substring(2); }, showGridLines: true, rangeSelector: { size: 120, padding: { /*left: 0, right: 0,*/top: 30, bottom: 0 }, minValue: new Date(2004, 0, 1), backgroundColor: ‘white’, dataField: ‘tsi_wert’, baseUnit: ‘month’, showGridLines: false, formatFunction: function (value) { return months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2); } }, }, colorScheme: ‘scheme01′, seriesGroups: [ { type: 'spline', toolTipFormatFunction: toolTipCustomFormatFn, valueAxis: { unitInterval: 0.05, minValue: 0.8, maxValue: 1.2, displayValueAxis: true, description: 'TSI-Wert' }, series: [{ dataField: 'tsi_wert', displayText: 'TSI-Wert', //lineWidth: 1, //lineWidthSelected: 1, emptyPointsDisplay: 'connect', colorFunction: function (value, itemIndex, serie, group) { return (value < 1) ? '#FF0000' : '#00FF00'; } }] } ] }; // setup the chart $(‘#jqxChart’).jqxChart(settings); } // init widgets. var initWidgets = function (tab) { switch (tab) { case 0: initGrid(); break; case 1: initChart(); break; } } $(‘#jqxTabs’).jqxTabs({ width: 800, height: 560, theme: ‘black’, initTabContent: initWidgets }); }); </script> </head> <body class=’default’ style=’background: #222222′> <div id=’jqxMenu’ style=”visibility: hidden; float: left;”> <?php include(“navigation.html”); ?> </div> <div id=’jqxWidget’> <div id=’jqxTabs’> <li style=”margin-left: 30px;”> <div style=”height: 20px; margin-top: 5px;”> <div style=”float: left;”> </div> <div style=”margin-left: 4px; vertical-align: middle; text-align: center; float: left;”> Tabelle</div> </div> <div style=”height: 20px; margin-top: 5px;”> <div style=”float: left;”> </div> <div style=”margin-left: 4px; vertical-align: middle; text-align: center; float: left;”> Grafik</div> </div> <div style=”overflow: hidden;”> <div id=”jqxGrid”> </div> </div> <div style=”overflow: hidden;”> <div id=’jqxChart’ style=”width: 100%; height: 100%”> </div> </div> </div> </div> </body> </html>October 12, 2014 at 4:32 pm in reply to: Input with multiple values Input with multiple values #61011Thanks Dimitar,
problem is, that I’m a little bit lost (and now tired) from lots of trials.
Hope you can help me more in detail:I’ve the following code (picked up from an example):
I want to use autocomplete – works fine together with some php and json.
I get a simple json data set back from php. I want to pickup the label “aktie” and want to use furthermore some other data related to “aktie”, like isin or index.
Using dataAdapter.records sound ok, I’ve seen, that it is used in autocomplete section.I just can’t figure out, how I exactly have to place it and return it.
Please need your help again.Thanks Jens
$(“#tag”).jqxInput({
placeHolder: “Aktie”,
displayMember: “aktie”,
valueMember: “isin”,
theme: ‘black’,
width: 200,
height: 25,
source: function (query, response) {
var dataAdapter = new $.jqx.dataAdapter({
datatype: “json”,
datafields: [
{ name: ‘aktie’, type: ‘string’},
{ name: ‘index’, type: ‘string’},
{ name: ‘isin’, type: ‘string’}
],
url: ‘suggest_search.php’
},
{
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;
}));
}
}
}
);
}
}); -
AuthorPosts