Perform an AJAX call using Django Form

Question

I am using the <form> tag to make a search bar and submit button. I would like my submit button to both query database and show a hidden <div>. The hidden div contains the database that will show the results.

I've successfully been able to query database, and display 'div upon submit, but my problem is getting them to work together. Currently, I have to turn one off to make the other work. Together, the submit button causes page to refresh thus hiding div again. I have been told making an AJAX call will solve problem but need help in the code. More specifically the proper syntax for the AJAX call and if I'm missing anything in my views.py.

index.html:

<form method="GET" action="">
    <input type='text' name='q' value='{{ request.GET.q }}'></input>
    <input type='submit' onclick='showDiv()'></input>
</form>

(hidden) div:

<div id="hiddenDiv" style="display: none;">
<p>This is hidden search results<p>
</div>

views.py:

def index(request):
  var_1 = Products.objects.all()
  var_2 = request.GET.get("q")
  if var_2:
    var_1 = items.filter(
        Q(First__icontains=var_2) |
        Q(Last__icontains=var_2)
        )
  context = {'items': items,
  }
  return render(request, 'app/index.html', context)

broken javascript (not sure how to move querystring along):

$(document).ready(function(){
    $("form").submit(function(e){
        e.preventDefault(); //stop submit     

        $.ajax({ //insert AJAX
            type: "GET",
            url "app/index.html",  
            data: {
                'var_2': 'var_2'.val() //take querystring
            },
            success:function showDiv(){ //activate javascript
                document.getElementById("welcomeDiv").style.display = "block";
            }
        });
    });
});

Possible duplicate of [jQuery AJAX submit form](http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form) — Djizeus, May 11 '16 at 19:39

Anoop · Accepted Answer · 2016-05-12T19:55:13.450

1

You can try this.

from django.http import HttpResponse
from django.template.loader import render_to_string

def search_query(request):
    var_1 = Products.objects.all()
    var_2 = request.GET.get("q")
    if var_2:
        items = items.filter(
         Q(First__icontains=var_2) |
         Q(Last__icontains=var_2)
        )
    response = render_to_string('templates/template_name.html', {'items': items})
return HttpResponse(response)

template_name.html

<table width='100%'>
<thead>
  <tr>
    <th>xxxxx</th>
    <th>YYYYY</th>
  </tr>
</thead>
<tbody>
  {% for item in items %}
  <tr>
    <td><b>{{ item.xxxx }}</b></td>
    <td><b>{{ item.yyyyyy }}</b></td>
    ......................
    .......................
  </tr>
  {% endfor %}
</tbody>
</table>

javascript.js

.........
.........
var search_query = $('#id_search_q').val();
$.ajax({ //insert AJAX
        type: "GET",
        url "api/search-query/",  
        data: {'q': search_query //take querystring
        },
        success:function(response){ //activate javascript
            $("#welcomeDiv").html(response)
        }

........
........

index.html

<form method="GET" action="">
    <input type='text' id='id_search_q' name='q' value='{{ request.GET.q }}'></input>
    <input type='submit' onclick='showDiv()'></input>
</form>

urls.py

url('^api/search-query/$', 'views.search_query', name='api_search_query')

edited May 12 '16 at 19:55

answered May 11 '16 at 20:18

Anoop

1,415
11
20

I'm new to this, but are you certain I should be putting `var_2` under the `data` part of the ajax call? I am being told by chrome that `var_2` is not a function. I think this has been my problem all along, capturing the variable into the call – Kervvv May 11 '16 at 21:45
I haven't yet fully mastered javascript or even django for that matter, but if i have other js files linked to it, does the order I display them in the html file matter? I fear this is causing a problem. Changing the order of them gives me different errors. – Kervvv May 11 '16 at 22:52
I got it to work (slightly), but I made quite a few changes: the bottom line is: I don't have any errors, a `GET` request is being made, however it doesnt make the connection to the view. The problem definitely lies in the views.py. Where can I post my new code? Should I make a new question? – Kervvv May 12 '16 at 17:02
You should add new url '/api/search-query/' in urls.py file. – Anoop May 12 '16 at 19:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/111801/discussion-between-anoop-and-ceuskervin). – Anoop May 12 '16 at 19:55
Thank you for getting me on the right path. I found this [link] (https://www.fir3net.com/Web-Development/Django/how-do-i-use-ajax-along-side-django.html) which further explained what you were trying to tell me. I adjusted the ajax view to return an html page with a table that iterated over each response. This is great! thanks. – Kervvv May 16 '16 at 07:53

Perform an AJAX call using Django Form

1 Answers1