Django JavaScript Integration: AJAX and jQuery

Jonathan Hayward

Jump to: Overview | Reviews | The Author | Sample Chapters

Django JavaScript Integration: AJAX and jQuery

Click here to view more images

eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats

$22.94
save 15%!

Print + free eBook + free PacktLib access to the book: $71.98

$40.49
save 44%!

Free Shipping! UK, US, Europe and selected countries in Asia.

Also available on:

Overview

Table of Contents

The Author

Reviews

Downloads

Learn how Django + jQuery = AJAX
Integrate your AJAX application with Django on the server side and jQuery on the client side
Learn how to handle AJAX requests with jQuery
Compare the pros and cons of client-side search with JavaScript and initializing a search on the server side via AJAX
Handle login and authentication via Django-based AJAX

Book Details

Language : English
Paperback : 324 pages [ 235mm x 191mm ]
Release Date : January 2011
ISBN : 1849510342
ISBN 13 : 9781849510349
Author(s) : Jonathan Hayward
Topics and Technologies : All Books, AJAX, Java, jQuery, Open Source, Web Development

Preface
Chapter 1: jQuery and Ajax Integration in Django
Chapter 2: jQuery—the Most Common JavaScript Framework
Chapter 3: Validating Form Input on the Server Side
Chapter 4: Server-side Database Search with Ajax
Chapter 5: Signing Up and Logging into a Website Using Ajax
Chapter 6: jQuery In-place Editing Using Ajax
Chapter 7: Using jQuery UI Autocomplete in Django Templates
Chapter 8: Django ModelForm: a CSS Makeover
Chapter 9: Database and Search Handling
Chapter 10: Tinkering Around: Bugfixes, Friendlier Password Input, and a Directory That Tells Local Time
Chapter 11: Usability for Hackers
Appendix: Debugging Hard JavaScript Bugs
Index

Preface

Chapter 1: jQuery and Ajax Integration in Django

Ajax and the XMLHttpRequest object

Human speech: An overlaid function
Ajax: Another overlaid function
The technologies Ajax is overlaid on

JavaScript

XMLHttpRequest

Methods
Properties

HTML/XHTML
XML
JSON
CSS
The DOM
iframes and other Ajax variations
JavaScript/Ajax Libraries
Server-side technologies

A look at Django

Django templating kickstart
A more complete glimpse at Django templating

Setting JavaScript and other static content in place
Summary

Chapter 2: jQuery—the Most Common JavaScript Framework

jQuery and basic Ajax
jQuery Ajax facilities

$.ajax()

context
data
dataFilter
dataType
error(XMLHttpRequest, textStatus, errorThrown)
success(data, textStatus, XMLHttpRequest)
type
url

$.aj0axSetup()

Sample invocation
$.get() and $.post()
.load()

jQuery as a virtual higher-level language

The selectors

A closure-based example to measure clock skew
Case study: A more in-depth application

Chapter 3: Validating Form Input on the Server Side
Chapter 4: Server-side Database Search with Ajax
Chapter 5: Signing Up and Logging into a Website Using Ajax
Chapter 6: jQuery In-place Editing Using Ajax
Chapter 7: Using jQuery UI Autocomplete in Django Templates
Chapter 8: Django ModelForm: a CSS Makeover
Chapter 9: Database and Search Handling
Chapter 10: Tinkering Around: Bugfixes, Friendlier Password Input, and a Directory That Tells Local Time
Chapter 11: Usability for Hackers
Appendix: Debugging Hard JavaScript Bugs

Summary

Chapter 3: Validating Form Input on the Server Side

The standard lecture: low-level validation

Matching regular expressions
You cannot guarantee absolutely valid data
Validating can detect (some) malicious input

The Django way of validation

Django gives you some things for free
The steps in Django's validation
A more sensible and cruelty-free approach to validation
Things get murkier
The zero-one-infinity rule: a cardinal rule of thumb in usability
An improvement on Django's advertised approach
A validation example: GPS coordinates
Avoiding error messages that point fingers and say, "You're wrong!"

Validation as demanding that assumptions be met

Old-school: conform to our U.S.-based assumptions!
Adding the wrong kind of band-aid

Making assumptions and demanding that users conform

At least names are simple, right?
Even in ASCII, things keep getting murkier

Better validation may be less validation

Caveat: English is something of a lingua franca
We don't have to negotiate with pistols
Doing our best to solve the wrong problem: a story
It really does apply to validation
Facebook and LinkedIn know something better

Summary

Chapter 4: Server-side Database Search with Ajax

Searching on the client side and server side
Handling databases through Django models
Models for an intranet employee photo directory
Searching our database
A tour of Django persistence facilities
Summary

Chapter 5: Signing Up and Logging into a Website Using Ajax

admin.py: administrative functions called once
functions.py: project-specific functions, including our @ajax_login_required decorator
views.py: functions that render web pages
style.css: basic styling for usability
search.html: a template for client-side Ajax
The Django admin interface
Summary

Chapter 6: jQuery In-place Editing Using Ajax

Including a plugin

How to make pages more responsive

A template handling the client-side requirements

The bulk of the profile
Whitespace and delivery
Page-specific JavaScript
Support on the server side

Summary

Chapter 7: Using jQuery UI Autocomplete in Django Templates

Adding autocomplete: first attempt

Progressive enhancement, a best practice

A real-world workaround

"Interest-based negotiation": a power tool for problem solving when plan A doesn't work
A first workaround
Boilerplate code from jQuery UI documentation
Turning on Ajax behavior (or trying to)
Code on the server side

Refining our solution further
Summary

Chapter 8: Django ModelForm: a CSS Makeover

"Hello, world!" in ModelForm
Expanding and customizing the example
Customizing ModelForm pages' appearance
Going under ModelForm's hood
An excellent "stupid" question: where's the e-mail slot?
Summary

Chapter 9: Database and Search Handling

Moving forward to an AHAH solution

Django templates for simple AHAH

Templating for a list of search results
Template for an individual profile

Views on the server side

Telling if the user is logged in
A view to support deletion
The AHAH view to load profiles
Helper functions for the AHAH view for searching
An updated model
An AHAH server-side search function

Handling the client-side: A template for the main page
CSS for styling the directory

Our updated urlpatterns

Summary

Chapter 10: Tinkering Around: Bugfixes, Friendlier Password Input, and a Directory That Tells Local Time

Minor tweaks and bugfixes

Setting a default name of "(Insert name here)"
Eliminating Borg behavior
Confusing jQuery's load() with html()
Preventing display of deleted instances
Adding a favicon.ico

Handling password input in a slightly different way
A directory that includes local timekeeping
Summary

Chapter 11: Usability for Hackers

Usability begins with anthropology… and Django hackers have a good start on anthropology
Anthropological usability techniques

An introductory example: card sorting

Focus groups: cargo cult research for usability
Anthropological observation: the bedrock of usability

More than one way to see the same situation

Applying this foundation to usability
It's just like (hard) debugging
Lessons from other areas

Live cross-cultural encounters
History
Old books and literature
The last other area: whatever you have

Understanding the user

A lesson from optimization
What's wrong with scratching an itch, or you are not your user
Worst practices from the jargon file

Python and usability

It's not all about the computer!

What to do in the concrete
Further reading
Summary

Appendix: Debugging Hard JavaScript Bugs

"Just fiddling with Firebug" is considered harmful

Cargo cult debugging at your fingertips
The scientific method of debugging
Exhausting yourself by barking up the wrong tree
The humble debugger
The value of taking a break
Two major benefits to asking for help

Firebug and Chrome developer tools

The basics across browsers
Zeroing in on Chrome

Summary

Index

Jonathan Hayward

Jonathan Seth Hayward was born in 1975 in Riverside, California and had a childhood filled with curiosity and exploration. In eighth grade, he ranked 7th in the U.S. in the 1989 MathCounts competition, programmed a four dimensional maze, and did an independent study of calculus. This mathematical fascination prepared the way, over time, to ongoing explorations in other areas. These other explorations would feed into his work as an author on the web.

Hayward entered high school in 1989 at the Illinois Mathematics and Science Academy. There he continued in mathematics while pursuing a breadth of other interests. These interests laid broad and deep foundations for his later multidisciplinary endeavors on the web. In 1990-92, he administered a student-use social network that effectively provided web 2.0 functionality before the web became widely known. He also participated in, and wrote for, discussions on the social network, continued in French, and pursued more whimsical endeavors such as programming a video game on his calculator. He graduated in absentia in 1992, away in Washington, D.C. for a math contest.

He went on to study at Wheaton as a National Merit Scholar majoring in math in 1992, before transferring in 1994 to Calvin. Outside of class time at these two schools, he continued with interests that would come to have surprising connections and bear fruit in his later writing. He read the Bible at length, began working on the web, and started to write works that would be published on his main site. During his studies at Calvin, he earned an advanced certificate from the Sorbonne in 1995 before graduating from Calvin in 1996.

He began his post-graduate education at the University of Illinois at Urbana-Champaign in 1996. He earned his M.S. in applied math in 1998 with a computational science and engineering option and being the first person to graduate with the new master's thesis option. During that time, he began to explore other languages besides French and English. He passed a proficiency test to opt out of a year's German coursework within two weeks of self-study. (He would go on to study well over a dozen dialects and languages: ancient, medieval, modern, "conlang," computer...) By the time Hayward had finished his first master's, he had already begun his literature site. This site began to receive the first of what would grow, over years, to become more than 200 awards.

After some time out of school and beginning work as a computer consultant, Hayward enrolled at Cambridge in 2002. He earned a diploma (2003) and second master's (2004), this time an M.Phil. in theology directed under the philosophy of religion seminar. He then completed doctoral coursework in theology at Fordham University (2005-7), and briefly audited postgraduate anthropology and linguistics courses at Wheaton (2007). He is continuing computer work and writing literature, and his work has been published in journals including Inner Sanctum, Noesis, Perfection, Ubiquity, and Vidya, in addition to works for the popular Orthodox humor site, The Onion Dome, and a puzzle analysis published by some of the people at IBM's Watson Labs.

Hayward holds both a distinctive perspective and an ability to make surprising connections. Everything is connected, and this enriches his writing. His diverse academic interests and achievements are tied to an ability to make connections between seemingly remote areas, which brings a very rich fuel to see old things in new ways and new things in old ways. One Cambridge thesis used a concept in object-oriented programming as a basis for analysis in assessing Biblical studies. Such connections are a part of his writing and life. Hayward wears many hats: author, philosopher, theologian, artist, poet, wayfarer, philologist, inventor, web guru, preacher, teacher. He has created in, if anything, more genres than these hats: annotated bibliography, article, Borges-style short works, Christian, dictionary, dystopia, Eastern Orthodox, essay, experimental, fantasy, game, game review, humor, imaginary anthropology, interactive fiction, journal, koan, metacognition, mysticism, novella, parody, philosophy, poetry, poster, prayer, reference, satire, science fiction, short story, Socratic dialogue, speculative fiction, and theology.

Sorry, we don't have any reviews for this title yet.

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Code Downloads

Download the code and support files for this book.

Errata

- 7 submitted: last submission 22 Dec 2011

Errata type: Typo | Page number: 45 | Errata date: 31 Jan 11

$.aj0axSetup() should be $.ajaxSetup()

Errata type: Typo | Page number: 38 | Errata date: 11 Mar 11

$("#result#") should be $("#result")

Errata type: Code | Page number: 144 & 152 | Errata date: 11 Mar 11

decoator should be decorator

Errata type: Code | Page number: 202 | Errata date: 11 Mar 11

All references to locationi.id should be location.id

Errata type: Typo | Page number: 233 | Errata date: 11 Mar 11

The "statuses that are important and are emphasize" should drop the second 'are' to "statuses that are important and emphasize"

Errata type: Typo | Page number: 234 | Errata date: 11 Mar 11

The repeated 'the' should be dropped from "The the following div"

Errata type: Code | Page number: 32 | Errata date: 22 Mar 11

"4. At the end of the settings.py file, add the following:" should be "4. At the end of the urls.py file, add the following:"

There should also be an import settings statement at the start of the code.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

What you will learn from this book

Learn how and why, for certain kinds of web development, Django is more 'Pythonic' than Python
Understand whet the XMLHttpRequest Object is and how to implement it in various browsers
Embed JavaScript in Django templates
Learn account creation and login creation using AJAX
Build forms using Django models
Embed jQuery auto-complete plugins in your Django templates
Validate form input on the server side using AJAX
Integrate jQuery sliders into your Django template
Minify JavaScript files and also learn the pros and cons of doing so

Special Offers

PacktLib gives you access to this and 600+ other titles with an annual or monthly subscription.

Annual subscription:

$220.00 per annum

Monthly subscription:

$21.99 per month

Buy any two eBooks and get 50% off

Add any two eBooks to your cart, and 50% will be taken off their total price

Simply click below to add these two eBooks to your cart

View our bestselling Open Source bundles

In Detail

You want to create an AJAX application. Why would you use Django? Why would you use jQuery? Why would you use both together? Enter Django JavaScript Integration: AJAX and jQuery – your comprehensive answer to all these questions and the only extensive, practical, and hands-on guide to developing any AJAX application with Django and jQuery.

Gone are the days when you used to lament over the lack of official documentation on AJAX with Django. This book will teach you exactly why Django is called "The web framework for perfectionists with deadlines", how jQuery – the "write less do more" JavaScript library – is practically a virtual higher-level language, and why they both deserve to be integrated with AJAX.

This hands-on-guide shows you how to put Django and jQuery together in the process of creating an AJAX application. In this book, they are brought together in a real-world scenario, with attention to usability, to build and develop an AJAX application.

The first two chapters provide a short and necessary introduction to the world of Django, jQuery, and AJAX; and the remaining chapters are based on a case study that will make you realize the immense potential and benefits of integrating Django and jQuery with your AJAX application.

By the time you are done with this book, you'll be developing your AJAX applications with Django and jQuery in less time than you can say "integrate".

You will cover the basics of AJAX; use jQuery, the commonest JavaScript library, on the client side, and learn form validation with an eye to usability, build things with Django on the server-side, handle login and authentication via Django-based AJAX, and then dip into the rich jQuery plugin ecosystem to build in-place editing into your pages. You will add auto-complete functionality courtesy of jQuery UI, easily build forms with Django ModelForm, and then look at a client-side search implementation that can look things up without network access after initial download. You will learn to Implement a simple, expandable undo system, and offer more full-blooded account management, tinker, fix some bugs, offer a more usable way to handle password input, add local time support for people who are not in your time zone, look at usability, and finally take a look at debugging.

After working through this book, you will have both an AJAX application and a deep understanding that you can use to customize, extend, and further develop it in your organization.

This book has been written and tested for Django v 1.2.3 and jQuery v 1.4.4.

Approach

This book will teach you how to enrich your AJAX applications with Django and jQuery in a practical manner with minimum fuss. It introduces AJAX basics, gets a little deeper, and then goes chapter-by-chapter through a carefully chosen case study. It demonstrates how different pieces of a Django AJAX application work in themselves and are put together and specifically leads you through building an intranet employee photo directory with social networking features.

Who this book is for

This book is for people looking to integrate AJAX / JavaScript functionality into their web applications. It is for Django users who are looking to easily integrate AJAX features into their applications. Conversely, it will also be a priceless companion for users familiar with Django and jQuery who are and looking to integrate them in their AJAX applications. A working knowledge of Django and basic familiarity with AJAX and jQuery are assumed.