Найти - Пользователи
Полная версия: ajax
Начало » Django » ajax
1 2 3 4
Igor Shmigoff
Ребята, привет.
Есть такая задача - присобачить к джанго динамику. Точнее динамический интерфейс.
Порылся в инете, нашел что-то подобное что нужно: http://ajaxdaddy.com/demo-dynamic-content.html
Естественно нужно, чтоб вместо articleN.html подкладывались мои страницы.
Но как мне заставить это интерфейс работать под Джанго? Просто не знаю даже как начать.

Модель, что то типа, выбираешь “дать объяву”, появляется подобная динамическая страница, и кликая по вкладкам справа, появляются формочки для заполнения, загрузки фоток…
Ferroman
1. Делаешь то, что нужно, так, что бы работало без без ajax (доки django).
2. Прикручивашь jquery и делаешь загрузку динамической части через javascript (доки jquery).
3. …
4. PROFIT
Igor Shmigoff
Ferroman Спасибо

1) сделал. Работает отдельными страницами. Все делает.
2) Вот тут я стопорнул. Гуглю, но как то все не по теме, или я не понимаю, что по теме.

4) До этого далеко - это ознакомительная работа.
Ferroman
Всё тоже самое, что и в пункте 1 только используйте, например,
http://api.jquery.com/load
для обращения к урлу страницы (перехватить клик на урле - http://api.jquery.com/click/).
$('#result').load('ajax/test.html');
Результат заменит содержание контейнера #result.
Igor Shmigoff
Ferroman

Спасибо. Посмотрел Ваши ссылки. Понял что и как. Но не до конца.
Вопросов пара:
1) Делаю следующем образом:
Это тот шаблон (не весь, а избранное), что вызывается после пункта - “добавить объявление” - “Купить”:
<div id="contentContainer"></div>
<div id="ListContainer">
<ul id="contentList" class="contentList">
<li id="photo_add">Add photo</li>
<li id="descr_add">Add description</li>
<li id="panorama_add">Add panorama</li> <!-- тут можно добавить видео -->
</ul>
</div>
Далее, там же в шаблоне:
<script>
$('#panorama_add').click(function () {
$("#contentContainer").load("Autoring1/form_upload.html"); <!-- Тут вопрос -->
});
</script>
Form_upload.html - это простой html файл, для отображения формы для закачки.
Его представление:
 def save_view_panorama(request):      
if request.method == 'POST':
form = PanoramaForm(request.POST, request.FILES)
if form.is_valid():
form.save()
return HttpResponseRedirect('ok/')
else:
form= PanoramaForm()
template = form_upload.html'
return render_to_response(template,
{'form': form},
context_instance=RequestContext(request))
Соответственно form_upload.html один и тот же для всех видов контента. Но для каждого объекта модели (для каждого класса в файле моделей) он разный, т.е. соответствует запрошенной форме.

На всяк случай form_upload.html:
#form_upload.html:

{% extends "base.html" %}
{% block title %}Add{% endblock %}
{% block content %}

<h1>Upload {{ object }} </h1>

{% if form.errors %}
<p style="color: black; background: magenta; "> Requered fields: {{ form.errors|pluralize }} </p>
{% endif %}

<form action="" method="post" enctype="multipart/form-data" >{% csrf_token %}
{{ form.as_p }}<br>
<input type="submit" name="submit" value="Upload" id="submit">
</form>
{% endblock %}
Т.е. первый вопрос следующий: Если у меня один и тот же шаблон, в который долбят разные функции представления, то как в этот динамический контент
 $("#contentContainer").load("Autoring1/form_upload.html");
передать, что именно для этой модели я передаю форму залива? Иначе говоря, как можно джаваскрипту понять, что form_upload.html вызывается именно для ЭТОГО конкретного типа контента (panorama, а не photo, к примеру)?

2) Когда я нажимаю, добавить объяву -> купить, как браузеру понять то, что вот форма, для заполнения динамического контента ассоциированна именно с “купить”, а не с “продать” или “сдать”..? Т.е. нажал “объява” -> “купить” -> “кнопка ”Добавить объяву“” и появляется эта динамическая форма для добавления необходимых компонентов (фото, панорамы…). Я добавил то что захотел и как сообщить серверу что я добавил именно для ЭТОЙ объявы, а не для другой какой и чтоб он записал изменения для нее (этой модели).

Заранее спасибо, сорри за простыню.
ziro
Самый простой и надежный способ - указать правильный URL для сабмита формы, то есть в Вшем случае сделать например action=“/obyavlenie/panorama/some-id/” - где some-id - идентификатор конкретного объявления. Тогда Вы при обработке сабмита формы будете точно знать, какое именно объявление обрабатывается.

Причем с точки зрения уменьшение связности системы лучше action прописывать на стороне сервера в шаблоне.

Ну а если у Вас такого добра много, то возможно Вам будет полезно почитать, как подобные вещи делают в лучших домах Ландона - http://www.facebook.com/note.php?note_id=389414033919 - хотя это, конечно, сложнее, чем текущий вариант.
Ferroman
.load("Autoring1/form_upload.html");
Так Вы не шаблон загружайте, а путь, по которому save_view_panorama вызывается.
Igor Shmigoff
Ferroman
Под “путем” Вы имеете ввиду то что последним указано?
url(r'^upload/panorama/$', 'My_project.Autoring1.views.save_view_panorama'),
- это в urls.py.

Т.е.
.load("D:/My_project.Autoring1/views.py");
или что? Или http://localhost:8000/My_project/upload/panorama/ ?
Что то не ясно пока.
Ferroman
http://localhost:8000/My_project/upload/panorama/
Сейчас обьясню. Этот самый load открывает урл, ваш контроллер, к которому этот урл привязан (save_view_panorama) генерит и возвращает полученный html. javascript лепит его в контейнер на странице.
Igor Shmigoff
Ferroman
Сэнкс, я так и понял (проанализировал, так сказать.) Но в любом случае, пока не работает.
В случае
<script>
$('#panorama_add').click(function () {
$("#contentContainer").load("http://localhost:8000/My_project/upload/panorama/");
});
</script>
Смущает то, что в данном случае нет никаких обращений типа request/response.
Вот в примере http://ajaxdaddy.com/demo-dynamic-content.html - с чего открывалась тема, есть подобные вещи, т.е. обращения на сервер. Но и там у меня не работает. Было подозрение, что встроенный веб сервер джанги не дружит с ajax и jquery, но говорят, что работает. Значит что то не то у меня. Вот что - я пока сижу и отламываю голову.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Powered by DjangoBB