DjangoBB LoFi version

Полная версия: django, ajax

ilnur

Март 13, 2013 11:26:04

здравствуйте.

есть модель. через которую загружаются картинки в папку в админке.
в шаблон выводится две картинки из БД.
пользователь выбирает понравившуюся, нажимает на неё. аяксом отправляется данные, вьюха должна обработать полученные данные и выдать новую порцию картинки.

вот что я имею сейчас

urls.py

from django.conf.urls import patterns, include, url
urlpatterns = patterns('carreiting.views',
	(r'^$', 'home'),
	(r'ajax_save_reiting_update/(\w+)$', 'ajax_save_reiting_update')
)

views.py

# coding: utf-8
from django.shortcuts import render_to_response
from django.http import HttpResponse
import random
from models import Cars
def home(request):
	# получаем список всех картинок
	images = Cars.objects.all()
	# берем рандомно два изображения
	a = random.randint(0, len(images)-1)
	b = random.randint(0, len(images)-1)
	
	while a == b:
		b = random.randint(0, len(images)-1)
	return render_to_response(
		'base.html', 
		{
			'image1': images[a],
			'image2': images[b]
			}) 
def ajax_save_reiting_update(request, images):
	print images
	# получаем список всех картинок
	images = Cars.objects.all()
	# берем рандомно два изображения
	a = random.randint(0, len(images)-1)
	b = random.randint(0, len(images)-1)
	
	while a == b:
		b = random.randint(0, len(images)-1)
	return HttpResponse(images[a].name.name+'|'+images[b].name.name)

models.py

from django.db import models
from django.contrib import admin 
# Create your models here.
class Cars(models.Model):
	name    = models.FileField(upload_to = 'static\\cars\\')
	reiting = models.CharField(
		max_length = 100,  
		default    = '0',
		editable   = False)
	def __unicode__(self):
		return self.name.name
admin.site.register(Cars)

шаблон

<!DOCTYPE HTML>
<html>
	
	<head>
		<meta charset = 'utf-8'>
		<title>Система рейтингов автомобилей</title> 
		<link 
			rel  = "stylesheet" 
			type = "text/css" 
			href = "/static/styles.css">
		<script language = 'javascript'>
			function getXmlHttpRequest() {
				if (window.XMLHttpRequest) {
					try {
						return new XMLHttpRequest();
					} catch (e) {}
				}
				else if (window.ActiveXobject) {
					try {
						return new ActiveXobject('Msxml2.XMLHTTP');
					} catch (e) {}
					try {
						return new ActiveXobject('Microsoft.XMLHTTP');
					} catch (e) {}
				}
				return null
			}
			function getNextImages(selected_image) {
				image1 = document.getElementById('image1');
				image2 = document.getElementById('image2');
				document.getElementById('ajax_status').innerText = image1.src;
				// создаем запрос
				request = getXmlHttpRequest();
				// создаем обрабочтк события
				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						src = request.responseText.split('|');
						image1.src = src[0];
						image2.src = src[1];
					}
								
				}
				if (selected_image == 1) 
				 	request.open('GET', 'ajax_save_reiting_update/'+image1.src+'|'+image2.src, false);
				else 
					request.open('GET', 'ajax_save_reiting_update/'+image2.src+'|'+image1.src, false);
				request.send('123');
			}
		</script>
	</head>
	<body>
			<h1>Какой автомобиль вам по душе?</h1>	
			<hr>
			<img id = 'image1' src = {{image1}} onClick = 'getNextImages(1);'>
			<img id = 'image2' src = {{image2}} onClick = 'getNextImages(2);'>
			<hr>
			<input type = 'button' value = 'Тест' onClick='getNextImages(1);'>
			<span id = 'ajax_status'>Статус ajax запроса</span>
	</body>
</html>

проблема вот в чем. как мне передать в аяксе данные о тех картинках что находятся сейчас на странице?
как видно из шаблона я пробовал передать атрибут src у тегов image.
но что-то мн кажется я не в ту сторону смотрю.

посдкажите пожалуйста.
спасибо

nnmware

Март 13, 2013 15:19:10

Жуть.
Я бы лично сделал так:
а) отдавал бы объекты в шаблон строкой вида

result = [images1, images2]

б) написал бы шаблон imgblock.html с содержимым

{% for item in result %}
<img id = 'image{{ item.pk }}' src = {{ item }} onClick = 'getNextImages({{ item.pk }});'>
{% endfor %}

в) Аргументом для getNextImages использовал бы их Primary Key
Обернул бы в исходном шаблоне блок c картинками в DIV чтобы заменять содержимое
<div id=“img_result”>{% include ‘imgblock.html ’ %}</div>
г) так понимаю ajax_save_reiting_update должно получить картинку которую рейтингуют.
У Вас там карта урла неправильная, слеша нет перед $, и зачем вьюху в кавычки хз, я незнаю, может джанга старая
я бы сделал (r'ajax_save_reiting_update/$', ajax_save_reiting_update, name='ajax_raiting') и ИДшник картинки кидал бы постом.
ну и оно бы прилетало(см.д)
тогда нужный объект можно получить

reiting_img = Car.objects.get(pk=int(request.REQUEST['img_id']))

д) выкинул бы мешашину с тем что Вы там нагородили по части Ajax, подключил jQuery и написал бы так

function getNextImages(id){
    $.post( {% url ''ajax_raiting %}, {img_id: id} , function(data) {
	    if (data.success) { $("img_result").html(data.html); }
	});
        return false; 
    }

е)

def ajax_save_reiting_update(request):
        # Получаем IDшник выбранной картинки из ПОСТ и ищем объект
        reiting_img = Car.objects.get(pk=int(request.REQUEST['img_id']))
        # и делаем с ним что-нибудь нужное
        #  тут все эти ваши рейтингования и новая выборка
        result = [images[a], images[b]]
	html = render_to_string('imgblock.html ', {'item': result})
        payload = {'success': True, 'html': html}
        return HttpResponse(json.dumps(payload, cls=LazyEncoder), content_type='application/json')

Смысл всей этой байды- жамкаете на картинку- ее IDшник летит на сервер, обрабатывается, рендерится кусочек шаблона с двумя новыми картинками, прилетает обратно и заменяется блок со старыми картинками
За полную работоспособность кода не уверен. Но уверен за направление.

ilnur

Март 14, 2013 06:45:53

спасибо. за вечер многое поправил

nnmware

Март 14, 2013 17:55:37

Да не за что.
я там с кавычками в урле проперся в JS-куске.
конечно не url ‘'ajax_raiting а url ’ajax_raiting'