StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's how to do it with Dajax/Dajaxice, which are meant to make AJAX easy in Django:</p> <ol> <li><p>Install <a href="http://docs.dajaxproject.com/dajaxice/installation.html#installing-dajaxice" rel="noreferrer">Dajaxice</a> and <a href="https://github.com/jorgebastida/django-dajax/wiki/installation" rel="noreferrer">Dajax</a> per the documentation. The docs don't seem to mention it, but you can also use <code>pip</code>, i.e. </p> <pre><code>pip install django-dajaxice pip install django-dajax </code></pre> <p>to the get the libraries. In any case, make sure to follow the doc instructions to install the Django apps and get the necessary Javascript libraries loaded into <code>gallery.html</code>. (Note you need to have jQuery or a similar JS framework installed for Dajax to work.)</p></li> <li><p>In <code>gallery.html</code>, isolate the section where the <code>items</code> and <code>categories</code> are rendered into HTML. Copy this section into a separate Django template called, say, <code>gallery_content.html</code> and then replace the section in <code>gallery.html</code> with a blank <code><div></code> with a specific id, e.g. </p> <pre><code><div id="gallery-content"></div> </code></pre> <p>What you are doing is creating <code>#gallery-content</code> as a placeholder for the HTML that will be generated later for each page via a Dajaxice call.</p></li> <li><p>Now, elsewhere in <code>gallery.html</code>, create a way for the user to tell you what page to go to, e.g.</p> <pre><code><input id="page-number"> <button onclick="Dajaxice.myapp.gallerypages_content(Dajax.process, {'page': document.getElementById('page-number').value})">Go to page</button> </code></pre> <p>The Javascript <code>onclick</code> code -- which is called whenever the user clicks on the button element -- does two things: (1) grabs the value of the <code>#page-number</code> input element, and (2) sends it to the Django <code>gallerypages_content</code> view asynchronously, i.e. without a normal web browser page load, via the <code>Dajaxice.myapp.gallerypages_content</code> Javascript call. Note that <code>myapp</code> should be replaced with the name of your Django app.</p></li> <li><p>Finally, you need to create the <code>gallerypages_content</code> view -- which is a variant of your existing <code>gallerypages</code> view modified to work with Dajaxice/Dajax. Dajaxice is hard-coded to look for such views in <code>ajax.py</code>, so create <code>ajax.py</code> in your <code>myapp</code> folder as follows:</p> <pre><code>from django.template.loader import render_to_string from dajax.core import Dajax from dajaxice.decorators import dajaxice_register @dajaxice_register def gallerypages_content(request, page): page = int(page) # ... code to calculate itemsList and categories as before ... html = render_to_string('gallery_content.html', {'items': itemsList,'categories': categories,}, context_instance = RequestContext(request)) dajax = Dajax() dajax.assign('#gallery-content', 'innerHTML', html) return dajax.json() </code></pre> <p>This is what the code above does: (1) converts the <code>page</code> parameter, which is now a string (i.e the raw string value of the <code>#page-number</code> input element), into a Python integer; (2) does the same calculation as before to get <code>itemsList</code> and <code>categories</code>; (3) uses <code>render_to_string</code> to render <code>gallery_content.html</code> to an HTML string instead of to the normal Django HTTP response; (4) uses the Dajax API to create an instruction to inject the HTML into the <code>#gallery-content</code> div; (5) and, as the view's response, returns these instructions in JSON format. The Dajaxice call in the <code>onclick</code> handler will in effect receive these instructions and act on them (strictly speaking, it's the <code>Dajax.process</code> callback that does this), causing the HTML to show up. Note that you need to decorate <code>gallerypages_content</code> with <code>@dajaxice_register</code> -- that helps Dajaxice hook everything together.</p></li> </ol> <p>I haven't tested any of this specifically, but it's based on how I've gotten Dajaxice/Dajax to work for me and I hope it works for you -- or at least gets you started! </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload