Why is my jquery in Django app not working? - javascript

I am implemening a dependent-dropdown form with JQuery and Django. However, I still have no idea why this jquery does not work.
My template:
{% block style %}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/style.css' %}"/>
{% endblock %}
{% block script %}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type='text/javascript' src="{% static 'js/ajax_load_rooms.js' %}"></script>
{% endblock %}
{% block content %}
<div class="container-">
<div class="wrapper">
<form id='selectForm' method="post" data-rooms-url="{% url 'ajax_load_rooms' %}">
{% csrf_token %}
<div class="building">
<label for="building">Nhà học</label>
{{ form.building }}
</div>
<div class="room">
<label for="room">Phòng học</label>
{{ form.room }}
</div>
<button class="show-list btn btn-primary" >Thoi gian bieu</button>
</form>
</div>
</div>
{% endblock %}
dropdown_room_list.html
<option value="">-------</option>
{% for room in rooms %}
<option value="{{ room.pk }}">{{ room.room }}</option>
{% endfor %}
My jquery:
$("#id_building").change(function () {
var url = $("#selectForm").attr("data-rooms-url");
var buildingId = $(this).val();
$.ajax({
url: url,
data: {
'building': buildingId,
},
success: function (data) {
$("#id_room").html(data);
}
});
});
My view:
def load_rooms(request):
building = request.GET.get('building')
room_list = Room.objects.filter(building__bid=building, availability=True)
return render(request, 'dropdown-room-list.html', {'rooms': room_list})
My urls:
from django.urls import path
from django.contrib.auth import views as auth_views
from .forms import LoginForm
from .views import *
urlpatterns = [
path('accounts/login/', auth_views.LoginView.as_view(authentication_form=LoginForm, redirect_authenticated_user=True), name='login'),
path('accounts/logout/', auth_views.logout_then_login, name='logout'),
path('booking/list/', BookingListView.as_view(), name='booking_list'),
path('booking/add/', BookingCreateView.as_view(), name='booking_add'),
path('booking/<int:pk>/delete', BookingDeleteView.as_view(), name='booking_delete'),
path('timetable/select/', TimetableSelectView.as_view(), name='select'),
path('timetable/<str:building>/<str:room>/<int:year>/<int:week>', TimetableRoomView.as_view(), name='room_timetable'),
path('ajax/load_rooms', load_rooms, name='ajax_load_rooms')
]
Rendered HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Tim phong</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="/static/css/style.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type='text/javascript' src="/static/js/ajax_load_rooms.js"></script>
</head>
<body>
<header>
<nav class="nav-bar">
<ul class="left list">
<li>Quản lý</li>
<li>Đặt phòng</li>
</ul>
<ul class="right list">
<li>Đăng xuất</li>
</ul>
</nav>
</header>
<div class="container-">
<div class="wrapper">
<form id='selectForm' method="post" data-rooms-url="/ajax/load_rooms">
<input type='hidden' name='csrfmiddlewaretoken' value='qvLwYOC9fKVkADkklqhL29UWNduOqJjwAlFYdLd6t03qWZ9z30z0BCsSElGoRsla' />
<div class="building">
<label for="building">Nhà học</label>
<select name="building" class="form-control form-control-sm" required id="id_building">
<option value="" selected>---------</option>
<option value="B1">Lecture Hall B1</option>
</select>
</div>
<div class="room">
<label for="room">Phòng học</label>
<select name="room" class="form-control form-control-sm" required id="id_room">
<option value="" selected>---------</option>
<option value="3">B1/101</option>
</select>
</div>
<button class="show-list btn btn-primary" >Thời gian biểu</button>
</form>
</div>
</div>
</body>
Note that my javascript static path is right, the template is rendered nicely and I can see the javascript path to the right code. But the dependent-dropdown functionality is seems to be not working.

Okay, As I find two things missing in your code -
Not able to find id_building id in your template.
in ajax request type (method) is missing, which is post as you sending the data.
For only building selection change, you want to update its room. If this is the case, you can use only ajax query on building selection-
$("#id_building").change(function () {
$.ajax({
url: "/ajax/load_rooms",
method: "GET",
async' false,
data: {
building : $(this).val(),
},
success: function (data) {
//check your data
console.log(data);
// if data in id->room name format, it will work
// if not change as per result data
$.each(data, function(key, value) {
htmlOption += '<option value="' + itemsMarque[key].id + '">'+ itemsMarque[key].name + '</option>';
});
$("#id_room").html(data);
}
});

Related

Flask Stripe Checkout dynamic prices SessionID error

I've been using https://stripe.com/docs/payments/checkout/migrating-prices#server-side-code-for-inline-items and https://stripe.com/docs/payments/checkout/accept-a-payment as well as other guides/SO posts as a guide.
The checkout button in payments.html page doesn't work; nothing happens on the page.
In the Flask's /payment function, I have been able to print out the session/session.id fine.
I have tried passing the session and the session.id to the payments.html page, but neither has worked. The {{price}} on payments.html works fine.
What am I overlooking/messing up here to get the Checkout page working?
base.html
<!DOCTYPE html>
<html>
<head>
<title>Stripe Checkout</title>
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap.min.css') }}">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
{% block scripts %}
{% endblock %}
</body>
</html>
Payments.html
{% extends "base.html" %}
{% block content %}
<div>
<h1>Cost</h1>
<h2>Pay ${{price}}</h2>
<button type="button" class="btn btn-primary" id="checkout">Pay with Card</button>
<button type="button" class="btn btn-primary" id="back">Back</button>
</div>
<div id="status">
<br>
<div class="alert alert-primary" id="alert" role="alert"></div>
</div>
{% endblock %}
{% block scripts %}
<script src="https://js.stripe.com/v3"></script>
<script>
var stripe = Stripe('pk_test_...');
var checkoutButton = document.querySelector('#checkout');
checkoutButton.addEventListener('click', function () {
stripe.redirectToCheckout({
sessionId: {{sessionID}}
});
});
</script>
{% endblock %}
Flask's /payment function
#app.route("/payment")
def payment():
price = "50"
session = session.Session().getSession(int(price)*100)
sessionID = session.id
print("SessionID:", sessionID)
return render_template("payment.html", sessionID=sessionID, price=price)
Python Stripe file
import stripe
stripe.api_key = 'sk_test_...'
class Session:
def __init__(self):
pass
def getSession(self, price):
session = stripe.checkout.Session.create(
payment_method_types=['card'],
line_items=[{
'price_data': {
'currency': 'usd',
'product_data': {
'name': 'blah',
},
'unit_amount': price,
},
'quantity': 1,
}],
mode='payment',
success_url='https://example.com/success',
cancel_url='https://example.com/cancel',
)
return session
Thanks to #floatingLomas, I didn't think to use the browser's console. Yeah, I figured it out, I have to use the session.id and have quotes around {{sessionID}}.

Materialize CSS (with django) dropdown form not working

I'm trying to create a form in which the user choices an instance of model object (Invoice) already saved in the database and submits. I've tried to initialize the JS, but have little experience working with JS in html so I'm not totally sure I'm doing it right.
Right now the below code does not render anything besides the submit button in the form. I have tried adding a random input field (worked) and tried unpacking and rendering the "invoices" context as raw text on the same page (also worked) so I think I've narrowed the issue down to it being the form choices.
header.html
<head>
{% load static %}
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Compiled and minified CSS -->
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$('select').formSelect();
});
</script>
</head>
<body>
<nav>
<div class="nav-wrapper">
Elb
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Invoice Upload</li>
<li>Inventory Upload</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
form.html
{% extends 'main/header.html' %}
<body>
{% block content %}
<br>
<br>
<form method="POST">
{% csrf_token %}
<label for="invoice">Invoice</label>
<select id="invoice" name="invoice">
<option class=browser-default value="" disabled selected>Choose invoice</option>
{% for invoice in invoices %}
<option class=browser-default value="{{ invoice }}">{{ invoice }}</option>
{% endfor %}
</select>
<br><br>
<input type="submit" value="Save" />
</form>
{% endblock content %}
</body>
views.py
def inventory_upload(request):
if request.user.username == 'admin': # Check that user is authorized
if request.method == 'POST': # Render HTML of results page returned to user
...do something and return to user...
else: # Initial html display to user
invoices = Invoice.objects.all()
inventory = get_inventory_from_sheet()
form = BulkInventoryUpload
return render(request=request,
template_name='form.html',
context={'invoices': invoices, 'inventory': inventory, 'form': form})
else: # Bounce user back to homepage if not authorized
return redirect('main:homepage')
forms.py
from django import forms
from django.forms import formset_factory
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User
from .models import Invoice
class BulkInventoryUpload(forms.Form):
invoice = forms.CharField(label='invoice', max_length=150)
def get_invoice(self, commit=True):
invoice = self.cleaned_data['invoice']
return invoice
For anyone else running into the same issue (credit to Sean Doherty in comments above for the answer):
JQuery needs to be loaded before CSS (and from my testing it looks like before the JS as well)
The below order got it working for me:
<head>
{% load static %}
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('select').formSelect();
});
</script>
<!-- Compiled and minified CSS -->
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

Keep color from clicking on button after page redirects

When I click on a button, the color of the button changes correctly. However, when you click on a button, it redirects to an app route. How can I make the color from clicking on the button still remain after the page loads?
base.html:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
{% block head %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{{ url_for('static', filename='js/button_click.js') }}" type="text/javascript"
charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dashboard.css') }}">
<title>{% block title %}{% endblock %}</title>
{% endblock %}
</head>
<body>
{% block content %}
<div class="navbar">
<div class="logo-holder">
<img class="logo" src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo">
</div>
<div class="button-holder">
<button class="navbtn" id="orange-btn" onclick="window.location = '/orange';">Orange</button>
</div>
<div class="button-holder">
<button class="navbtn" id="banana-btn" onclick="window.location = '/banana';">Banana</button>
</div>
<div class="button-holder">
<button class="navbtn" id="apple-btn" onclick="window.location = '/apple';">Apple</button>
</div>
</div>
{% endblock %}
</body>
</html>
button_click.js:
$('.button-holder').click( function () {
$(this).toggleClass('active_button');
});
dashboard.css:
.button-holder:active, .active_button {
background-color: #992200;
}
Since you're on a new page, you need to identify which page you're on and activate the appropriate button.
window.onOpen = function () {
const thisURL = window.location;
if (thisURL.includes('/orange') {
document.getElementById('orange-btn').classList.add('active-class');
}
/* and so forth for the other buttons */
}
You can add a value to the localStorage and then on new page check it and assign to the button again. Also please note that localstorage saved your clicked button value only for your device, not globally.
Besides, please change to anchor tag if you want to use links.
Try like this:
HTML:
<div class="button-holder">
Orange
</div>
<div class="button-holder">
Banana
</div>
<div class="button-holder">
<a href="/apple" class="navbtn" id="apple-btn" >Apple</a>
</div>
JS:
$(function(){
var button_index = localStorage.getItem('button_index');
if(button_index ){
$('.button-holder').eq(button_index).addClass('active_button');
}
$('.button-holder').click( function (e) {
e.preventDefault();
var url = window.location + $(this).find("a").attr('href');
var button_index = $(this).index();
$(this).toggleClass('active_button');
localStorage.setItem('button_index', button_index - 1 );
window.location = url;
});
})

How to submit django model forms via ajax, preventing reload/refresh on submit

Problem: every time I click the login button, the page reloads and then goes to some funny URL appending 'undefined' in the URL - http://127.0.0.1:8000/accounts/userLogin/undefined. I would like if the form has errors, then the form errors are shown with the form again for the user to correct and if there are no errors, then log in the user.
PS: I am relatively new to this Django/javascript world.
Here is my code:
View
#method_decorator(csrf_protect, name='post')
class UserLogin(LoginView):
"""docstring for UserLogin"""
template_name = 'accounts/login.html'
def get(self, request):
'''a func to work on the request.POST'''
print("getting the form for you ")
form = LoginForm()
return render(request,self.template_name,{'form':form})
def post(self, request):
form = LoginForm(request.POST)
print("go the data for you")
if request.is_ajax():
print("entered form")
if form.is_valid():
print("form valid")
email = form.cleaned_data['email']
try:
user = User.objects.get(email=email)
print("user obj", user)
if user.check_password(form.cleaned_data['password']):
# 0-super admin, 1-dept admin,2-dept staff, 3-end user
print("correct password")
if user.account_type == 4:
if user.last_login == None or user.last_login == '':
to = "verify"
else:
to = "user"
else:
if user.account_type == 2:
to = 'dept_admin'
elif user.account_type == 3:
to = 'dept_staff'
elif user.account_type == 1:
to = 'super_user'
else:
to = None
res = {'status':'ok', 'error':False, 'acc_type':to, 'data':user.email}
else:
print("incorrect password")
res = {'status':'fail', 'error':'incorrect password'}
except Exception as e:
print("User not found!", e)
res = {'status':'fail', 'error':'account not found'}
else:
print("form valid")
res = {'status':'fail', 'error':form.errors}
return JsonResponse(res)
Form
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Font Awesome -->
<link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet">
<!-- Endless -->
<link href="{% static 'css/endless.min.css' %}" rel="stylesheet">
</head>
<body>
<div class="login-wrapper">
<div class="text-center">
<span>
<img src="{% static 'img/question.png' %}" style="height: 100px; width: 100px; border-radius: 50%;">
</span>
</div>
<div class="text-center">
<h2 class="fadeInUp animation-delay8" style="font-weight:bold">
<span class="text-success">CitiSpy User Login</span>
</h2>
</div>
<div class="login-widget animation-delay1">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<div class="pull-left">
<i class="fa fa-lock fa-lg"></i> Login
</div>
</div>
<div class="panel-body">
<div id="login-form-main-message"></div>
<form class="form-login" id="login_form">
<div id="form_content">
<div class="form-group">
{% csrf_token %}
</div>
{{ form.non_field_errors }}
<div class="form-group">
{{ form.email.errors }}
<label>Email</label>
{{ form.email }}
</div>
<div class="form-group">
{{ form.password.errors }}
<label>Password</label>
{{ form.password }}
</div>
<div class="seperator"></div>
<hr/>
<div class="form-group">
<button class="btn btn-success btn-sm bounceIn animation-delay5 login-link pull-right" type="button"><i class="fa fa-sign-in"></i> Login</button>
<!-- <a type="submit" class="btn btn-success btn-sm bounceIn animation-delay5 login-link pull-right" id="login_submit"><i class="fa fa-sign-in"></i> Login</a> -->
</div>
</div>
</form>
</div>
</div><!-- /panel -->
</div><!-- /login-widget -->
</div><!-- /login-wrapper -->
<!-- Jquery -->
<script src="{% static 'js/jquery-1.10.2.min.js' %}"></script>
<!-- Bootstrap -->
<script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
<!-- Pace -->
<script src="{% static 'js/uncompressed/pace.js' %}"></script>
<!-- Popup Overlay -->
<script src="{% static 'js/jquery.popupoverlay.min.js' %}"></script>
<!-- Slimscroll -->
<script src="{% static 'js/jquery.slimscroll.min.js' %}"></script>
<!-- Modernizr -->
<script src="{% static 'js/modernizr.min.js' %}"></script>
<!-- Cookie -->
<script src="{% static 'js/jquery.cookie.min.js' %}"></script>
<!-- Endless -->
<script src="{% static 'js/endless/endless.js' %}"></script>
<!--login js-->
<script src="{% static 'js/accounts/login_1.js' %}"></script>
</body>
</html>
JavaScript
$(function(){
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var $csrf_token = {
name: "csrfmiddlewaretoken",
value: getCookie('csrftoken')
};
$('#login_form').submit(function(event){
event.preventDefault();
var $form_data = $(this).serializeArray();
$form_data.push($csrf_token);
$.ajax({
type: 'POST',
data: $form_data,
cache: false,
dataType: 'json',
url: '/accounts/userLogin/',
beforeSend: function(){
$("#login-form-main-message").css("display", "block").html("<div class='alert alert-info'><img height=\"24px;\" src=\"{% static '/images/double-ring.gif' %}\" alt=\"loading\" /> Please wait...</div>");
$("#form_content").css("display", "none");
},
success: function(data){
if (data.status === "ok"){
if (data.to === "verify") {
//redirect to account verification
} else {
if (data.to === "user") {
//redirect to user account
$("#login-form-main-message").css("display", "block").html("<div class='alert alert-info'><img height=\"24px;\" src=\"{% static '/images/double-ring.gif' %}\" alt=\"loading\" /> Success! login you in, please wait...</div>");
$("#form_content").css("display", "none");
}else{
$("#login-form-main-message").css("display", "block").html("<div class='alert alert-info'><img height=\"24px;\" src=\"{% static '/images/double-ring.gif' %}\" alt=\"loading\" /> Success! login you in, please wait...</div>");
$("#form_content").css("display", "none");
location.href = '/em_dept/dashboard/';
}
}
}
},
error:function(){
console.log("error error error!!!");
}
});
return false;
});
});

Need jquery to search data on all pages and display rather than data only on page

my issue when I search on my site using jquery it is only searching on the page that is displayed at the moment and I would like it to search all of my data and then display on the page accordingly, which is about 2.6 M entries. I am using the core django paginator for my pagination and using simple jquery and ajax for my search tool. Please help!
heres my view:
def tissues(request):
contact_list = TissueTable.objects.all()
paginator = Paginator(contact_list, 100) # Show 25 contacts per page
page = request.GET.get('page')
try:
contacts = paginator.page(page)
except PageNotAnInteger:
# If page is not an integer, deliver first page.
contacts = paginator.page(1)
except EmptyPage:
# If page is out of range (e.g. 9999), deliver last page of results.
contacts = paginator.page(paginator.num_pages)
return render(request, '.html', {'contacts': contacts})
heres my two templates, base and home,
base.html:
<html>
<head>
<title>Animal NGS DATA</font></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('a[rel="external"]').attr('target', '_blank');
</script>
<style>
th
{
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even)
{
background:#e9e9e9;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1 left>NGS CUFFLINK'S DATA</h1>
</div>
<div data-role="main" class="ui-content">
<form>
<input id="filterTable-input" data-type="search" placeholder="Search Tissue Data...">
</form>
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable" data-filter="true" data-input="#filterTable-input">
</head>
<body>
<map title="Navigation Bar">
<P>
NGS Data
Genes
Experiment
Organisms
Tissue Data
</P>
</map>
<h1><font color='red'>Tissue Data</font></h1>
{% block content %}
{% endblock %}
</body>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}" />
</html>
and my home.html
{% extends "tissues/base.html" %}
{% block content %}
<!--<table id='table' data-mode="columntoggle" border = '10' bordercolor = 'mahogany'>-->
<div class="pagination">
<span class="step-links">
{% if contacts.has_previous %}
previous
{% endif %}
<span class="current">
Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}.
</span>
{% if contacts.has_next %}
next
{% endif %}
</span>
</div>
<table data-role="table" id="myTable" class="ui-responsive ui-shadow" data-filter="true" data-input="#filterTable-input" bgcolor = 'cyan'>
<thead>
<tr bgcolor = 'pink'>
<th>Tissue ID</th>
<th>Tissue Term</th>
<th>Definition</th>
</tr>
<thead>
<tbody>
{% for b in contacts.object_list%}
<tr>
<td>{{b.tissue_id}}</td>
<td>{{b.tissue_term}}</td>
<td>{{b.definition}}</td>
</tr>
{% endfor %}
</table>
<div class="pagination">
<span class="step-links">
{% if contacts.has_previous %}
previous
{% endif %}
<span class="current">
Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}.
</span>
{% if contacts.has_next %}
next
{% endif %}
</span>
</div>
{% endblock %}
Looks like you need separate view function, and deliver it results separately via ajax. May be something like this one:
def ajax_activity_objects_search(request):
search_phrase = request.GET.get('q')
matched = ActivityObject.objects.filter(
address__icontains=search_phrase,
)
response = ''
for act_object in matched:
response += '<option value="' + str(act_object.id) + '">' \
+ act_object.address + '</option>'
return HttpResponse(response)

Categories