Update and enhance javascript code

* Use shorthand notation for `$(document).ready`. This isn't
  just shorter but also slightly faster as it uses a cached
  instance or $(document) instead of re-instantiating jQuery.
* Use .prop('checked') instead of .attr('checked').
  Form fields reflect live state in properties, attributes are
  only used when parsing the HTML to set the initial values of
  the DOM properties. In the past (upto jQuery 1.6) jQuery
  would cover you by secretly calling .prop() for common mistakes
  but this has been deprecated and removed.
* Use .toggleClass instead of `if hasClass/addClass/removeClass`.
* Cancel previous AJAX request before starting another one.
  This fixes the bug where using the "Guess lexer" or "Diff" button
  twice in a row can sometimes result in the second push being
  ignored. Since the requests are asynchronous, one can arrive
  before or after the other and the callback called in a different
  order. It also saves a bit on the network I guess.
* DiffAjax: Moved location.hash assignment to before the request.
  It is asynchronous anyway, so the assignment happened before
  the request already. But now it is more obvious that this is
  the case.
* Simplified various selectors to just an ID instead of element
  with ID. IDs are unique. If you have more than one of them
  with a different element, there's something wrong. I suppose
  in a way it also saves potential maintenance in the future if
  a minor detail changes (e.g. from <div> to <p>).
* Removed weird variable conflict that was incorrectly
  copy-pasted in 1f863b345f.
  `var a;` when `a` already exists does nothing. It doesn't clear
  or reset it. It just weird syntax that should throw an error
  but is instead silently ignored. And `curLine` is already set
  and continues to be there.

dpaste/templates/dpaste/base.html

@@ -31,20 +31,26 @@
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
 <script src="{% static "dpaste/bootstrap/js/bootstrap.min.js" %}"></script>
 <script>
-jQuery(document).ready(function($) {
+jQuery(function($) {
+    var lexerReq;
     $('#guess_lexer_btn').click(function() {
-        $.getJSON('{% url "snippet_guess_lexer" %}',
+        // Cancel previous request if it is still pending
-            {
+        if (lexerReq) {
-                codestring: $('#id_content').val()
+            lexerReq.abort();
-            },
+        }
-            function(data) {
+
-                if (data.lexer === 'unknown') {
+        lexerReq = $.getJSON('{% url "snippet_guess_lexer" %}', {
-                    $('#guess_lexer_btn').css('color', 'red');
+            codestring: $('#id_content').val()
-                } else {
+        }).done(function(data) {
-                    $('#id_lexer').val(data.lexer);
+            if (data.lexer === 'unknown') {
-                    $('#guess_lexer_btn').css('color', 'inherit');
+                $('#guess_lexer_btn').css('color', 'red');
-                }
+            } else {
-            });
+                $('#id_lexer').val(data.lexer);
+                $('#guess_lexer_btn').css('color', 'inherit');
+            }
+        }).complete(function() {
+            lexerReq = null;
+        });
     });
 
     $('.autofocus input:text, .autofocus textarea').first().focus();

dpaste/templates/dpaste/snippet_details.html

@@ -78,44 +78,55 @@
 {% block script_footer %}
 {{ block.super }}
 <script>
-jQuery(document).ready(function($){
+jQuery(function($) {
-    $('.snippet-reply-hidden').click(function(e){
+    var diffReq;
+
+    $('.snippet-reply-hidden').click(function(e) {
         $(this).removeClass('snippet-reply-hidden');
     });
 
     /**
-    * Diff Ajax Call
+     * Diff Ajax Call
-    */
+     */
-    $('.snippet-diff-trigger').click(function(e){
+    $('.snippet-diff-trigger').click(function(e) {
         e.preventDefault();
         $('#snippet-diff').slideDown('fast');
         $('#snippet-diff form').submit();
     });
 
 
-    $('form#diffform').submit(function() {
+    $('#diffform').submit(function() {
         var a = $('input[name="a"]:checked').val(),
-            b = $('input[name="b"]:checked').val(),
+            b = $('input[name="b"]:checked').val();
-            hash = 'D' + a + ',' + b;
+
-        $.get("{% url "snippet_diff" %}", {
+        window.location.hash = 'D' + a + ',' + b;
+
+        // Cancel previous request if it is still pending
+        if (diffReq) {
+            diffReq.abort();
+        }
+
+        diffReq = $.get("{% url "snippet_diff" %}", {
             a: a,
             b: b
-        }, function(data){
+        }).done(function(data) {
             $('#diff').html(data).slideDown('fast');
+        }).complete(function() {
+            diffReq = null;
         });
-        window.location.hash = hash;
+
         return false;
     });
 
     var curLine = document.location.hash,
         hashlist;
 
-    if (curLine.substring(0, 2) === '#D'){
+    if (curLine.substring(0, 2) === '#D') {
         hashlist = curLine.substring(2).split(',');
-        if (hashlist.length == 2) {
+        if (hashlist.length === 2) {
             console.log(hashlist);
-            $('form#diffform input[name="a"][value="'+hashlist[0]+'"]').attr('checked', true);
+            $('#diffform input[name="a"][value="' + hashlist[0] + '"]').prop('checked', true);
-            $('form#diffform input[name="b"][value="'+hashlist[1]+'"]').attr('checked', true);
+            $('#diffform input[name="b"][value="' + hashlist[1] + '"]').prop('checked', true);
             $('#snippet-diff').slideDown('fast');
             $('#snippet-diff form').submit();
         }
@@ -124,10 +135,8 @@ jQuery(document).ready(function($){
     /**
      * Line Highlighting
      */
-    var curLine = document.location.hash,
-        hashlist;
 
-    if (curLine.substring(0, 2) == '#L'){
+    if (curLine.substring(0, 2) === '#L') {
         hashlist = curLine.substring(2).split(',');
         if (hashlist.length > 0 && hashlist[0] !== '') {
             $.each(hashlist, function(index, elem){
@@ -136,15 +145,11 @@ jQuery(document).ready(function($){
         }
     }
 
-    $('.linenums li').click(function(e){
+    $('.linenums li').click(function(e) {
         var line = $(this),
             hash = 'L';
 
-        if (line.hasClass('marked')) {
+        line.toggleClass('marked');
-            line.removeClass('marked');
-        } else {
-            line.addClass('marked');
-        }
 
         $('.linenums li.marked').each(function (index, elem) {
             if (hash !== 'L') hash += ',';