Django JavaScript Integration: AJAX and jQuery

Book description

Develop AJAX applications using Django and jQuery

  • 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

  • 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.

    Table of contents

    1. Django JavaScript Integration: AJAX and jQuery
      1. Table of Contents
      2. Django JavaScript Integration: AJAX and jQuery
      3. Credits
      4. Foreword
        1. Web development that is more "Pythonic" than just Python
        2. Django and its templating engine
        3. What we will do in this book—building a Web 2.0 intranet employee photo directory
      5. About the Author
      6. About the Reviewers
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      8. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Errata
          2. Piracy
          3. Questions
      9. 1. jQuery and Ajax Integration in Django
        1. Ajax and the XMLHttpRequest object
          1. Human speech: An overlaid function
          2. Ajax: Another overlaid function
          3. The technologies Ajax is overlaid on
            1. JavaScript
          4. XMLHttpRequest
            1. Methods
            2. Properties
          5. HTML/XHTML
          6. XML
          7. JSON
          8. CSS
          9. The DOM
          10. iframes and other Ajax variations
          11. JavaScript/Ajax Libraries
          12. Server-side technologies
        2. A look at Django
          1. Django templating kickstart
          2. A more complete glimpse at Django templating
        3. Setting JavaScript and other static content in place
        4. Summary
      10. 2. jQuery—the Most Common JavaScript Framework
        1. jQuery and basic Ajax
        2. jQuery Ajax facilities
          1. $.ajax()
            1. context
              1. Closures
              2. Prototypes and prototypal inheritance
            2. data
            3. dataFilter
            4. dataType
            5. error(XMLHttpRequest, textStatus, errorThrown)
            6. success(data, textStatus, XMLHttpRequest)
            7. type
            8. url
          2. $.aj0axSetup()
            1. Sample invocation
            2. $.get() and $.post()
            3. .load()
              1. Sample invocations
        3. jQuery as a virtual higher-level language
          1. The selectors
        4. A closure-based example to measure clock skew
        5. Case study: A more in-depth application
          1. Chapter 3: Validating Form Input on the Server Side
          2. Chapter 4: Server-side Database Search with Ajax
          3. Chapter 5: Signing Up and Logging into a Website Using Ajax
          4. Chapter 6: jQuery In-place Editing Using Ajax
          5. Chapter 7: Using jQuery UI Autocomplete in Django Templates
          6. Chapter 8: Django ModelForm: a CSS Makeover
          7. Chapter 9: Database and Search Handling
          8. Chapter 10: Tinkering Around: Bugfixes, Friendlier Password Input, and a Directory That Tells Local Time
          9. Chapter 11: Usability for Hackers
          10. Appendix: Debugging Hard JavaScript Bugs
        6. Summary
      11. 3. Validating Form Input on the Server Side
        1. The standard lecture: low-level validation
          1. Matching regular expressions
          2. You cannot guarantee absolutely valid data
          3. Validating can detect (some) malicious input
        2. The Django way of validation
          1. Django gives you some things for free
          2. The steps in Django's validation
          3. A more sensible and cruelty-free approach to validation
          4. Things get murkier
          5. The zero-one-infinity rule: a cardinal rule of thumb in usability
          6. An improvement on Django's advertised approach
          7. A validation example: GPS coordinates
          8. Avoiding error messages that point fingers and say, "You're wrong!"
        3. Validation as demanding that assumptions be met
          1. Old-school: conform to our U.S.-based assumptions!
          2. Adding the wrong kind of band-aid
        4. Making assumptions and demanding that users conform
          1. At least names are simple, right?
          2. Even in ASCII, things keep getting murkier
        5. Better validation may be less validation
          1. Caveat: English is something of a lingua franca
          2. We don't have to negotiate with pistols
          3. Doing our best to solve the wrong problem: a story
          4. It really does apply to validation
          5. Facebook and LinkedIn know something better
        6. Summary
      12. 4. Server-side Database Search with Ajax
        1. Searching on the client side and server side
        2. Handling databases through Django models
        3. Models for an intranet employee photo directory
        4. Searching our database
        5. A tour of Django persistence facilities
        6. Summary
      13. 5. Signing Up and Logging into a Website Using Ajax
        1. administrative functions called once
        2. project-specific functions, including our @ajax_login_required decorator
        3. functions that render web pages
        4. style.css: basic styling for usability
        5. search.html: a template for client-side Ajax
        6. The Django admin interface
        7. Summary
      14. 6. jQuery In-place Editing Using Ajax
        1. Including a plugin
          1. How to make pages more responsive
        2. A template handling the client-side requirements
          1. The bulk of the profile
          2. Whitespace and delivery
          3. Page-specific JavaScript
          4. Support on the server side
        3. Summary
      15. 7. Using jQuery UI Autocomplete in Django Templates
        1. Adding autocomplete: first attempt
          1. Progressive enhancement, a best practice
        2. A real-world workaround
          1. "Interest-based negotiation": a power tool for problem solving when plan A doesn't work
          2. A first workaround
          3. Boilerplate code from jQuery UI documentation
          4. Turning on Ajax behavior (or trying to)
          5. Code on the server side
        3. Refining our solution further
        4. Summary
      16. 8. Django ModelForm: a CSS Makeover
        1. "Hello, world!" in ModelForm
        2. Expanding and customizing the example
        3. Customizing ModelForm pages' appearance
        4. Going under ModelForm's hood
        5. An excellent "stupid" question: where's the e-mail slot?
        6. Summary
      17. 9. Database and Search Handling
        1. Moving forward to an AHAH solution
          1. Django templates for simple AHAH
            1. Templating for a list of search results
            2. Template for an individual profile
          2. Views on the server side
            1. Telling if the user is logged in
            2. A view to support deletion
            3. The AHAH view to load profiles
            4. Helper functions for the AHAH view for searching
            5. An updated model
            6. An AHAH server-side search function
          3. Handling the client-side: A template for the main page
          4. CSS for styling the directory
            1. Our updated urlpatterns
        2. Summary
      18. 10. Tinkering Around: Bugfixes, Friendlier Password Input, and a Directory That Tells Local Time
        1. Minor tweaks and bugfixes
          1. Setting a default name of "(Insert name here)"
          2. Eliminating Borg behavior
          3. Confusing jQuery's load() with html()
          4. Preventing display of deleted instances
          5. Adding a favicon.ico
        2. Handling password input in a slightly different way
        3. A directory that includes local timekeeping
        4. Summary
      19. 11. Usability for Hackers
        1. Usability begins with anthropology… and Django hackers have a good start on anthropology
        2. Anthropological usability techniques
          1. An introductory example: card sorting
        3. Focus groups: cargo cult research for usability
        4. Anthropological observation: the bedrock of usability
          1. More than one way to see the same situation
        5. Applying this foundation to usability
        6. It's just like (hard) debugging
        7. Lessons from other areas
          1. Live cross-cultural encounters
          2. History
          3. Old books and literature
          4. The last other area: whatever you have
        8. Understanding the user
          1. A lesson from optimization
          2. What's wrong with scratching an itch, or you are not your user
          3. Worst practices from the jargon file
        9. Python and usability
          1. It's not all about the computer!
        10. What to do in the concrete
        11. Further reading
        12. Summary
      20. A. Debugging Hard JavaScript Bugs
        1. "Just fiddling with Firebug" is considered harmful
          1. Cargo cult debugging at your fingertips
          2. The scientific method of debugging
          3. Exhausting yourself by barking up the wrong tree
          4. The humble debugger
          5. The value of taking a break
          6. Two major benefits to asking for help
        2. Firebug and Chrome developer tools
          1. The basics across browsers
          2. Zeroing in on Chrome
        3. Summary
      21. Index

    Product information

    • Title: Django JavaScript Integration: AJAX and jQuery
    • Author(s):
    • Release date: January 2011
    • Publisher(s): Packt Publishing
    • ISBN: 9781849510349