jQWidgets Forums

This topic contains 6 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 4 months ago.

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

Author

Grid does not show data of file from localhost Posts

March 5, 2013 at 4:29 am Grid does not show data of file from localhost #16334

Participant

HI,
I was trying to load data from a txt file (by specifying the url) which is in the localhost to the grid as shown below,

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.metro.css" type="text/css" />	
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
   
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'metro';//getDemoTheme();
            var url = "http://192.168.2.26/generatedData/table_data.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'Ip', type: 'string' },
                    { name: 'Count', type: 'string' },  
					{ name: 'Isp', type: 'string' },
                    { name: 'TimeStamp', type: 'string' } 					
                ],
                url: url
            };
			var addfilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = '124.43.211.68';
                var filtercondition = 'equal';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtervalue = '1';
                filtercondition = 'starts_with';
                var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
 
                filtergroup.addfilter(filter_or_operator, filter1);
                filtergroup.addfilter(filter_or_operator, filter2);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'Ip', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 1000,
                source: dataAdapter,
                theme: theme,
                filterable: true,
                sortable: true,
                columns: [
					{ text: 'Time Stamp', datafield: 'TimeStamp', width: 250 },
					{ text: 'Ip', datafield: 'Ip', width: 250 },
					{ text: 'Isp', datafield: 'Isp', width: 250 },
					{ text: 'Count', datafield: 'Count', width: 250 }
				]
            });
			$('#events').jqxPanel({ width: 300, height: 80, theme: theme });
            $("#jqxgrid").on("filter", function (event) {
                $("#events").jqxPanel('clearcontent');
                var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
                var eventData = "Triggered 'filter' event";
                for (i = 0; i < filterinfo.length; i++) {
                    var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
                    $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                }
            });
            $('#clearfilteringbutton').jqxButton({ height: 25, theme: theme });
            $('#filterbackground').jqxCheckBox({ checked: true, height: 25, theme: theme });
            $('#filtericons').jqxCheckBox({ checked: false, height: 25, theme: theme });
            // clear the filtering.
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
            // show/hide filter background
            $('#filterbackground').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
            });
            // show/hide filter icons
            $('#filtericons').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div id="eventslog" style="margin-top: 30px;">
            <div style="width: 200px; float: left; margin-right: 10px;">
            <input value="Remove Filter" id="clearfilteringbutton" type="button" />
            <div style="margin-top: 10px;" id='filterbackground'>Filter Background</div>
            <div style="margin-top: 10px;" id='filtericons'>Show All Filter Icons</div>
            </div>
            <div style="float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

But it says “No data to display”,

However, when i copy the same file to the folder where i run the html file just give the name of the file as shown below,

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.metro.css" type="text/css" />	
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
   
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'metro';//getDemoTheme();
            var url = "table_data.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'Ip', type: 'string' },
                    { name: 'Count', type: 'string' },  
					{ name: 'Isp', type: 'string' },
                    { name: 'TimeStamp', type: 'string' } 					
                ],
                url: url
            };
			var addfilter = function () {
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = '124.43.211.68';
                var filtercondition = 'equal';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtervalue = '1';
                filtercondition = 'starts_with';
                var filter2 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
 
                filtergroup.addfilter(filter_or_operator, filter1);
                filtergroup.addfilter(filter_or_operator, filter2);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'Ip', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 1000,
                source: dataAdapter,
                theme: theme,
                filterable: true,
                sortable: true,
                columns: [
					{ text: 'Time Stamp', datafield: 'TimeStamp', width: 250 },
					{ text: 'Ip', datafield: 'Ip', width: 250 },
					{ text: 'Isp', datafield: 'Isp', width: 250 },
					{ text: 'Count', datafield: 'Count', width: 250 }
				]
            });
			$('#events').jqxPanel({ width: 300, height: 80, theme: theme });
            $("#jqxgrid").on("filter", function (event) {
                $("#events").jqxPanel('clearcontent');
                var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
                var eventData = "Triggered 'filter' event";
                for (i = 0; i < filterinfo.length; i++) {
                    var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
                    $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                }
            });
            $('#clearfilteringbutton').jqxButton({ height: 25, theme: theme });
            $('#filterbackground').jqxCheckBox({ checked: true, height: 25, theme: theme });
            $('#filtericons').jqxCheckBox({ checked: false, height: 25, theme: theme });
            // clear the filtering.
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
            // show/hide filter background
            $('#filterbackground').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
            });
            // show/hide filter icons
            $('#filtericons').on('change', function (event) {
                $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div id="eventslog" style="margin-top: 30px;">
            <div style="width: 200px; float: left; margin-right: 10px;">
            <input value="Remove Filter" id="clearfilteringbutton" type="button" />
            <div style="margin-top: 10px;" id='filterbackground'>Filter Background</div>
            <div style="margin-top: 10px;" id='filtericons'>Show All Filter Icons</div>
            </div>
            <div style="float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

it populates the grid. I dont know what i am doing wrong here. any help is much appreciated thank you

March 5, 2013 at 5:55 am Grid does not show data of file from localhost #16335

Peter Stoev

Keymaster

Hi hh_shan,

I suppose that the path to your data file is not correct or you don’t run the web page with the Grid in the localhost.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 5, 2013 at 9:21 am Grid does not show data of file from localhost #16346

hh_shan

Participant

i thank you for the reply…the localhost is running..so theoretically the code ive used should work?. also I am just testing the code so that i could implement this to my dashboard application. so is it a must to run the html file from the localhost? cant we run the html file from the desktop or something and retrieve the files by just giving the url?? thank youvery much

March 5, 2013 at 9:28 am Grid does not show data of file from localhost #16347

hh_shan

Participant

hi,*

March 5, 2013 at 10:04 am Grid does not show data of file from localhost #16348

Peter Stoev

Keymaster

Hi hh_shan,

The Ajax runs only on a web server so yes, you should run your code on a web server, if you want to populate the Grid with data coming from an external file.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 5, 2013 at 10:36 am Grid does not show data of file from localhost #16349

hh_shan

Participant

oh okeyyy..i tried your idea put the file to the localhost and run via that but still no luck..:( thank you for your help my code would is ok right??

March 5, 2013 at 11:03 am Grid does not show data of file from localhost #16350

Peter Stoev

Keymaster

Hi hh_shan,

You may examine the demos available in the download package. For example, the “sorting” demo loads an external file.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.