Re: Anybody familiar with JavaScript: Page is empty
It's hard to tell what the issue is from what you've posted, Igor. Have you looked at Chrome inspector to see if there are any js errors in it? Or have you tried inspecting the page to see if it's not some weird css issue? Try placing usb_data into html outside of js or console.log data var to see what's sent back by django.
On 10/01/2014 8:00 pm, "Igor Korot" <ikorot01@gmail.com> wrote:
-- --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]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]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]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.
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/CAHqTbjmXrrU0hTWntDAY8aw2rb5AGJvyZn%2BHmWSzGpDfiwZWQA%40mail.gmail.com.
For more options, visit https://groups.google.com/groups/opt_out.
posted by twitter @ 1:25 AM
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home