Anybody familiar with JavaScript: Page is empty

71 views
Skip to first unread message

Igor Korot

unread,
Jan 10, 2014, 4:00:20 AM1/10/14
to django...@googlegroups.com
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 = "[&lt;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&gt;, &lt;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&gt;, &lt;...(remaining elements truncated)...&#39;]";
    $(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.
 

Mario Gudelj

unread,
Jan 10, 2014, 4:25:21 AM1/10/14
to django...@googlegroups.com

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.

--
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...@googlegroups.com.
To post to this group, send email to django...@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.

trojactory

unread,
Jan 10, 2014, 4:34:23 AM1/10/14
to django...@googlegroups.com
Hi Igor,

You can solve this in three ways:

1. Return a JSON object from Django as a string using dumps: This will keep your HTML file unchanged. The JSON file might not be exactly in the form you want. But if you know javascript then you can format it correctly into your table.

2. Use Django templates: You don't seem to use AJAX so why take the trouble of using Javascript to built the table? Let Django templates create it for you! (Search for the <table> example here

3. Try the django-jqgrid app (https://github.com/gerry/django-jqgrid). I haven't used it but looks like a working solution.

I would recommend the second option.

Regards,
Arun

Igor Korot

unread,
Jan 10, 2014, 5:12:06 AM1/10/14
to django...@googlegroups.com
Hi, Mario,

On Fri, Jan 10, 2014 at 1:25 AM, Mario Gudelj <mario....@gmail.com> wrote:
> 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.

I don't have a Chrome here. Just an old IE8 + WinXP. ;-)
Looking at the Dev Console I don't see any errors.

The Django is actually sending the proper data to the page itself.

Any other suggestions?

Thank you.
> You received this message because you are subscribed to a topic in the
> Google Groups "Django users" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/django-users/oVIYlR09R3k/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> django-users...@googlegroups.com.
> To post to this group, send email to django...@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.

Igor Korot

unread,
Jan 10, 2014, 5:16:49 AM1/10/14
to django...@googlegroups.com
Hi,

On Fri, Jan 10, 2014 at 1:34 AM, trojactory <aru...@gmail.com> wrote:
> Hi Igor,
>
> You can solve this in three ways:
>
> 1. Return a JSON object from Django as a string using dumps: This will keep
> your HTML file unchanged. The JSON file might not be exactly in the form you
> want. But if you know javascript then you can format it correctly into your
> table.

I'm thinking of using JSON.
However, for some reason when I initially tried it it errored out.
Will try it again and report.

>
> 2. Use Django templates: You don't seem to use AJAX so why take the trouble
> of using Javascript to built the table? Let Django templates create it for
> you! (Search for the <table> example here
> http://www.djangobook.com/en/2.0/chapter04.html )

Well, does Django have a template for doing sorting and grouping of
the table of data on the fly?
From what I see the jqxGrid does have it.
Besides this more like a proof of concept, so I'd really like this to work.

>
> 3. Try the django-jqgrid app (https://github.com/gerry/django-jqgrid). I
> haven't used it but looks like a working solution.
>
> I would recommend the second option.

Thank you.
> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Django users" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/django-users/oVIYlR09R3k/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> django-users...@googlegroups.com.
> To post to this group, send email to django...@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/f345e058-f2e8-4b8e-9d26-ad51b21b8a14%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages