Comment for Event submission ( bindWithDelay )

eventplanner/templates/eventplanner/event_view.html

@@ -15,41 +15,12 @@
 
 {% block content %}
 
+	{% addtoblock "js" strip %} <script src="{{STATIC_URL}}/js/bindWithDelay.js" type="text/javascript" ></script>{% endaddtoblock %}
+	
 
 	{% addtoblock "js" %}
 		<script>
 		
-		function getCookie(name) {
-		    var cookieValue = null;
-		    if (document.cookie && document.cookie != '') {
-		        var cookies = document.cookie.split(';');
-		        for (var i = 0; i < cookies.length; i++) {
-		            var cookie = jQuery.trim(cookies[i]);
-		            // Does this cookie string begin with the name we want?
-		            if (cookie.substring(0, name.length + 1) == (name + '=')) {
-		                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-		                break;
-		            }
-		        }
-		    }
-		    return cookieValue;
-		}
-		var csrftoken = getCookie('csrftoken');
-		
-		
-		function csrfSafeMethod(method) {
-		    // these HTTP methods do not require CSRF protection
-		    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
-		}
-		$.ajaxSetup({
-		    crossDomain: false, // obviates need for sameOrigin test
-		    beforeSend: function(xhr, settings) {
-		        if (!csrfSafeMethod(settings.type)) {
-		            xhr.setRequestHeader("X-CSRFToken", csrftoken);
-		        }
-		    }
-		});
-		
 		function setEventButtonStatus( button, status ) {
 			others = button.siblings();
 			all    = button.add( button.siblings() );
@@ -93,6 +64,23 @@
 		
 		$(function(){
 			
+			$(".event-comment").bindWithDelay("keypress", function() {
+				
+
+				putObject = [ { "event":    $(this).data("event-id"),  
+						        "musician": $(this).data("username"),
+						        "comment":  $(this).val() } ];
+
+				$.ajax( {
+					type: "PUT",
+					url: "/eventParticipation/" + $(this).data("username") + "/" +  $(this).data("event-id"),
+					contentType: "application/json",
+					data: JSON.stringify(putObject)
+				}); 		
+				
+			}, 800 );
+			
+			
 		    $(".event-status-yes").click(function () {
 		    	putStatus( $(this), "Yes" );
 		    });
@@ -157,7 +145,7 @@
 							  	 
   	 						  	 <td>
 							  	 	<div class="input-append">
-										<input id="appendedInputButton" size="16" type="text" value="{{ event.participation.comment }}" ><button class="btn" type="button">OK</button>
+										<input size="16" type="text" data-event-id="{{event.pk}}" data-username="{{user.username}}" class="event-comment" value="{{ event.participation.comment }}" >
 									 </div> 
 							  	 </td>							  	 
 						  	</tr>

website/static/js/bindWithDelay.js

@@ -0,0 +1,56 @@
+/*
+bindWithDelay jQuery plugin
+Author: Brian Grinstead
+MIT license: http://www.opensource.org/licenses/mit-license.php
+
+http://github.com/bgrins/bindWithDelay
+http://briangrinstead.com/files/bindWithDelay
+
+Usage:
+    See http://api.jquery.com/bind/
+    .bindWithDelay( eventType, [ eventData ], handler(eventObject), timeout, throttle )
+
+Examples:
+    $("#foo").bindWithDelay("click", function(e) { }, 100);
+    $(window).bindWithDelay("resize", { optional: "eventData" }, callback, 1000);
+    $(window).bindWithDelay("resize", callback, 1000, true);
+*/
+
+(function($) {
+
+$.fn.bindWithDelay = function( type, data, fn, timeout, throttle ) {
+
+    if ( $.isFunction( data ) ) {
+        throttle = timeout;
+        timeout = fn;
+        fn = data;
+        data = undefined;
+    }
+
+    // Allow delayed function to be removed with fn in unbind function
+    fn.guid = fn.guid || ($.guid && $.guid++);
+
+    // Bind each separately so that each element has its own delay
+    return this.each(function() {
+
+        var wait = null;
+
+        function cb() {
+            var e = $.extend(true, { }, arguments[0]);
+            var ctx = this;
+            var throttler = function() {
+                wait = null;
+                fn.apply(ctx, [e]);
+            };
+
+            if (!throttle) { clearTimeout(wait); wait = null; }
+            if (!wait) { wait = setTimeout(throttler, timeout); }
+        }
+
+        cb.guid = fn.guid;
+
+        $(this).bind(type, data, cb);
+    });
+};
+
+})(jQuery);

website/templates/website/base.html

@@ -29,6 +29,42 @@
 {% addtoblock "js" strip %} <script src="{{STATIC_URL}}/js/theme.js"></script>                               {% endaddtoblock %}    
 {% addtoblock "js" strip %} <script src="{{STATIC_URL}}/js/index-slider.js" type="text/javascript" ></script>{% endaddtoblock %}  
 
+{% addtoblock "js" %}
+
+<script>
+
+function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie != '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = jQuery.trim(cookies[i]);
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+var csrftoken = getCookie('csrftoken');
+
+
+function csrfSafeMethod(method) {
+    // these HTTP methods do not require CSRF protection
+    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+}
+$.ajaxSetup({
+    crossDomain: false, // obviates need for sameOrigin test
+    beforeSend: function(xhr, settings) {
+        if (!csrfSafeMethod(settings.type)) {
+            xhr.setRequestHeader("X-CSRFToken", csrftoken);
+        }
+    }
+});
+</script>
+{% endaddtoblock %}
 
 
 
@@ -67,8 +103,8 @@
                 <ul class="nav pull-right">
                 	{% block menu_contents %}
                 	
-                	<li><a href="index.html">HOME</a></li>
-                    <li><a href="about-us.html">ABOUT US</a></li>
+                	<li><a href="/index.html">HOME</a></li>
+                    <li><a href="/about-us.html">ABOUT US</a></li>
                 	
                 	{% endblock %}