Passing javascript to external static file [Issue: #73]

Zambom
1 parent b0e18756
Showing 5 changed files with 65 additions and 71 deletions Show diff stats
amadeus/settings.py
courses/templates/subject/form_view_teacher.html
forum/static/js/forum.js
forum/templates/forum_list.html
forum/templates/post_list.html
@@ -144,6 +144,10 @@ USE_TZ = True
 STATIC_URL = '/static/'
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, "static"),
+]
+
 # Files
 MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'uploads')
 MEDIA_URL = '/uploads/'
 {% load static i18n %}
 {% block javascript %}
-    <script type="text/javascript">
-        var baseUrl = '{% url "forum:index" %}';
-        var formUrl = '{% url "forum:create" %}';
-
-        function showForum(topic) {
-            $.ajax({
-                url: baseUrl, 
-                data: {'topic': topic},
-                success: function(data) {
-                    $(".forum_topics").html(data);
-                }
-            });
-
-            $('#forumModal').modal();
-        }
-
-        function getForm() {
-            $.ajax({
-                url: formUrl, 
-                success: function(data) {
-                    $(".forum_form").html(data);
-                }
-            });
-
-            $(".forum_form").show();
-        }
-
-        var postsUrl = '{% url "forum:posts" %}';
-        var formPostsUrl = '';
-
-        function showPosts(forum) {
-            if ($("#collapse" + forum).hasClass('in')) {
-                $("#collapse" + forum).collapse('hide');
-            } else {
-                $.ajax({
-                    url: postsUrl, 
-                    data: {'forum': forum},
-                    success: function(data) {
-                        $("#collapse" + forum).find(".well").html(data);
-                    }
-                });
-
-                $("#collapse" + forum).collapse('show');
-            }
-        }
-
-        var postsAnswerUrl = '{% url "forum:post_answers" %}';
-        var formPostsAnswersUrl = '';
-
-        function showPostsAnswers(post) {
-            if ($("#collapse" + post).hasClass('in')) {
-                $("#collapse" + post).collapse('hide');
-            } else {
-                $.ajax({
-                    url: postsAnswerUrl, 
-                    data: {'post': post},
-                    success: function(data) {
-                        $("#collapse" + post).find(".well").html(data);
-                    }
-                });
-
-                $("#collapse" + post).collapse('show');
-            }
-        }
-    </script>
+    <script type="text/javascript" src="{% static 'js/forum.js' %}"></script>
 {% endblock %}
 <div class="panel panel-default">
@@ -73,7 +9,7 @@
         <div class="panel-heading">
             <div class="row">
                 <div class="col-md-9 col-sm-9">
-                    <h3>{{topic}}</h3>
+                    <h3>{{ topic }}</h3>
                 </div>
                 <div class="col-md-3 col-sm-3">
                     <a href="{% url 'course:update_topic' topic.slug%}" class="btn">{% trans "edit" %}</a>
@@ -82,8 +18,8 @@
         </div>
     </a>
     <div class="panel-body">
-        <p>{{topic.description|linebreaks}}</p>
-        <a href="javascript:showForum('{{topic.slug}}')">Forum</a>
+        <p>{{ topic.description|linebreaks }}</p>
+        <a href="javascript:showForum('{% url 'forum:index' %}', '{{topic.slug}}')">Forum</a>
     </div>
 </div>
@@ -93,7 +29,7 @@
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title" id="myModalLabel">
-                    <button type="button" class="btn btn-primary btn-sm" onclick="getForm();"><i class="fa fa-plus"></i> {% trans 'Create Forum' %}</button>
+                    <button type="button" class="btn btn-primary btn-sm" onclick="getForm('{% url 'forum:create' %}');"><i class="fa fa-plus"></i> {% trans 'Create Forum' %}</button>
                 </h4>
             </div>
             <div class="modal-body">
@@ -0,0 +1,54 @@
+function showForum(url, topic) {
+    $.ajax({
+        url: url, 
+        data: {'topic': topic},
+        success: function(data) {
+            $(".forum_topics").html(data);
+        }
+    });
+
+    $('#forumModal').modal();
+}
+
+function getForm(url) {
+    $.ajax({
+        url: url, 
+        success: function(data) {
+            $(".forum_form").html(data);
+        }
+    });
+
+    $(".forum_form").show();
+}
+
+function showPosts(url, forum) {
+    if ($("#collapse" + forum).hasClass('in')) {
+        $("#collapse" + forum).collapse('hide');
+    } else {
+        $.ajax({
+            url: url, 
+            data: {'forum': forum},
+            success: function(data) {
+                $("#collapse" + forum).find(".well").html(data);
+            }
+        });
+
+        $("#collapse" + forum).collapse('show');
+    }
+}
+
+function showPostsAnswers(url, post) {
+    if ($("#collapse" + post).hasClass('in')) {
+        $("#collapse" + post).collapse('hide');
+    } else {
+        $.ajax({
+            url: url, 
+            data: {'post': post},
+            success: function(data) {
+                $("#collapse" + post).find(".well").html(data);
+            }
+        });
+
+        $("#collapse" + post).collapse('show');
+    }
+}
 \ No newline at end of file
@@ -2,7 +2,7 @@
 {% if foruns|length > 0 %}
     {% for forum in foruns %}
-        <a class="forum_collapse" role="button" href="javascript: showPosts('{{ forum.slug }}')" aria-expanded="false">
+        <a class="forum_collapse" role="button" href="javascript: showPosts('{% url 'forum:posts' %}', '{{ forum.slug }}')" aria-expanded="false">
             <div class="page-header">
                 <h1 id="timeline">{{ forum }}</h1>
                 <b>{% trans 'Description' %}: </b>{{ forum.description }}<p>
@@ -4,7 +4,7 @@
     <ul class="timeline post">
         {% for post in posts %}
             <li>
-                <a class="post_collapse" role="button" href="javascript: showPostsAnswers('{{ post.id }}')" aria-expanded="false">
+                <a class="post_collapse" role="button" href="javascript: showPostsAnswers('{% url 'forum:post_answers' %}', '{{ post.id }}')" aria-expanded="false">
                     <div class="timeline-panel">
                         <div class="row">
                             <div class="col-xs-2 col-sm-2 col-md-2">
1	{% load static i18n %}	1	{% load static i18n %}
2		2
3	{% block javascript %}	3	{% block javascript %}
4	- <script type="text/javascript">
5	- var baseUrl = '{% url "forum:index" %}';
6	- var formUrl = '{% url "forum:create" %}';
7	-
8	- function showForum(topic) {
9	- $.ajax({
10	- url: baseUrl,
11	- data: {'topic': topic},
12	- success: function(data) {
13	- $(".forum_topics").html(data);
14	- }
15	- });
16	-
17	- $('#forumModal').modal();
18	- }
19	-
20	- function getForm() {
21	- $.ajax({
22	- url: formUrl,
23	- success: function(data) {
24	- $(".forum_form").html(data);
25	- }
26	- });
27	-
28	- $(".forum_form").show();
29	- }
30	-
31	- var postsUrl = '{% url "forum:posts" %}';
32	- var formPostsUrl = '';
33	-
34	- function showPosts(forum) {
35	- if ($("#collapse" + forum).hasClass('in')) {
36	- $("#collapse" + forum).collapse('hide');
37	- } else {
38	- $.ajax({
39	- url: postsUrl,
40	- data: {'forum': forum},
41	- success: function(data) {
42	- $("#collapse" + forum).find(".well").html(data);
43	- }
44	- });
45	-
46	- $("#collapse" + forum).collapse('show');
47	- }
48	- }
49	-
50	- var postsAnswerUrl = '{% url "forum:post_answers" %}';
51	- var formPostsAnswersUrl = '';
52	-
53	- function showPostsAnswers(post) {
54	- if ($("#collapse" + post).hasClass('in')) {
55	- $("#collapse" + post).collapse('hide');
56	- } else {
57	- $.ajax({
58	- url: postsAnswerUrl,
59	- data: {'post': post},
60	- success: function(data) {
61	- $("#collapse" + post).find(".well").html(data);
62	- }
63	- });
64	-
65	- $("#collapse" + post).collapse('show');
66	- }
67	- }
68	- </script>	4	+ <script type="text/javascript" src="{% static 'js/forum.js' %}"></script>
69	{% endblock %}	5	{% endblock %}
70		6
71	<div class="panel panel-default">	7	<div class="panel panel-default">
	@@ -73,7 +9,7 @@		@@ -73,7 +9,7 @@
73	<div class="panel-heading">	9	<div class="panel-heading">
74	<div class="row">	10	<div class="row">
75	<div class="col-md-9 col-sm-9">	11	<div class="col-md-9 col-sm-9">
76	- <h3>{{topic}}</h3>	12	+ <h3>{{ topic }}</h3>
77	</div>	13	</div>
78	<div class="col-md-3 col-sm-3">	14	<div class="col-md-3 col-sm-3">
79	<a href="{% url 'course:update_topic' topic.slug%}" class="btn">{% trans "edit" %}</a>	15	<a href="{% url 'course:update_topic' topic.slug%}" class="btn">{% trans "edit" %}</a>
	@@ -82,8 +18,8 @@		@@ -82,8 +18,8 @@
82	</div>	18	</div>
83	</a>	19	</a>
84	<div class="panel-body">	20	<div class="panel-body">
85	- <p>{{topic.description\|linebreaks}}</p>
86	- <a href="javascript:showForum('{{topic.slug}}')">Forum</a>	21	+ <p>{{ topic.description\|linebreaks }}</p>
		22	+ <a href="javascript:showForum('{% url 'forum:index' %}', '{{topic.slug}}')">Forum</a>
87	</div>	23	</div>
88	</div>	24	</div>
89		25
	@@ -93,7 +29,7 @@		@@ -93,7 +29,7 @@
93	<div class="modal-header">	29	<div class="modal-header">
94	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>	30	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
95	<h4 class="modal-title" id="myModalLabel">	31	<h4 class="modal-title" id="myModalLabel">
96	- <button type="button" class="btn btn-primary btn-sm" onclick="getForm();"><i class="fa fa-plus"></i> {% trans 'Create Forum' %}</button>	32	+ <button type="button" class="btn btn-primary btn-sm" onclick="getForm('{% url 'forum:create' %}');"><i class="fa fa-plus"></i> {% trans 'Create Forum' %}</button>
97	</h4>	33	</h4>
98	</div>	34	</div>
99	<div class="modal-body">	35	<div class="modal-body">
	@@ -0,0 +1,54 @@		@@ -0,0 +1,54 @@
		1	+function showForum(url, topic) {
		2	+ $.ajax({
		3	+ url: url,
		4	+ data: {'topic': topic},
		5	+ success: function(data) {
		6	+ $(".forum_topics").html(data);
		7	+ }
		8	+ });
		9	+
		10	+ $('#forumModal').modal();
		11	+}
		12	+
		13	+function getForm(url) {
		14	+ $.ajax({
		15	+ url: url,
		16	+ success: function(data) {
		17	+ $(".forum_form").html(data);
		18	+ }
		19	+ });
		20	+
		21	+ $(".forum_form").show();
		22	+}
		23	+
		24	+function showPosts(url, forum) {
		25	+ if ($("#collapse" + forum).hasClass('in')) {
		26	+ $("#collapse" + forum).collapse('hide');
		27	+ } else {
		28	+ $.ajax({
		29	+ url: url,
		30	+ data: {'forum': forum},
		31	+ success: function(data) {
		32	+ $("#collapse" + forum).find(".well").html(data);
		33	+ }
		34	+ });
		35	+
		36	+ $("#collapse" + forum).collapse('show');
		37	+ }
		38	+}
		39	+
		40	+function showPostsAnswers(url, post) {
		41	+ if ($("#collapse" + post).hasClass('in')) {
		42	+ $("#collapse" + post).collapse('hide');
		43	+ } else {
		44	+ $.ajax({
		45	+ url: url,
		46	+ data: {'post': post},
		47	+ success: function(data) {
		48	+ $("#collapse" + post).find(".well").html(data);
		49	+ }
		50	+ });
		51	+
		52	+ $("#collapse" + post).collapse('show');
		53	+ }
		54	+}
0	\ No newline at end of file	55	\ No newline at end of file
	@@ -2,7 +2,7 @@		@@ -2,7 +2,7 @@
2		2
3	{% if foruns\|length > 0 %}	3	{% if foruns\|length > 0 %}
4	{% for forum in foruns %}	4	{% for forum in foruns %}
5	- <a class="forum_collapse" role="button" href="javascript: showPosts('{{ forum.slug }}')" aria-expanded="false">	5	+ <a class="forum_collapse" role="button" href="javascript: showPosts('{% url 'forum:posts' %}', '{{ forum.slug }}')" aria-expanded="false">
6	<div class="page-header">	6	<div class="page-header">
7	<h1 id="timeline">{{ forum }}</h1>	7	<h1 id="timeline">{{ forum }}</h1>
8	<b>{% trans 'Description' %}: </b>{{ forum.description }}<p>	8	<b>{% trans 'Description' %}: </b>{{ forum.description }}<p>
	@@ -4,7 +4,7 @@		@@ -4,7 +4,7 @@
4	<ul class="timeline post">	4	<ul class="timeline post">
5	{% for post in posts %}	5	{% for post in posts %}
6	<li>	6	<li>
7	- <a class="post_collapse" role="button" href="javascript: showPostsAnswers('{{ post.id }}')" aria-expanded="false">	7	+ <a class="post_collapse" role="button" href="javascript: showPostsAnswers('{% url 'forum:post_answers' %}', '{{ post.id }}')" aria-expanded="false">
8	<div class="timeline-panel">	8	<div class="timeline-panel">
9	<div class="row">	9	<div class="row">
10	<div class="col-xs-2 col-sm-2 col-md-2">	10	<div class="col-xs-2 col-sm-2 col-md-2">