Data sometimes loads and sometimes doesn't - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 5 replies, has 2 voices, and was last updated by mrallaris 10 years, 9 months ago.

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

Author

Data sometimes loads and sometimes doesn't Posts

August 25, 2014 at 10:00 pm Data sometimes loads and sometimes doesn't #58752

Participant

Hello – This is my first day using jQWidgets. I am trying to create a simple data table using an array as the data source. The datatable exists inside a tab widget. When I refresh the browser sometimes the data appears and sometimes it doesn’t. It’s almost as if the data doesn’t load but there is no server-side action so that seems unlikely. The datatable appears but the rows do not appear. If I hit refresh a couple of times the data appears maybe once in every 5 tries. There doesn’t seem to be any difference between the times it works and the times it doesn’t work. I just hit F5 and cross my fingers.

Any help would be greatly appreciated – I’d really like to implement your widgets.

Thanks,

Here’s my code …

<!DOCTYPE html>

<html lang="en">

<head>

    <link rel="stylesheet" href="../scripts/JQwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../scripts/JQwidgets/jqwidgets/styles/jqx.ui-smoothness.css" type="text/css" />
    <script type="text/javascript" src="../scripts/JQWidgets/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../scripts/JQWidgets/jqwidgets/jqxdropdownlist.js"></script>

	<script type="text/javascript">

            $(document).ready(function () {

		$(".input_text").jqxInput({height: 25, width: 200, theme: 'ui-smoothness'});

		$('#jqxtabs').jqxTabs({ width: 1120, height: 750, theme: 'ui-smoothness' });

		$("#jqxpanel").jqxPanel({ width: 1100, height: 500 });

		var headerTable = new Array();

		var headerSource = {
			localData: [
				{laborType: "Quoted Hours", rate: "$125.00", estHours: "", estCost: "", actHours: "", actCost: ""}, 
				{laborType: "Regular Hours", rate: "$20.00", estHours: "", estCost: "", actHours: "", actCost: ""},
				{laborType: "Overtime x 1.5", rate: "$40.00", estHours: "", estCost: "", actHours: "", actCost: ""},
				{laborType: "Overtime x 2", rate: "$80.00", estHours: "", estCost: "", actHours: "", actCost: ""}
			],
			dataType:  "array",
			dataFields: [
				{ name: "laborType", type: 'string' },
				{ name: "rate", type: 'float' },
				{ name: "estHours", type: 'float' },
				{ name: "estCost", type: 'float' },
				{ name: "actHours", type: 'float' },
				{ name: "actCost", type: 'float' }
			]
		};

		var headerDataAdapter = new $.jqx.dataAdapter(headerSource);

		$("#headertable").jqxDataTable({
			pageable: false,
			editable: true,
			showAggregates: true,
			editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: true },
			source: headerDataAdapter,
			columns: [
				{ text: 'Labour Type', dataField: 'laborType', width: 200, editable: false },
				{ text: 'Labour Rate', dataField: 'rate', width: 140, cellsFormat: "c2", align: 'right', cellsAlign: 'right' },
				{ text: 'Estimated Hours', dataField: 'estHours', width: 140, cellsFormat: "d2", align:'right', cellsAlign: 'right' },
				{ text: 'Estimated Cost', dataField: 'estCost', width: 140, cellsFormat: "c2", align:'right', cellsAlign: 'right' },
				{ text: 'Actual Hours', dataField: 'actHours', width: 140, cellsFormat: "d2", align:'right', cellsAlign: 'right' },
				{ text: 'Actual Cost', dataField: 'actCost', width: 140, cellsFormat: "c2", align:'right', cellsAlign: 'right' }
			]
		});

            });

        </script>

	<style>

		.field_row {
			float: left;
			width: 1100px;
			padding: 5px;
		}

		.field_holder {
			float: left;
			padding: 5px;
		}

	</style>

</head>

<body class='default'>

    <div id='content'>

	<div id='jqxtabs'>

		<ul style='margin-left: 20px;'>

			<li>Part Profile</li>

			<li>Estimates vs Actuals</li>

			<li>Tab 3</li>

			<li>Tab 4</li>

			<li>Tab 5</li>

		</ul>

		<div>

			<div class='field_row'>

				<div class='field_holder'>
				        <div class='input_label'>Part Number</div>
					<input class='input_text' type="text" id="part_number_text"/>
				</div>

				<div class='field_holder'>
				        <div class='input_label'>Customer</div>
					<input class='input_text' type="text" id="customer_text"/>
				</div>
		
				<div class='field_holder'>
				        <div class='input_label'>Category</div>
					<input class='input_text' type="text" id="category_text"/>
				</div>
		
				<div class='field_holder'>
				        <div class='input_label'>Status</div>
					<input class='input_text' type="text" id="category_text"/>
				</div>
		
				<div class='field_holder'>
				        <div class='input_label'>Revision Number</div>
					<input class='input_text' type="text" id="category_text"/>
				</div>
		
			</div>

			<div id='jqxpanel' style='margin-left: 5px'>

				<img src='../parts/drawings/1006249.jpg' width=1100px>

			</div>

		</div>

		<div style='padding-left:15px; padding-top: 15px'>

			<div id='headertable'>
			</div>

		</div>

		<div>

			Content 3

		</div>

		<div>

			Content 4

		</div>

		<div>

			Content 5

		</div>

	</div>

	</div>

    </div>

</body>

</html>

August 26, 2014 at 6:20 am Data sometimes loads and sometimes doesn't #58760

Peter Stoev

Keymaster

Hi mrallaris,

Unfortunately, we are unable to reproduce the described behavior. Data is always loaded. My suggestion is to set up your browser to clear its history on exit while debugging web apps.

Below is my test sample based on your code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of jqxDataTable. jqxDataTable is built to easily replace your HTML Tables. It can read and display the data from your HTML Table, but it can also display data from different data sources like XML, JSON, Array, CSV or TSV.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../sampledata/generatedata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
            var headerTable = new Array();

            var headerSource = {
                localData: [
                    { laborType: "Quoted Hours", rate: "$125.00", estHours: "", estCost: "", actHours: "", actCost: "" },
                    { laborType: "Regular Hours", rate: "$20.00", estHours: "", estCost: "", actHours: "", actCost: "" },
                    { laborType: "Overtime x 1.5", rate: "$40.00", estHours: "", estCost: "", actHours: "", actCost: "" },
                    { laborType: "Overtime x 2", rate: "$80.00", estHours: "", estCost: "", actHours: "", actCost: "" }
                ],
                dataType: "array",
                dataFields: [
                    { name: "laborType", type: 'string' },
                    { name: "rate", type: 'float' },
                    { name: "estHours", type: 'float' },
                    { name: "estCost", type: 'float' },
                    { name: "actHours", type: 'float' },
                    { name: "actCost", type: 'float' }
                ]
            };

            var headerDataAdapter = new $.jqx.dataAdapter(headerSource);

            $("#headertable").jqxDataTable({
                pageable: false,
                editable: true,
                showAggregates: true,
                editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: true },
                source: headerDataAdapter,
                columns: [
                    { text: 'Labour Type', dataField: 'laborType', width: 200, editable: false },
                    { text: 'Labour Rate', dataField: 'rate', width: 140, cellsFormat: "c2", align: 'right', cellsAlign: 'right' },
                    { text: 'Estimated Hours', dataField: 'estHours', width: 140, cellsFormat: "d2", align: 'right', cellsAlign: 'right' },
                    { text: 'Estimated Cost', dataField: 'estCost', width: 140, cellsFormat: "c2", align: 'right', cellsAlign: 'right' },
                    { text: 'Actual Hours', dataField: 'actHours', width: 140, cellsFormat: "d2", align: 'right', cellsAlign: 'right' },
                    { text: 'Actual Cost', dataField: 'actCost', width: 140, cellsFormat: "c2", align: 'right', cellsAlign: 'right' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="headertable"></div>
</body>
</html>

I’ve tested this with IE, Chrome and FF.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 26, 2014 at 2:01 pm Data sometimes loads and sometimes doesn't #58801

mrallaris

Participant

Thank you for your reply Peter! I tried using your test code and it works for me too. It seems that once I place the datatable inside the tab widget, that is when I get the problem. Is there any chance you could test it using my original code with the tabs? I have also taken a screen capture to show you what I am experiencing. I’m just hitting refresh and then going to the tab over and over again. You can see how sometimes the data appears and sometimes it doesn’t.

http://screencast.com/t/OqJzAcJkhqf

Thanks!

Matt

August 26, 2014 at 2:03 pm Data sometimes loads and sometimes doesn't #58802

mrallaris

Participant

UPDATE: I have discovered that if I move the datatable to the first tab the problem disappears! For some reason when it is on the second tab and I have to switch to it, that is when I run into this problem.

Thanks,

Matt

August 26, 2014 at 3:50 pm Data sometimes loads and sometimes doesn't #58809

Peter Stoev

Keymaster

Hi Matt,

If you place a widget inside a tab, may be its a good idea to look at the Tabs demos and especially how to put widgets inside it. I guess you missed to use the initTabContent, right?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 26, 2014 at 4:06 pm Data sometimes loads and sometimes doesn't #58811

mrallaris

Participant

That was it exactly!! Thank you very much for solving this problem and I apologize for not noticing that in the docs.

Author

Posts

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

You must be logged in to reply to this topic.