Commits

Kenneth Love  committed 753d30f

full ajax all the way across the sky! double ajax

  • Participants
  • Parent commits f30ce3f

Comments (0)

Files changed (5)

 from flask import Flask, render_template, redirect, url_for, request, flash
-from flask import session
+from flask import session, jsonify
 import redis
 import settings
 
     elif rtype == 'string':
         r.set(key, value)
 
-    flash(key + ' was saved successfully')
+    #flash(key + ' was saved successfully')
 
-    return redirect(url_for('key', key=key))
+    return jsonify(
+        flash=key + ' was saved successfully',
+        value=value + 'boobs'
+    )
 
 if __name__ == '__main__':
     app.run()

File static/js/jquery.hashchange.min.js

+/*
+ * jQuery hashchange event - v1.3 - 7/21/2010
+ * http://benalman.com/projects/jquery-hashchange-plugin/
+ *
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
+

File static/js/redbeard.js

         $(this).change();
     });
 }
+
+jQuery(window).hashchange(function() {
+    var link = "/key/" + window.location.hash.replace("#", "");
+    $.get(link, function(data) {
+        $('#right').html(data);
+    });
+});
+
+$(function() {
+	listFilter($("#keyheader"), $("#keylist"));
+
+    if (window.location.hash) {
+        var link = "/key/" + window.location.hash.replace("#", "");
+        $.get(link, function(data) {
+            $('#right').html(data);
+        });
+    }
+
+    $("a", "#keylist").live('click', function(e) {
+        var link = $(this).attr('href'),
+            hash = link.replace("/key/", "");
+        e.preventDefault();
+        $.get(link, function(data) {
+            $('#right').html(data);
+            window.location.hash = hash;
+        });
+    });
+});

File templates/index.html

 {% endblock %}
 
 {% block extra_scripts %}
+	<script src="{{ url_for('static', filename='js/jquery.hashchange.min.js') }}"></script>
 	<script src="{{ url_for('static', filename='js/redbeard.js') }}"></script>
-	<script>
-		$(function() {
-			listFilter($("#keyheader"), $("#keylist"));
-		});
-	</script>
 {% endblock %}

File templates/key.html

-<!DOCTYPE HTML>
-<html>
-<head>
-	<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<ul id="flashes"></ul>
 
-	<title>Redbeard</title>
-	
-</head>
-<body>
-	{% with messages = get_flashed_messages() %}
-		{% if messages %}
-		<ul class="flashes">
-			{% for message in messages %}
-			<li>{{ message }}</li>
-			{% endfor %}
-		</ul>
-		{% endif %}
-	{% endwith %}
-	<h1>{{ key }}</h1>
-	<h2>{{ rtype }}</h2>
-	<form action="{{ url_for('save', key=key) }}" method="post">
-		<textarea name="value" cols="80" rows="20">{{ output }}</textarea>
+<article>
+	<header>
+		<h1>{{ key }}</h1>
+		<h2>{{ rtype }}</h2>
+	</header>
+	<form action="{{ url_for('save', key=key) }}" method="post" 
+		id="key">
+		<textarea name="value" cols="60" rows="20">{{ output }}</textarea>
 		<br>
 		<input type="submit" value="save">
 	</form>
-	<a href="{{ url_for('index') }}">back</a>
-</body>
-</html>
+</article>
+
+<script>
+	$(function() {
+    	$("#key").submit(function(e) {
+        	e.preventDefault();
+
+			var link = $(this).attr("action"),
+				flashes = $("#flashes");
+
+			flashes.empty();
+
+			$.ajax({
+				url: link,
+				type: "POST",
+				data: {
+					"value": $(this).find("textarea").val()
+				},
+				dataType: "json",
+				success: function(data) {
+					console.log(data);
+					$(this).find("textarea").val(data['value']);
+					$("<li>").text(data['flash']).appendTo(flashes);
+				}
+			});
+    	});
+	});
+</script>