Sono abbastanza in ritardo, ma voglio documentare come combinare e adattare le soluzioni presentate da d0ugal in un modo, che risolverà un codice modello molto più pulito.
Ho un modello che rappresenta le persone di contatto.
L'(generica) al fine di ottenere uno ContactPerson assomiglia a questo:
def contcactperson_detail_view(request, name):
try:
person = ContactPerson.objects.get(slug=name)
except:
raise Http404
if request.is_ajax():
return contcactperson_detail_view_ajax(request, person)
return list_detail.object_detail(
request,
queryset = ContactPerson.objects.all(),
object_id = person.id,
template_object_name = "contactperson",
)
@render_to('cms/contactperson_detail_ajax.html')
def contcactperson_detail_view_ajax(request, person):
return {'contactperson':person, 'is_ajax':True}
Il modello per rendere l'idea che gestisce uno ContactPerson si chiama contcactperson_detail_view.html:
{% extends "index.html" %}
{% block textpane %}
<h1 id="mainheader">{{ contactperson.first_name }} {{ contactperson.family_name }} </h1>
<div class="indentation"> </div>
{% include 'cms/contactperson_detail_photo.html' %}
<div id="text_pane">
{% include 'cms/contactperson_detail_textpane.html' %}
</div>
{% endblock %}
Esso comprende due sotto- modelli
contactperson_detail_textpane.html
<p>{{ contactperson.description }}</p>
<ul>
<li>
<dl>
<dt>Email</dt>
<dd>
{{ contactperson.mail }}
</dd>
</dl>
</li>
<li>
<dl>
<dt>Contact Person for</dt>
<dd>
<ul>
{% for c in contactperson.categories.all %}
<li><a href="{% url category-view c.slug %}">{{ c }}</a></li>
{% endfor %}
</ul>
</dd>
</dl>
</li>
</ul>
e contactperson_detail_photo.html
{% with contactperson.photo.detailphoto as pic %}
{% with pic.url as pic_url %}
<div {% if not is_ajax %}id='imageContainer'{% endif %} style="float: right;padding-right:0.5em;
padding-bottom: 1em; padding-left:0.5em;clear:both;
width:{{ pic.width }}px">
<div style="width:{{ pic.width}}px">
<img style="clear:both" src="{{ pic_url }}" alt="{{ i.name }}"/>
</div>
</div>
{% endwith %}
{% endwith %}
questo 3 modelli verranno utilizzati, se la richiesta non è ajax.
Ma se la richiesta è ajax, contcactperson_detail_view restituirà la vista contcactperson_detail_view_ajax, che utilizza il modello contactperson_detail_ajax.html per il rendering. E questo modello si presenta così:
<h1>{{ contactperson.first_name }} {{ contactperson.family_name }}</h1>
{% include 'cms/contactperson_detail_photo.html' %}
{% include 'cms/contactperson_detail_textpane.html' %}
in modo che utilizza gli stessi sub-modelli, ma non sta estendendo nulla, quindi solo il markup necessario consegnato. Poiché la vista ajax passa a is_ajax = True nel modello, può essere utilizzata per regolare elementi secondari, come l'impostazione di attributi ID corretti.
Nessun processore di contesto o ulteriore url-conf necessario.
Infine il codice Javascript:
$("#contact_person_portlet a").click(function(event){
event.preventDefault();
$.ajax({
type: "GET",
url: event.target.getAttribute('href'),
success: function(msg){
overlay(msg);
}
});
});
speranza che possa essere utile per alcune persone. Se è così, per favore lascia un commento!
Questo è quello con cui avevo giocato, ma al tempo non conoscevo il javascript che conosco, quindi invia gli oggetti come JSON, crea i valori javascript dell'oggetto letterali e poi tablediv.innerHTML = foo ? – Joel
JSON * è * un oggetto letterale quindi la cosa bella di usarlo in javascript è che non devi fare nulla con esso per usarlo effettivamente una volta che ce l'hai. Mi piace usare JSON in congiunzione con il sistema di template che ho linkato sopra (jquery, non prototype, sorry) perché puoi semplicemente passare il JSON restituito direttamente al template che hai configurato e funzionerà. – Steerpike