Ajax form handling
authorveltr
Mon, 01 Jul 2013 16:31:47 +0200
changeset 210 dd0e7cded39d
parent 209 fdc817dc75c0
child 211 35aca8206b40
Ajax form handling
src/egonomy/static/egonomy/js/main.js
src/egonomy/templates/egonomy_newbase.html
--- a/src/egonomy/static/egonomy/js/main.js	Fri Jun 28 16:39:45 2013 +0200
+++ b/src/egonomy/static/egonomy/js/main.js	Mon Jul 01 16:31:47 2013 +0200
@@ -53,12 +53,33 @@
 	$('.additemtocollection').bind('click', function(e){
 		// When an item meant to be added to a collection is clicked,
 		// we fill the form in the add-to-collection div
-		console.log(this + ", " + $(this) + ", " + $(this).attr('data-type') + ", " + $(this).attr('data-id'));
 		$('#add-to-collection .item-type').val($(this).attr('data-type'));
 		$('#add-to-collection .item-id').val($(this).attr('data-id'));
 	});
 	
 	
+	$(".ajax-form").submit(function(e) { // On submit Ajax Form
+	    var formel = $(this);
+	    $.ajax({
+	        url: formel.attr("action"),
+	        type: formel.attr("method"),
+	        data: formel.serialize(),
+	        success: function() {
+                $('.popin-wrap').fadeIn(function(){
+                    $(".additem-success").show();
+                });
+	            console.log.apply(console,arguments);
+	        },
+            error: function() {
+                $('.popin-wrap').fadeIn(function(){
+                    $(".additem-error").show();
+                });
+                console.log.apply(console,arguments);
+            }
+	    });
+	    formel.parents(".popin").hide();
+	    return false;
+	});	
 
 	if($('#map').length){
 		initmap()
--- a/src/egonomy/templates/egonomy_newbase.html	Fri Jun 28 16:39:45 2013 +0200
+++ b/src/egonomy/templates/egonomy_newbase.html	Mon Jul 01 16:31:47 2013 +0200
@@ -29,7 +29,7 @@
                 <a href="#" class="close-popin"></a>
             </header>
             <section>
-                <form action="{% url 'add_item' %}" method="POST">
+                <form class="ajax-form" action="{% url 'add_item' %}" method="POST">
                     <p>
                         <label for="collection-name">{% trans "Add to" %} :</label>
                         <label class="styled-select">
@@ -53,6 +53,12 @@
                 </form>
             </section>
         </div>
+        <div class="popin additem-success box-shadow">
+            <h2>{% trans "The item was successfully added to the collection" %}</h2>
+        </div>
+        <div class="popin additem-error box-shadow">
+            <h2>{% trans "An error occurred while addin the item to the collection" %}</h2>
+        </div>
       {% endif %}
       {% block popins %}{% endblock %}
     </div>