StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I hate this problem ... and I run into it all the time.</p> <p>For my most recent Django site we had a Newsletter which contained N Articles and, of course, order was important. I assigned the default order as ascending Article.id, but this failed if Articles were entered in something other than "correct" order.</p> <p>On the Newsletter change_form.html page I added a little bit of jQuery magic using the Interface plugin (<a href="http://interface.eyecon.ro/" rel="noreferrer">http://interface.eyecon.ro/</a>). I show the titles of the associated Articles and the user can drag them around as they like. There is an onChange handler that recomputes the Article.id's in article_order field.</p> <p>Enjoy,<br> Peter</p> <p>For app=content, model=Newsletter, the following is in templates/admin/content/newslettter/change_form.html</p> <pre><code>{% extends 'admin/change_form.html' %} {% block form_top %}{% endblock %} {% block extrahead %}{{ block.super }} <script type="text/javascript" src="/media/js/jquery.js"></script> <script type="text/javascript" src="/media/js/interface.js"></script> <script> $(document).ready( function () { $('ol.articles').Sortable( { accept : 'sortableitem', helperclass : 'sorthelper', activeclass : 'sortableactive', hoverclass : 'sortablehover', opacity: 0.8, fx: 200, axis: 'vertically', opacity: 0.4, revert: true, trim: 'art_', onchange: function(list){ var arts = list[0].o[list[0].id]; var vals = new Array(); var a; for (a in arts) { vals[a] = arts[a].replace(/article./, ''); } $('#id_article_order').attr('value', vals.join(',')); } }); } ); </script> {% endblock %} {% block after_related_objects %} {% if original.articles %} <style> .sortableitem { cursor:move; width: 300px; list-style-type: none; } </style> <h4>Associated Articles</h4> <ol class="articles" id="article_list"> {% for art in original.articles %} <li id="article.{{art.id}}" class="sortableitem">{{art.title}}</li> {% endfor %} </ol> {% endif %} {% endblock %} </code></pre>

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