Commits

Mark Lavin  committed 0170155

Update docs with notes on including jQuery related media in the project base and in the admin. Fixes #16.

  • Participants
  • Parent commits 99242e4

Comments (0)

Files changed (5)

 If you are using `django-staticfiles` (or `django.contrib.staticfiles` in Django 1.3) then
 add `selectable` to your `INSTALLED_APPS` to include the related css/js.
 
-The jQuery and jQuery UI libraries are not included in the distribution but should be included
+The jQuery and jQuery UI libraries are not included in the distribution but must be included
 in your templates. See the example project for an example using these libraries from the
 Google CDN.
 

File docs/admin.rst

 is the same as working with regular forms.
 
 
+Including jQuery & jQuery UI
+--------------------------------------
+
+As noted :ref:`in the quick start guide <start-include-jquery>`, the jQuery and jQuery UI libraries 
+are not included in the distribution but must be included in your templates. For the
+Django admin that means overriding 
+`admin/base_site.html <https://code.djangoproject.com/browser/django/trunk/django/contrib/admin/templates/admin/base_site.html>`_.
+You can include this media in the block name `extrahead` which is defined in
+`admin/base.html <https://code.djangoproject.com/browser/django/trunk/django/contrib/admin/templates/admin/base.html>`_.
+
+    .. literalinclude:: ../example/templates/admin/base_site.html
+        :start-after: {% endblock title %}
+        :end-before: {% block branding %}
+
+See the Django documentation on
+`overriding admin templates <https://docs.djangoproject.com/en/1.3/ref/contrib/admin/#overriding-admin-templates>`_.
+See the example project for the full template example.
+
+
 Basic Example
 --------------------------------------
 

File docs/quick-start.rst

 `defining models <http://docs.djangoproject.com/en/1.3/topics/db/models/>`_
 and `using forms <http://docs.djangoproject.com/en/1.3/topics/forms/>`_.
 
+.. _start-include-jquery:
+
+Including jQuery & jQuery UI
+--------------------------------------
+
+The jQuery and jQuery UI libraries are not included in the distribution but must be included
+in your templates. See the example project for an example using these libraries from the
+`Google CDN <http://code.google.com/apis/libraries/devguide.html#jquery>`_. Django-Selectable
+should work with `jQuery <http://jquery.com/>`_ >= 1.4.3 and `jQuery UI <http://jqueryui.com/>`_ >= 1.8
+
+    .. literalinclude:: ../example/core/templates/base.html
+        :start-after: {{ form.media.css }}
+        :end-before: {{ form.media.js }}
+
+
+You must also include a `jQuery UI theme <http://jqueryui.com/themeroller/>`_ stylesheet. In the
+example project we've included the "lightness" theme via the Google CDN.
+
+    .. literalinclude:: ../example/core/templates/base.html
+        :start-after: </title>
+        :end-before: {{ form.media.css }}
+
 
 Defining a Lookup
 --------------------------------

File example/core/templates/base.html

 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-	<title>Django-Selectable Example</title>
-        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="screen">
-        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen">
-        {{ form.media.css }}
-        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
-        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
-        {{ form.media.js }}
-    </head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<title>Django-Selectable Example</title>
+<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen">
+{{ form.media.css }}
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
+{{ form.media.js }}
+</head>
     <body>
         <form action="{% url example-index %}" method="post" >
             {% csrf_token %}

File example/templates/admin/base_site.html

 {% extends "admin/base.html" %}
-{% block title %}{{ title }} | Django-Selectable Example Site{% endblock %}
+{% block title %}{{ title }} | Django-Selectable Example Site{% endblock title %}
 {% block extrahead %}
-        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="screen">
-        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen">
-        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
-        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
+<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen">
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
 {% endblock %}
 {% block branding %}
 <h1 id="site-name">Django-Selectable Administration</h1>
-{% endblock %}
-{% block nav-global %}{% endblock %}
+{% endblock branding %}
+{% block nav-global %}{% endblock nav-global %}