django ajax form how to display the result after submission

Question

I am sure it is not a complicated problem, but I have stuck here for a long time, hope some help from you, really appreciated any help.Thanks!!!!

I think it is required to use a "append" function from ajax.But really I am not sure how to write a correct views.py and script. Please see below my snippets and give me your valuable correction.

My current code returns error of "ResultView is missing a QuerySet."

The picture is self explanatory. User enter information, and then click submit then filter the database based on these information. Finally display the result in the same page.

models.py

class Input(models.Model):
    company=models.CharField(max_length=100)
    region=models.CharField(max_length=100)   

class Result(models.Model):
    sales=models.IntegerField(blank=False,null=False)
    employee=models.IntegerField(blank=False,null=False)

forms.py

class InputForm(forms.ModelForm):
    company=forms.CharField(widget=forms.TextInput, label="Company",error_messages={'required': 'Please enter the company name'},required=True)

    #region(here shows a dropdown list, here is correct)
    iquery = Result.objects.values_list('region', flat=True).distinct()
    iquery_choices = [('', 'None')] + [(region,region)  for region in iquery]
    region = forms.ChoiceField(choices=iquery_choices)

url

url(r'^result_list/$',ResultView.as_view(),name='dupont'),

views.py

class ResultView(generic.UpdateView):
    context_object_name = 'dupont_list'
    template_name = 'result_list.html'
    form_class = InputForm
    success_url = '/result/'

    def get_queryset(self):
        if self.request.method == 'POST': # If this view is target on redirect must have GET data.
            form = InputForm(self.request.POST)
            if form.is_valid():
                if self.request.is_ajax():
                    company = form.cleaned_data['company']
                    region = form.cleaned_data['region']

                    queryset=Result.objects.filter(region=region)

                return HttpResponse(simplejson.dumps(to_json), mimetype='application/json')
            else:
                print form.errors
        return super(ResultView,self).get_queryset()

    def get_context_data(self, **kwargs):
        context = super(ResultView, self).get_context_data(**kwargs)
        context["sales"] = self.get_queryset().aggregate(Sum('sales'))
        context["employee"] = self.get_queryset().aggregate(Sum('employee'))

html

<form id="InputForm" method="post" action="">   #here is the data entry form
        {% csrf_token %}

        <!--enter the company name--> 
        <div class="field">
            {{ form.company.errors }}
            <label id="id_company" name="company" for="{{ form.company.id_for_label }}">Company:</label>
            {{ form.company }}
        </div>

        <!--select region-->
        <div class="field" >
            <label> Select the Region:
            {{ form.region }}
                {% for region in form.region.choices %}
                     <option value="region" name= "region" id="id_region">{{region}} </option>
                {% endfor %}
            </label>
        </div>

        <!--submit-->
        <p><input type="button" value="Submit" /></p></div>
    </form> 
</div>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("#InputForm").submit(function() { // catch the form's submit event
    var region= $("#id_region").val();
    var company= $("#id_company").val();

        $.ajax({ // create an AJAX call...
            data: $(this).serialize(), // get the form data
            type: $(this).attr('post'),
            url: "dupont_list/",
            success: function(data) { // on success..
                $("#result").html(data); // update the DIV "result"

              ---how to update the html with filtered result---?
            }
        });
        return false;
    });
});
</script>

    <div id="result" class="result">   <!--Showing the filtered result in database-->
    <table>
    <tr><b>Sales</b></tr>
    <td> {{sales.sales__sum}}</td>

    <tr><b>Employee</b></tr>
    <td> {{employee.employee__sum}}</td>
    </table>

traceback

File "C:\Python27\lib\site-packages\django-1.8.3-py2.7.egg\django\core\handlers\base.py" in get_response
  132.                     response = wrapped_callback(request, *callback_args, **callback_kwargs)
File "C:\Python27\lib\site-packages\django-1.8.3-py2.7.egg\django\views\generic\base.py" in view
  71.             return self.dispatch(request, *args, **kwargs)
File "C:\Python27\lib\site-packages\django-1.8.3-py2.7.egg\django\views\generic\base.py" in dispatch
  89.         return handler(request, *args, **kwargs)
File "C:\Python27\lib\site-packages\django-1.8.3-py2.7.egg\django\views\generic\edit.py" in get
  267.         self.object = self.get_object()
File "C:\Python27\lib\site-packages\django-1.8.3-py2.7.egg\django\views\generic\detail.py" in get_object
  32.             queryset = self.get_queryset()
File "C:\Users\user\Desktop\SCOR\dupont\views.py" in get_queryset
  46.         return super(ResultView,self).get_queryset()
File "C:\Python27\lib\site-packages\django-1.8.3-py2.7.egg\django\views\generic\detail.py" in get_queryset
  74.                         'cls': self.__class__.__name__

Exception Type: ImproperlyConfigured at /result_list/
Exception Value: ResultView is missing a QuerySet. Define ResultView.model, ResultView.queryset, or override ResultView.get_queryset().

Updated Views.py based on Anush's suggestion

class ResultView(ListView):
    context_object_name = 'result_list'
    template_name = 'result_list.html'
    form_class = InputForm

    def post(self, request, *args, **kwargs):
        form = InputForm(request.POST)
        if form.is_valid():
            if self.request.is_ajax():
                company = form.cleaned_data['company']
                region = form.cleaned_data['region']

                queryset=Result.objects.filter(region=region)
                sales = self.get_queryset().aggregate(Sum('sales'))
                return
                data = serializers.serialize('json', queryset,sales)  

                HttpResponse(data)
         else:
             return HttpResponse(form.errors)

    def get_queryset(self):
        return Result.objects.all()   
       def get_context_data(self, **kwargs):
        context = super(ResultView, self).get_context_data(**kwargs)
        context["sales"] = self.get_queryset().aggregate(Sum('sales'))

Answer 1

In your views.py -> ResultView you are overriding the get_queryset() function which should return a queryset.

so change your get_queryset like:

def get_queryset(self):
    return Result.objects.all()

and handle your post separately like:

from django.core import serializers

def post(self, request, *args, **kwargs):
    form = InputForm(request.POST)
    if form.is_valid():
        if self.request.is_ajax():
            company = form.cleaned_data['company']
            region = form.cleaned_data['region']
            queryset=Result.objects.filter(region=region).aggregate(Sum('sales'))
            return HttpResponse(json.dumps(queryset))
    else:
         return HttpResponse(form.errors)

Your ajax call:

$.ajax({
    data: $(this).serialize(), // get the form data
    type: $(this).attr('post'),
    dataType: 'json',
    url: "dupont_list/",
    success: function(data) {
        var html = "<table>"
        html += "<td>"+data['sales__sum']+"</td>"
        html += "</table>"
        $("#result").html(html);
    }
});