Anybody familiar with JavaScript: Page is empty
Hi, ALL,
I have a little problem.
I'm trying to connect the Django based application with jQuery/jQWidgets (specifically jqxGrid).
Here's what I've done:
This is my views.py file:
[code]
def displayusbtable(request):
usb_list = USB.objects.all()
return render_to_response('html/index.html', {"usb_data": usb_list} )
[/code]
usb_list = USB.objects.all()
return render_to_response('html/index.html', {"usb_data": usb_list} )
[/code]
This is my html/index.html file:
[code]
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
{% load staticfiles %}
<link rel="stylesheet" href="{% static "jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base.css" %}" type="text/css" />
<script type="text/javascript" src="{% static "jquery-1.10.2.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxcore.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxdata.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js" %}"></script>
<script type="text/javascript">
var data = "{{usb_data}}";
$(document).ready(function(){
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'device_name', type: 'string' },
{ name: 'vid_pid', type: 'string' },
{ name: 'install', type: 'string' },
{ name: 'disk_device', type: 'string' },
{ name: 'volume_device', type: 'string' },
{ name: 'usb_type', type: 'string' },
{ name: 'vid', type: 'string' },
{ name: 'pid', type: 'string' },
{ name: 'hub', type: 'number' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source)
//initialize jqxGrid
$("#grid").jqxGrid(
{
source: dataAdapter,
showstatusbar: true,
editable: false,
columns:
[
{ text: 'Device Name', columntype: 'textbox', datafield: 'device_name', width: 100 },
{ text: 'VID/PID', columntype: 'textbox', datafield: 'vid_pid', width: 50 },
{ text: 'Install', columntype: 'textbox', datafield: 'install', width: 50 },
{ text: 'Disk Device', columntype: 'textbox', datafield: 'disk_device', width: 50 },
{ text: 'Volume Device', columntype: 'textbox', datafield: 'volume_device', width: 50 },
{ text: 'Type', columntype: 'textbox', datafield: 'usb_type', width: 100 },
{ text: 'VID', columntype: 'textbox', datafield: 'vid', width: 100 },
{ text: 'PID', columntype: 'textbox', datafield: 'pid', width: 100 },
{ text: 'Hub', datafield: 'hub', cellsalign: 'right', cellsformat: 'n2' }
]
caption: "Test"
});
});
</script>
</head>
<body>
<div id='jqxWidget'>
<div id="grid"></div>
</div>
</body>
</html>
[/code]
<html>
<head>
<title>Test</title>
{% load staticfiles %}
<link rel="stylesheet" href="{% static "jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base.css" %}" type="text/css" />
<script type="text/javascript" src="{% static "jquery-1.10.2.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxcore.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxdata.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js" %}"></script>
<script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js" %}"></script>
<script type="text/javascript">
var data = "{{usb_data}}";
$(document).ready(function(){
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'device_name', type: 'string' },
{ name: 'vid_pid', type: 'string' },
{ name: 'install', type: 'string' },
{ name: 'disk_device', type: 'string' },
{ name: 'volume_device', type: 'string' },
{ name: 'usb_type', type: 'string' },
{ name: 'vid', type: 'string' },
{ name: 'pid', type: 'string' },
{ name: 'hub', type: 'number' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source)
//initialize jqxGrid
$("#grid").jqxGrid(
{
source: dataAdapter,
showstatusbar: true,
editable: false,
columns:
[
{ text: 'Device Name', columntype: 'textbox', datafield: 'device_name', width: 100 },
{ text: 'VID/PID', columntype: 'textbox', datafield: 'vid_pid', width: 50 },
{ text: 'Install', columntype: 'textbox', datafield: 'install', width: 50 },
{ text: 'Disk Device', columntype: 'textbox', datafield: 'disk_device', width: 50 },
{ text: 'Volume Device', columntype: 'textbox', datafield: 'volume_device', width: 50 },
{ text: 'Type', columntype: 'textbox', datafield: 'usb_type', width: 100 },
{ text: 'VID', columntype: 'textbox', datafield: 'vid', width: 100 },
{ text: 'PID', columntype: 'textbox', datafield: 'pid', width: 100 },
{ text: 'Hub', datafield: 'hub', cellsalign: 'right', cellsformat: 'n2' }
]
caption: "Test"
});
});
</script>
</head>
<body>
<div id='jqxWidget'>
<div id="grid"></div>
</div>
</body>
</html>
[/code]
Everything looks good, except that the page comes up blank.
Looking at the "View/Source" I see this:
[code]
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="/static/jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="/static/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript">
var data = "[<USB: pk: 1, device_name: wd ses_device, vid_pid: None, install: None, disk_device: None, volume_device: None, USB_type: other, PID: #0748, Vendor: wd, Product: ses_device, Revision: #1019>, <USB: pk: 2, device_name: wd ses_device, vid_pid: None, install: None, disk_device: None, volume_device: None, USB_type: other, PID: #0748, Vendor: wd, Product: ses_device, Revision: #1019>, <...(remaining elements truncated)...']";
$(document).ready(function(){
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'device_name', type: 'string' },
{ name: 'vid_pid', type: 'string' },
{ name: 'install', type: 'string' },
{ name: 'disk_device', type: 'string' },
{ name: 'volume_device', type: 'string' },
{ name: 'usb_type', type: 'string' },
{ name: 'vid', type: 'string' },
{ name: 'pid', type: 'string' },
{ name: 'hub', type: 'number' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source)
//initialize jqxGrid
$("#grid").jqxGrid(
{
source: dataAdapter,
showstatusbar: true,
editable: false,
columns:
[
{ text: 'Device Name', columntype: 'textbox', datafield: 'device_name', width: 100 },
{ text: 'VID/PID', columntype: 'textbox', datafield: 'vid_pid', width: 50 },
{ text: 'Install', columntype: 'textbox', datafield: 'install', width: 50 },
{ text: 'Disk Device', columntype: 'textbox', datafield: 'disk_device', width: 50 },
{ text: 'Volume Device', columntype: 'textbox', datafield: 'volume_device', width: 50 },
{ text: 'Type', columntype: 'textbox', datafield: 'usb_type', width: 100 },
{ text: 'VID', columntype: 'textbox', datafield: 'vid', width: 100 },
{ text: 'PID', columntype: 'textbox', datafield: 'pid', width: 100 },
{ text: 'Hub', datafield: 'hub', cellsalign: 'right', cellsformat: 'n2' }
]
caption: "Test"
});
});
</script>
</head>
<body>
<div id='jqxWidget'>
<div id="grid"></div>
</div>
</body>
</html>
[/code]
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="/static/jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="/static/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript">
var data = "[<USB: pk: 1, device_name: wd ses_device, vid_pid: None, install: None, disk_device: None, volume_device: None, USB_type: other, PID: #0748, Vendor: wd, Product: ses_device, Revision: #1019>, <USB: pk: 2, device_name: wd ses_device, vid_pid: None, install: None, disk_device: None, volume_device: None, USB_type: other, PID: #0748, Vendor: wd, Product: ses_device, Revision: #1019>, <...(remaining elements truncated)...']";
$(document).ready(function(){
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'device_name', type: 'string' },
{ name: 'vid_pid', type: 'string' },
{ name: 'install', type: 'string' },
{ name: 'disk_device', type: 'string' },
{ name: 'volume_device', type: 'string' },
{ name: 'usb_type', type: 'string' },
{ name: 'vid', type: 'string' },
{ name: 'pid', type: 'string' },
{ name: 'hub', type: 'number' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source)
//initialize jqxGrid
$("#grid").jqxGrid(
{
source: dataAdapter,
showstatusbar: true,
editable: false,
columns:
[
{ text: 'Device Name', columntype: 'textbox', datafield: 'device_name', width: 100 },
{ text: 'VID/PID', columntype: 'textbox', datafield: 'vid_pid', width: 50 },
{ text: 'Install', columntype: 'textbox', datafield: 'install', width: 50 },
{ text: 'Disk Device', columntype: 'textbox', datafield: 'disk_device', width: 50 },
{ text: 'Volume Device', columntype: 'textbox', datafield: 'volume_device', width: 50 },
{ text: 'Type', columntype: 'textbox', datafield: 'usb_type', width: 100 },
{ text: 'VID', columntype: 'textbox', datafield: 'vid', width: 100 },
{ text: 'PID', columntype: 'textbox', datafield: 'pid', width: 100 },
{ text: 'Hub', datafield: 'hub', cellsalign: 'right', cellsformat: 'n2' }
]
caption: "Test"
});
});
</script>
</head>
<body>
<div id='jqxWidget'>
<div id="grid"></div>
</div>
</body>
</html>
[/code]
What I think I am missing is a mapping between the Python/Django dictionary and the JavaScript/jqxGrid control.
Can someone please take a look?
Thank you.
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/7d0925ae-1f88-4d23-95b1-04037ea140ff%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home