1

I'm using Django 1.6 and sqlite3. I have a database of text entries with voted scores and entry dates.

web page

On the web page, the entries are sorted and displayed in three tables; latest entries, highest voted entries, and lowest voted entries. I would like to continue to keep the text entry, voting and table displays all on one html page.

entry code

I have code that now works to enter text to the database with a starting vote of 0 and the current datetime. currently this does not use forms, as I was told it was overkill for what I wanted to do, and forms also seem to prefer multiple html template pages.

no forms

Perhaps since I am not using forms, entering new text and pressing the enter key does not cause the main view to refresh. Also, multiple people would use the site, so ideally refreshes would come when anyone adds an entry to the database.

I'm trying to see where and how I can insert code to do a refresh when entries come into the database. Perhaps this would be a command in view where the add request comes in - but I am having trouble making the data accessible to render.

I'm quite new to this, and if you could point me in the right conceptual direction, I would be grateful...

Here's what I have;

urls

from django.conf.urls import patterns, include, url
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
    url(r'^admin/', include(admin.site.urls)),
    url(r'^i/$', 'entries.views.index'),
    url(r'^add/$', 'entries.views.add'),

)

views

from django.shortcuts import render
from django.http import HttpResponse
from entries.models import Entry
from django.db import models
from datetime import datetime
from django.utils import timezone

def index(request):
    context = {
      'latest_entry_list': Entry.objects.order_by('-pub_date')[:10],
      'high_entry_list': Entry.objects.order_by('-score')[:10],
      'low_entry_list': Entry.objects.order_by('score')[:10],
    }
    return render(request, 'entries/index.html', context);


def add(request):
    created_date = default=datetime.now()
    created_score = '0'
    created_text = request.GET.get('text')    
    e = Entry(text=created_text, score=created_score,pub_date=created_date)
    e.save()  
    return HttpResponse('done')

getit.js

console.log("hi from js");
$(document).ready(function() {
    $("#input").bind("keypress", function(e) {
    if (e.keyCode == 13) {
    var text = $("#input").val();       
    var args = {'text':text};       
    $.get("/add/", args).done(function(data) {
        console.log("message: " + data);
    });
    }       
 });    
});

index.html

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>

<ul>
{% for entry in latest_entry_list %}
    <li><a href="/entries/{{ entry.id }}/">{{ entry.text }}&nbsp;&nbsp{{ entry.score }}</a></li>
{% endfor %}
</ul>

<ul>
{% for entry in high_entry_list %}
    <li><a href="/entries/{{ entry.id }}/">{{ entry.text }}&nbsp;&nbsp{{ entry.score }}</a></li>
{% endfor %}
</ul>

<ul>
{% for entry in low_entry_list %}
    <li><a href="/entries/{{ entry.id }}/">{{ entry.text }}&nbsp;&nbsp{{ entry.score }}</a></li>
{% endfor %}
</ul>

<style type="text/css" media="screen">
  div h2 span { color: #ff0000; }
  div span { color: #00ff00; }
  #box { width: 400px; height: 400px; }
  #h { color: #ff0000; }
</style>
<h3 id="h">title</h3>
<p>message: {{ text }}</p>
<input type="text" name="text" value="" id="input"/>
<script type="text/javascript" src="{{STATIC_URL}}getit.js"></script>

1 Answers1

0

Did it! with thanks to this: How can I refresh a page with jQuery?

I just needed location.reload(); in getit.js;

console.log("hi from js");

$(document).ready(function() {

$("#input").bind("keypress", function(e) {

    if (e.keyCode == 13) {
        var text = $("#input").val();       
        var args = {'text':text};           
        $.get("/add/", args).done(function(data) {
            console.log("message: " + data);
        location.reload();  
        });
    }   
});

});
Community
  • 1
  • 1